Geek Answers Handbook

Map leaflet.js not showing

I am new to leaflet.js . Can someone help me with debugging the following code? I'm trying to show the map on the screen, but only the zoom in and out button appears in Google Chrome and the map screen is blank.

 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /> <style> #mapid { height: 180px; } </style> </head> <body> <div id="mapid"></div> <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> <script> var mymap = L.map('mapid').setView([51.505, -0.09], 13); </script> </body> </html>
+6
source share
2 answers

Here is your corrected code: http://plnkr.co/edit/E7dw2AuNbLneYpz51Qdi?p=preview

There is no tile provider in your code, so nothing is displayed on your map.

Check out the source http://leafletjs.com/examples/quick-start-example.html

  var mymap = L.map('mapid').setView([51.505, -0.09], 13); L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', { maxZoom: 18, attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery © <a href="http://mapbox.com">Mapbox</a>', id: 'mapbox.streets' }).addTo(mymap);

If you do not need tiles from mapbox, you can use openstreet map

  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(mymap);
+16
source

Reread Leaflet Quick Start Guide , specifically this bit:

It is worth noting that Leaflet is an agnostic provider, which means that it does not use a specific choice of suppliers for the plates, and it does not even contain a separate line of code for a specific supplier.

The default map data is not added to the sheet. You need to tell Leaflet what data (vector functions, tile layers) you want to show.

+2
source

More articles:


All Articles