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); });
here's something that might put you on the right path....