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
Post a Comment