CODEWITHSUNDEEP
javascripthtmlapileafletmapbox
Akin Hwan
Akin Hwan

Reputation: 627

Leaflet.js Quick Start Basic Example Demo

I am having trouble getting the basic example working locally. All I can see is a gray box with the zoom in/out ui in upper left corner, and the attribution in bottom right corner. There is grey where there should be a map essentially.

My code apart from the api-key I got from Mapbox.

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
  <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>
  <style type='text/css'>
        #mapid {
                height: 180px;
              }

  </style>


</head>
<body>

  <div id="mapid" style="width: 600px; height: 400px; position: relative; outline:none;" class="leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom" tabindex="0">

  </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=MYMAPBOXAPIKEY', {
    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: 'MYMAPBOXAPIKEY'
}).addTo(mymap);

L.marker([40.717192,-74.012042]).addTo(map)
    .bindPopup('The Borough of Manhattan Community College.')
    .openPopup();

</script>
</body>
</html>

Upvotes: 3

Views: 560

Answers (2)

Ebraheem Kashkoush
Ebraheem Kashkoush

Reputation: 101

    map = L.map('map').setView([ 0, 0 ], 2);
 tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
    currentmap = tiles;

                currentmap = L.tileLayer(
                        'http://{s}.tile.stamen.com/terrain/{z}/{x}/{y}.png', {
                            maxZoom : 17
        }).addTo(map);

ihave wrote a project with leaflet there is a many of maps on my js file on line 868 and down look here : https://github.com/VisProj/vis/blob/gh-pages/WebContent/js/heat.js

Upvotes: 1

YaFred
YaFred

Reputation: 10008

I guess you have not created a project named your.mapbox.project.id in your mapbox account.

Try with 'mapbox.streets'

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=MYMAPBOXAPIKEY', {
    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: 'mapbox.streets'
}).addTo(mymap);

Upvotes: 2

Related Questions