CODEWITHSUNDEEP
mapsleafletdc.leaflet.js
anandg112
anandg112

Reputation: 462

leaflet.js map is not showing up

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>

Upvotes: 26

Views: 52331

Answers (3)

Gary T
Gary T

Reputation: 113

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.

Upvotes: 10

YaFred
YaFred

Reputation: 10008

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);

Upvotes: 60

IvanSanchez
IvanSanchez

Reputation: 19059

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.

Upvotes: 8

Related Questions