3

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/leaflet@1.0.3/dist/leaflet.css">
  <script src="https://unpkg.com/leaflet@1.0.3/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>

2 Answers 2

2

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

1
  • I figured it out, it turns out I was missing the Style Url from Mapbox, since I was using Mapbox as the map provider in this instance as the example lays out as well.
    – Akin Hwan
    Feb 7, 2017 at 17:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.