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>
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.

  • Does it still work? I'm having the same issue with similar code. – CarneyCode Sep 19 '14 at 5:47
  • @Carnotaurus Did you get it to work? – Learning stats by example Sep 25 '14 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);
  • Ah. So simple. It's a wonder the version above worked. – Learning stats by example Jan 17 '15 at 18:59
  • Actually it's not a wonder ;) See me updated answer. – stUrb Jan 17 '15 at 19:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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