CODEWITHSUNDEEP
leaflet
gates
gates

Reputation: 4603

Unable to load leaftlet map

I am following leaftlet js getting started tutorial. But I am unable to load the map. Here is the code I have

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
         <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    </head>

    <style>
        #mapid { height: 180px; }
    </style>

    <script>
    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={accessToken}', {
    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>',
    maxZoom: 18,
    id: 'your.mapbox.project.id',
    accessToken: 'I have put public access token'
        }).addTo(mymap);
    </script>

    <body>

         <div style="margin-top:100px;margin-left:100px;height: 200px;width:200px" id="mapid"></div>
            <div style="height:200px;width:200px;background: red">
            </div>      
    </body>
</html>

In the above code, id: 'your.mapbox.project.id' I am unable to find this. I found only public access token, is this the reason map is not getting loaded .. any help is appreciated

Upvotes: 0

Views: 180

Answers (1)

YaFred
YaFred

Reputation: 10008

To learn leaflet, you can just use the options of the example (check the source)

<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>

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

</script>

Later on, when you are more familiar with leaflet, you can open a mapbox account and learn about what they are adding.

The reason why mapbox is mentioned in the home page of leaflet is because the creator of leaflet is now working for mapbox.

Upvotes: 1

Related Questions