javascript - Switching to Leaflet Map Doesn't Load -


i'm trying load standard leaflet map can overlay geojson file on it. map loads if use map, doesn't work leaflet. error

get http://a.tiles.mapbox.com/v3/mapid/7/40/47.png 404 (not found) 

my assumption choosing different map not affect @ since i'm replacing canvas put geojson on (obviously i'm wrong). can explain me why doesn't work? code below , have commented changed 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 coordinates 41.9, -431 , 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 to: http://{s}.tiles.mapbox.com/v3/mapid/{z}/{x}/{y}.png'               maxzoom: 18,               minzoom: 1,               attribution: 'map tiles <a href="http://www.mapbox.com/m">mapbox</a> data <a href="http://openstreetmap.org">openstreetmap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">cc 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 side note, know why if can change set view, geojson data not load? code reproduced (just above tilelayer line).

var map = l.map('map').setview([41.9, -93.5], 4);  

make sure load mapbox map id , access token. here example of that.

first, have account on mapbox.com, can create project there , map-id. see access token there, too.

if use mapbox.js, easier, because can add map-id dom element.


Comments

Popular posts from this blog

c++ - No viable overloaded operator for references a map -

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - Cannot secure connection using TLS -