CODEWITHSUNDEEP
javascripttwitter-bootstrap-3mapsleaflet
lena
lena

Reputation: 97

Leaflet Map won't show up - only grey

So, I have the leaflet map. It was working fine, but somehow it's not working anymore! Can anyone tell me if there is an error in my JS code? Couldn't finde one. 

var map = L.map('map').setView([50.93985, 6.94013], 13);

L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
    maxZoom: 13,
    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: 'examples.map-i86knfo3'
}).addTo(map);


L.marker([52.26887, 10.52677]).addTo(map)
    .bindPopup("<b>Design and Data GmbH</b><br/>XY</b><br/>Braunschweig").openPopup();

L.marker([41.87239, 12.48018]).addTo(map)
    .bindPopup("<b>Design and Data GmbH</b><br/>XY</b><br/>Rom").openPopup();

L.marker([50.93985, 6.94013]).addTo(map)
    .bindPopup("<b>Design and Data GmbH</b><br/>Hohenzollernring 56</b><br/>51109 Köln").openPopup();

map.fitBounds([
    [50.93985, 6.94013],
    [52.26887, 10.52677],
    [41.87239, 12.48018]
]);

var popup = L.popup();

function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(map);
}

map.on('click', onMapClick);

Upvotes: 3

Views: 4949

Answers (1)

pk.
pk.

Reputation: 986

I think something is wrong with your tileLayer url, I get 404 (Not Found) errors when leaflet is trying to fetch the tiles.

If I change that to use 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' the map tiles load correctly.

Upvotes: 4

Related Questions