leaflet.js map is not showing up

Asked 4/5, 2016 at 9:36 Answered 18/10, 2021 at 11:31

I am a newbie to leaflet.js. Can anyone help me with debugging the following code? I am trying to show a map on screen but only zoom-in and zoom-out button shows up on Google Chrome and the map screen is empty.

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

Carrel answered 4/5, 2016 at 9:36 Comment(0)

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

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

Check out the source of 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 don't want 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);

Decato answered 4/5, 2016 at 10:27 Comment(0)

Re-read the Leaflet quick-start tutorial, in particular this bit:

It’s worth noting that Leaflet is provider-agnostic, meaning that it doesn’t enforce a particular choice of providers for tiles, and it doesn’t even contain a single provider-specific line of code.

Leaflet doesn't add any default map data. It's up to you to tell Leaflet which data (vector features, tile layers) you want to show.

Montalvo answered 4/5, 2016 at 10:30 Comment(0)

In case anyone else like me comes here looking for answers to why Leaflet isn't displaying, I found that Chrome would not display my map unless I set the width of the div, as well as the height. As has been previously said, that wasn't the primary issue in the OP's case, but their code is also missing a width specification.

Amphibology answered 18/10, 2021 at 11:31 Comment(0)

Recommended topics

Hot tags