1

I am trying to walk through the Leaflet quick start tutorial and am having a really simple issue: None of my tiles are loading.

I get this error at the image url and an HTTP Bad Request in the inspector:

{"message":"id must be a string with the format account.handle"}

My code is copied and pasted straight from the tutorial:

<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />

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


<body>
    <div id="map"></div>
</body>



<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tiles.mapbox.com/v3/MapID/{z}/{x}/{y}.png', {
    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
}).addTo(map);

</script>

2 Answers 2

1

So I was able to fix the problem by using the code inspector on the Leaflet example

The <script> portion looks like this:

var map = L.map('map').setView([51.505, -0.09], 13);

        L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
            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: 'examples.map-i86knfo3'
        }).addTo(map);

No idea what's triggering the issue, though.

2
  • Does it still work? I'm having the same issue with similar code.
    – Phil Helix
    Commented Sep 19, 2014 at 5:47
  • @Carnotaurus Did you get it to work? Commented Sep 25, 2014 at 2:39
0

When you use mapbox as your tile-source the url for your TileLayer holds your mapid prefixed with your username. For me the mapbox id would be vannut.12345. The id can be found within your mapbox account.

So the url for your tile-layer would then become:

http://{s}.tiles.mapbox.com/v3/vannut.12345/{z}/{x}/{y}.png
                               ^^^^^^^^^^^^

The reason why the other answer is working is because of the {id} variable within the tilelayer's URL.

 https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png
                                 ^^^^

This {id} later on gets substituted by the 'id' variable in the options object:

L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png',{
 maxZoom: 18,
 attribution: '.....',
 id: 'examples.map-i86knfo3'
}).addTo(map);
2
  • Ah. So simple. It's a wonder the version above worked. Commented Jan 17, 2015 at 18:59
  • Actually it's not a wonder ;) See me updated answer.
    – stUrb
    Commented Jan 17, 2015 at 19:01

Your Answer

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

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