Toggle external geoJson layers on and off (more complex scenario)

69 views
Skip to first unread message

Derek Kaden

unread,
Nov 18, 2015, 12:14:52 PM11/18/15
to Leaflet

I am using jQuery's getJSON method to load external line data I've created in QGIS. 

What I'm trying to do is toggle my layers on and off - simple check boxes, no radio button for the basemap. I'd also like all the layers to be off when the map is initially loaded.

I tried assigning a variable before the L.geoJson function var layers={}; and then L.control.layers(null, layers).addTo(map); That doesn't seem to work.

How does one create a layer control for multiple external geojson's that are already associated with a few callback functions (L.geoJson, style, and onEachFeature)? Thanks in advance.

Here's my code:

var map=L.map('map').setView([41.9698, -87.6859], 12);

var basemap = L.tileLayer('http://a.tile.stamen.com/toner/{z}/{x}/{y}.png',
    {
      //attribution: would go here
      maxZoom: 17,
      minZoom: 9
    }).addTo(map);

//display geoJson to the map as a vector

var x = function(source, map)
{
L.geoJson(source,
    {

style: function(feature){
var fillColor, side=feature.properties.side;
    if (side==='Both') fillColor = '#309e2d';
    else if (side==='Neither') fillColor = '#d90f0f';
    else if (side==='West Only') fillColor = '#e27f14';
    else if (side==='East Only') fillColor = '#2b74eb';
    else if (side==='North Only') fillColor = '#eae42b';
    else if (side==='South Only') fillColor = '#552d04';
    else fillColor = '#f0f5f3';
    return { color: fillColor, weight: 3.5, opacity: null };
        },

onEachFeature: function(feature, geojson){
var popupText="<h1 class='makebold'>Border: </h1>"+feature.properties.name+"<br/>"+"<h1 class='makebold'>Which Side?: </h1>"+feature.properties.side;
geojson.bindPopup(popupText);
        }

    }).addTo(map);
};      

$.getJSON("data/Knox.geojson", function(source){ x(source, map); });
$.getJSON("data/abc.geojson", function(source){ x(source, map); });
$.getJSON("data/xyz.geojson", function(source){ x(source, map); });

k_man_au

unread,
Nov 23, 2015, 4:40:08 PM11/23/15
to Leaflet
here's something that might put you on the right path....

function toggleLayer (layer, showLayer) {
if (showLayer && !map.hasLayer(layer) {
map.addLayer(layer);
} else if (!showLayer && map.hasLayer(layer)) {
map.removeLayer(layer);
}
Reply all
Reply to author
Forward
0 new messages