i have html page using leaflet.js , reason cannot map display.
i have api mapbox in correct place no map. following js code,the markup , css see messed on.
html :
<!doctype html> <html xmlns="http://www.w3.org/1999/html"> <head lang="en"> <head> <meta charset="utf-8"> <title>learn maps</title> <link rel="stylesheet" type ="text/css" href="style.css" /> <link rel="stylesheet" href="night_class/leaflet-0.7.3/leaflet.css" /> <script src="night_class/leaflet-0.7.3/leaflet.js"></script> <script> window.onload = function() { //every part goes here var map = l.map('map').setview([45.46, -122.739], 4); l.tilelayer('https://a.tiles.mapbox.com/v4/rodneyabutler.db94e2a6/page.html?access_token=pk.eyj1ijoicm9kbmv5ywj1dgxlciisimeioijiyzd2svvvin0.r7umtxuochqcrdmpiwg6qq#4/45.51/-122.69', { attribution: 'map data © <a href="http://mapbox.com">mapbox</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">cc-by-sa</a>, imagery © <a href="http://mapbox.com">mapbox</a>', maxzoom: 18 }).addto(map); } </script> </head> <body> <div id="map">map</div> </body> </html> css :
body{ margin: 0px; } #map { display: block; margin-left: auto; margin-right: auto; margin-top: 10px; height:300px; width:50%; border: solid crimson 4px; /*background-color:#000;*/ }
with leaflet, need have div holds map set before create map, or else map object doesn't know go. try moving script tags below map div.
the final script should this:
<!doctype html> <html xmlns="http://www.w3.org/1999/html"> <head lang="en"> <head> <meta charset="utf-8"> <title>learn maps</title> <link rel="stylesheet" type ="text/css" href="style.css" /> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> </head> <body> <div id="map"></div> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <script> window.onload = function() { var tilelayer = l.tilelayer("http://server.arcgisonline.com/arcgis/rest/services/world_topo_map/mapserver/tile/{z}/{y}/{x}.png", {maxzoom: 18, attribution: 'mrlc, state of oregon, state of oregon dot, state of oregon geo, esri, delorme, here, tomtom, usgs, nga, epa, nps, u.s. forest service'}); var map = new l.map('map', { layers: tilelayer }).setview([45.46, -122.739], 4); }; </script> </body> </html> 