[GIS] Multiple GeoJSON Layers

d3javascriptleaflet

I have a leaflet map of the US and I would like to toggle between zip codes and county shapes. There seems to be no tutorials on how to achieve this in the documentation or an other forums I have looked at.

Best Answer

If I understand what you are asking, you have a basemap of the US, and geojson layers for zip codes and county shapes, and you want to toggle (turn on or off) the geojson layers?

Leaflet layer control is designed for this

Documentation
http://leafletjs.com/reference.html#control-layers

Example
http://leafletjs.com/examples/layers-control/

Leaflet L.geoJson() returns a layer which you can use in the layers control:

// parse the geojson (very simplified example here)
var zip = L.geoJson(zipjson, {});
var counties = L.geoJson(countiesjson, {});

// from there, similar to the example: 
var usmap = L.tileLayer(url, {});

// initialize the map
var map = L.map('map', {
    center: [39.73, -104.99],
    zoom: 10,
    layers: [usmap]
});

// specify the basemap and overlays to put in the layers control
var baseMaps = {
    "US": usmap,
};

var overlayMaps = {
    "Counties": counties,
    "Zips": zip
};

// initialize up the L.control.layers
L.control.layers(baseMaps, overlayMaps).addTo(map);
Related Question