javascriptmappingleaflettilemillmbtiles

Tiles generated from mbutil does not render using leafletjs


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: enter image description here

As I examine the file, it did not match. enter image description here

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

Solution

  • A couple of things to try

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