CODEWITHSUNDEEP
javascriptleaflet
Minh
Minh

Reputation: 2300

Switching to Leaflet Map Doesn't Load

I'm trying to load up the standard leaflet map so I can overlay a geojson file over it. The map loads up perfectly if I use another map, but it doesn't work with leaflet. The error I get is 

GET http://a.tiles.mapbox.com/v3/MapID/7/40/47.png 404 (Not Found)

My assumption that choosing a different map will not affect much at all since I'm only replacing the canvas to put my geojson on (obviously I'm wrong). Can someone explain me why this doesn't work? My code is below and I have commented where I changed the maps

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


   <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']);

          // try changing the coordinates to 41.9, -431 and see happens
          var map = L.map('map').setView([41.9, -93.5], 4); 


          // ERROR BEGINS HERE **
          L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
            //Tried changing this to: http://{s}.tiles.mapbox.com/v3/MapID/{z}/{x}/{y}.png'
              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 + ' People</b><br />'
            : '');
        };
        info.addTo(map);


      };

   </script>
</body>

Also a side note, does anyone know why if I can change the set view, the geojson data does not load? Code is reproduced (just above the tileLayer line).

var map = L.map('map').setView([41.9, -93.5], 4);

Upvotes: 1

Views: 1988

Answers (1)

Hinrich
Hinrich

Reputation: 13983

make sure you load the mapbox map with an id and access token. here is an example of that.

first, you have to get an account on mapbox.com, then you can create a project there and get your map-id. you will see your access token there, too.

If you use Mapbox.js, this will be easier, because you can just add your Map-id to your DOM Element.

Upvotes: 1

Related Questions