Añadir varias capas JSON al mapa de Leaflet

Question

Estoy tratando de poner dos archivos json diferentes sobre un mismo mapa. Uno está dibujado por límites de código postal, el otro es de condado. Por alguna razón, no consigo que el folleto funcione. Si alguien puede ayudarme a señalar dónde está el problema, ¡sería genial!

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

Answer 1

Hay dos posibilidades que he encontrado (he tenido el mismo problema).

1. Para la primera, la respuesta de arriba ayuda. Estaba intentando hacerlo como tú, sin usar el <script> para cargar los archivos, pero si lo hace, funciona. Declare cada archivo JSON usando la etiqueta <script> etiqueta:

<script src="JSONFILE-1.js" type="text/javascript"></script>
<script src="JSONFILE-2.js" type="text/javascript"></script>

Asegúrese de que cada archivo JSON comienza con el var ya que se incluirá a través de la etiqueta script:

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

Llámalos:

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,... }); } });

Al llamarlos, no es necesario addTo(map) ya que de esto se encargará, como lo hizo en su código, el L.control.layers(baseMaps, overlayMaps).addTo(map); .

2. Si no quiere incluir los archivos como tales y prefiere utilizar $.geojson Encontré otra opción que es simplemente llamar al L.geoJson con null . Funciona igual de bien (aunque no sé si es la solución más elegante):

var jsonVar = L.geoJson(null, {...

...entonces:

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

Espero que esto ayude.

Answer 2

Debe añadir sus archivos geojson externos como scripts independientes y luego hacer referencia a su nombre variable dentro de su folleto 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>`

Su zip-file.json debe comenzar algo así como

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

Esta página muestra un buen ejemplo de utilización de un archivo externo http://leafletjs.com/examples/choropleth.html

Buena suerte

Answer 3

Sus datos JSON deben referirse a una variable si es posible, por ejemplo, "county-file.json" debería ser en su lugar deje countydata = añada los datos aquí