[GIS] Adding Multiple JSON Layers to Leaflet Map

javascriptleaflet

I'm trying to put two different json files over a single map. One is drawn by zip code boundaries, the other is county. For some reason, I can't get my leaflet to work. IF someone can help point me to where the issue lies, that'll be great!

   <script>
   //ingest and congiure zip file
   zipjson = L.geoJson("zip-file.json", {
     style: style,
     onEachFeature: function(feature, layer){
       layer.on({
         mouseover: highlightFeature,
         mouseout: resetHighlight,
     })
       layer.bindPopup('<b>Zip Code: </b>' + feature.properties.ZIPCODE + '<br>' +
       "<b> Data Attribute #1: </b> " + feature.properties.attr1 + '<br>' +
       "<b> Data Attribute #2: </b> " + feature.properties.attr2 + '<br>' +
       )
     }
   }).addTo(map);

   //ingest and configure county level layer
   countyjson = L.geoJson("county-file.json", {
     style: style,
     onEachFeature: function(feature, layer){
       layer.on({
         mouseover: highlightFeature,
         mouseout: resetHighlight,
     })
       layer.bindPopup('<b>County: </b>' + feature.properties.COUNTY + '<br>' +
       "<b> Data Attribute #1: </b> " + feature.properties.attr1 + '<br>' +
       "<b> Data Attribute #2: </b> " + feature.properties.attr2 + '<br>' +
       )
     }
   }).addTo(map);

   // set map layer
   var usmap = L.tileLayer('mapbox.streets', {
       maxZoom: 18,
       minZoom: 1,
       attribution: '<font size = "2"><b> Target Universe:  Voters who voted in the last two caucus plus the top 100k modeled voters</b></font><br>'
   }).

   L.mapbox.accessToken = 'fake-token-name';

   //initalize map
   var map = L.mapbox.map('map',{
     center: [41.9, -91.5],
     zoom: 7,
     layers: [usmap]
   });

   //set parameters to color map
    var max_num = 2000;
    var color = d3.scale.linear()
          .domain([0, max_num])
          .range(['#F0F0D0', '#930F16']);

    function style(feature) {
      return {
          fillColor: color(feature.properties.targetnum), // fill depending on value
          weight: 1,
          opacity: 0.5, 
          color: 'black',
          fillOpacity: 0.9 
      };
    }


    // configuration to fix map
    var baseMaps = {
      "US" : usmap,
    };

    var overlayMap = {
      "Counties" : countyjson,
      "Zip Codes" : zipjson
    };

    L.control.layers(baseMaps, overlayMap).addTo(map);

   </script>

Best Answer

There are two possibilities I found (I have had the same problem).

  1. For the first one, the answer on top help. I was trying to do it as you did, without using the <script> tag to load the files, but if you do so, it works. Declare each JSON file using the <script> tag:
<script src="JSONFILE-1.js" type="text/javascript"></script>
<script src="JSONFILE-2.js" type="text/javascript"></script>

Make sure each JSON file starts with the the var declaration, as it will be included through the script tag:

var jsonVar = { "type":"Feature"...

Call them in:

var layer1 = L.geoJson(var_name_from_jsonfile1, {
  pointToLayer: function (feature, latlng) {
    return L.circleMarker(latlng, {
      radius: 8, ...
                });
  }
});
var layer2 = L.geoJson(var_name_from_jsonfile2, {
  pointToLayer: function (feature, latlng) {
    return L.circleMarker(latlng, {
      radius: 8, ...
                });
  }
});

When calling them, you do not need to addTo(map) since this will be taken care of, as you did on your code, by L.control.layers(baseMaps, overlayMaps).addTo(map);.

  1. If you don't want to include the files as such and would rather use $.geojson I found another option which is just calling the L.geoJson with null. It works just as well (though I don't know if its the most elegant solution):
var jsonVar = L.geoJson(null, {...

...then:

$.getJSON("json/nead.json", function (data) {
      jsonVar.addData(data);
    });

hope this helps!

Related Question