1

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>
3

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!

| improve this answer | |
  • Thanks @Tel, I do have a question. When you declare the JSON files with the script, do you keep the files as .json or convert it to .js? – Minh Mai Jun 10 '15 at 21:30
  • I have used either, they both work. – Tel Jun 11 '15 at 19:04
  • did you get it to work for you? – Tel Jun 26 '15 at 17:42
  • Sadly, no it didn't work. I'm having issues with mapbox returning a certain error ReferenceError: feature is not defined. For some reason, passing it in through your suggestion (choice #1), I can't pass extra arguments to fill in the color appropriately. – Minh Mai Jun 26 '15 at 18:33
  • See also stackoverflow.com/questions/44907595/… and try checking your .json in geojsonlint.com – LeasMaps Jan 26 '18 at 8:43
1

You shoud add your external geojson files as standalone scripts and then reference their variable name within your leaflet script.

<script>
L.geoJson(zipData).addTo(map);

var map = L.mapbox.map('map',{
   center: [41.9, -91.5],
   zoom: 7,
});
</script>

<script type="text/javascript" src="zip-file.json"></script>`

Your zip-file.json should start something like

var zipData = {"type":"FeatureCollection","features":[....

This page shows a good example of an external file being used http://leafletjs.com/examples/choropleth.html

Good luck

| improve this answer | |
-1

Your JSON data should refer to a variable if possible-i.e "county-file.json" should be instead let countydata =add the data here

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.