CODEWITHSUNDEEP
javascriptmappingleaflettilemillmbtiles
Matt Mateo
Matt Mateo

Reputation: 168

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

Upvotes: 0

Views: 942

Answers (1)

RobLabs
RobLabs

Reputation: 2347

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

Upvotes: 1

Related Questions