CODEWITHSUNDEEP
javascriptapidc.leaflet.js
sankirtana gv
sankirtana gv

Reputation: 13

how to make access tokens in leaflet.js API

why am i not able to get the map on the canvas how can i access token for an API enter image description here

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=\,initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
   <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
   crossorigin="">
   </script>
   <style>
       #mapid {
     height: 180px;
    }
   </style>
   <title>corona stats</title>
   </head>
   <body>
       <h1>where is ISS?</h1>
       <p>
           latitude:<span id="lat"></span><br/>
           longitude:<span id="lon"></span><br/>
           confirmed:<span id="con"></span>  
       </p>
       <div id="mapid">
       <script>
          var mymap = L.map('mapid').setView([51.505, -0.09], 13);
        
        var marker = L.marker([51.5, -0.09]).addTo(mymap);
        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        accessToken: 'your.mapbox.access.token'
}).addTo(mymap);
        var circle = L.circle([51.508, -0.11], {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5,
        radius: 500
        }).addTo(mymap);
        marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
        circle.bindPopup("I am a circle.");
        polygon.bindPopup("I am a polygon.");
        function onMapClick(e) {
        alert("You clicked the map at " + e.latlng);
        }
        mymap.on('click', onMapClick);
        var popup = L.popup();
        function onMapClick(e) {
        popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(mymap);
        }   
        mymap.on('click', onMapClick); 
       </script>
       </div>
   </body>
</html>
i'm trying for the map to appear on the website but i tried creating the access token but still after using the access token i'm not able to see the map the website showing no map

Upvotes: 1

Views: 1729

Answers (1)

EBS
EBS

Reputation: 1

You have to requist an {accessToken} on the Leaflet.com site. Make a Useraccount. Select Token i menu and you have your first token. Insert the access_token instead of {accessToken} access_token=YOU_NEW_TOKEN by copy/paste. Remark: widtout the {}

Upvotes: 0

Related Questions