2

I've set a Mapbox map with a GeoJSON layer overlaying it. The problem is that with the default set values, the JSON layer shows up just fine. However, If I change the .setView too much, the JSON layer doesn't show up, just the map. Can anyone explain to me why this is occurring?

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
   <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   <script src="http://d3js.org/d3.v3.min.js"></script>
   <script src="http://d3js.org/queue.v1.min.js"></script>
   <script src="http://d3js.org/topojson.v1.min.js"></script> 
   <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.8/mapbox.js'></script>  
   <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.8/mapbox.css' rel='stylesheet' />
   <style>
      html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
      .key path {
        display: none;
      }
   </style>
</head>
<body>
   <div id="map" style="width: 100%; height: 100%"></div>
   <script>
      queue()
          .defer(d3.json, 'med.json') 
          .await(makeMap)

      function makeMap(error, data) {
        var color = d3.scale.linear()
              .domain([10, 400])
              .range(['#F0F0D0', '#930F16']);


          L.mapbox.accessToken = 'pk.eyJ1IjoibWluaDUiLCJhIjoiaXlwYTAxOCJ9.Ny8tujUV7-0dbVHVu3RQ_w';
          var map = L.mapbox.map('map', 'minh5.d0e19262')
              //ERROR OCCURS HERE
              .setView([41.9, -91.5], 4); // try changing the coordinates to 41.9, -431

          L.tileLayer('mapbox.streets', {
              maxZoom: 18,
              minZoom: 1,
              attribution: 'Map tiles by <a href="http://www.mapbox.com/m">Mapbox</a> Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'
          }).addTo(map);
          function style(feature) {
            return {
                fillColor: color(feature.properties.count),
                weight: 1,
                opacity: 0.2,
                color: 'black',
                fillOpacity: 0.5
            };
          }

      function highlightFeature(e) {
        var layer = e.target;
        layer.setStyle({
          weight: 10,
          color: '#666',
          dashArray: '',
          fillOpacity: 0.5
        });
        if (!L.Browser.ie && !L.Browser.opera) {
          layer.bringToFront();
        }
        info.update(layer.feature.properties);
      }

      var geojson;

      function resetHighlight(e) {
        geojson.resetStyle(e.target);
        info.update();
      }

      function zoomToFeature(e) {
        map.fitBounds(e.target.getBounds());
      }

      function onEachFeature(feature, layer) {
        layer.on({
          mouseover: highlightFeature,
          mouseout: resetHighlight,
          click: zoomToFeature
        });
      }


      geojson = L.geoJson(data, {
        style: style,
        onEachFeature: onEachFeature
      }).addTo(map);


        var info = L.control();
        info.onAdd = function (map) {
          this._div = L.DomUtil.create('div', 'info');
          this.update();
          return this._div;
        };
        info.update = function (feature) {
          this._div.innerHTML = (feature ?
            '<b>'  + 'Block ID:' + feature.id + '<br>' + feature.count + ' Republican Primary Voters</b><br />'
            : '');
        };
        info.addTo(map);


      };

   </script>
</body>
</html>
2
  • what coords are you trying to change to? right now it says // try changing the coordinates to 41.9, -431
    – toms
    Apr 23, 2015 at 23:24
  • Sidenote: why are you including both mapbox.js and leaflet.js?You only need mapbox.js in this example.Including Leaflet.js(alongside leaflet.css) is redundant and an unnecessary load.
    – snkashis
    Apr 24, 2015 at 19:50

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.