CODEWITHSUNDEEP
javascriptleaflet
dimitris93
dimitris93

Reputation: 4273

How to start map with leaflet-js

I am trying to follow this quick start guide from the leaflet-js website. Here is my code:

function main(map_div_id, mapbox_access_token) {
    var starting_coordinate = L.latLng(38.004697, 23.800735);
    var starting_zoom = 8;
    var map = L.map(map_div_id);
    map.setView(starting_coordinate, starting_zoom);

    L.tileLayer('https://api.tiles.mapbox.com/v4/mapbox.emerald/1/0/0.png?access_token=' + 
        mapbox_access_token, 
    {
        accessToken: mapbox_access_token
    }).addTo(map);
}

Here is what I see... Also zoom does not work.

enter image description here

Upvotes: 0

Views: 117

Answers (1)

Access Denied
Access Denied

Reputation: 9461

You have broken url with zoom set to to 1, start point to 0,0. Change tileLayer to the following:

L.tileLayer('https://api.tiles.mapbox.com/v4/mapbox.emerald/{z}/{x}/{y}.png?access_token=' + 
        mapbox_access_token, 
    {
        accessToken: mapbox_access_token
    }).addTo(map);

Upvotes: 1

Related Questions