Tiles generated from mbutil does not render using leafletjs

Question

First I created a map using TileMill then export it as ".mbtiles" then using mbutil I generated tiles(.png) of that file.

Now, I want to use those tiles using leafletjs but it returns an error:

As I examine the file, it did not match.

What could be the wrong here?

Here's my code:

var map = L.map('map').setView([7.038218,9.017317], 13);
L.tileLayer(
    'cbr90013/{z}/{x}/{y}.png', {
        minZoom: 13,
        maxZoom: 19,
        attribution: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

Answer 1

A couple of things to try

• Check your coordinates in setView(), they should be LatLong.

• In the output folder after calling mbutil, you should have a file called metadata.json which may be useful. Check if it lists the scheme (either xyz or tms). That will tell you the Y direction of the tiles

• You can also use this Maptiler.com tool to give you a visual on where the missing tiles show up on a Google Map.

• From the Leafletjs.com documentation, you may have to add the tms property. The default is false, and since you don't have it, you can add it and set it to true.

Your LatLng coordinates did not match your missing tiles (e.g., 13/4979/6931.png), so there may be a mismatch there, too.

---

var map = L.map('map').setView([7.038218,9.017317], 13);
L.tileLayer(
        'cbr90013/{z}/{x}/{y}.png', {
        tms: true
        minZoom: 13,
        maxZoom: 19,
        attribution: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);