mbtiles files with leaflet

Question

I am using Tileserver to host my mbtiles file. I am trying to open my mbtile sfile using leaflet in ionic. I am not able to see map. Following is the code that I am using:

leaflet.tileLayer('http://subdomain/styles/klokantech-basic/?vector#{z}/{x}/{y}').addTo(map);

I have also tried to use:

var mb = leaflet.tileLayer.mbTiles('http://subdomain/styles/klokantech-basic/?vector#{z}/{x}/{y}').addTo(this.map);

But I am just able to see grey screen on my device instead of map.

The second method you tried would work for a local mbTiles source, but since you're serving the tiles with a Tileserver you need the first method. Have you verified that the tile server is returning tiles successfully? — peeebeee, Jun 26 '18 at 10:50
Yes, I verified that. I can see the map in browser using tileserver but I cannot see it on leaflet. — Khushali Mehta, Jun 26 '18 at 16:02

score 1 · Answer 1 · answered Dec 10 '18 at 14:24

It sounds like leaflet is loading the tiles from your tile server, but the map you are serving doesn't have data for the location and zoom level you are looking at. Try this script.

Leaflet example:

<script>
    var map = L.map('map').     
    setView([lat, lon], zoom ); 

    //OpenMapTiles
    L.tileLayer('http://subdomain/styles/klokantech-basic/{z}/{x}/{y}.png', {
        //tms: true,
        maxZoom: 20,
        attribution: 'Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

</script>

An alternative is to use Mapbox GL JS, this pushes the rendering to your browser and allows you to use tileserver-gl-light as well:

<script src='http://subdomain/mapbox-gl.js'></script>
<link href='http://subdomain/mapbox-gl.css' rel='stylesheet' />

Mapbox GL JS

var map = new mapboxgl.Map({
        container: 'map',
        style: 'http://subdomain/styles/klokantech-basic/style.json',
        center:  [lon, lat],
        zoom: 7
    });

When creating the mbtiles file, make sure you create it to support the zoom level and location you set, OpenMapTiles defaults to a zoom level of 7, it may needs to be increased for your map, I use 14, which supports a zoom level to 20 for rendering.

mbtiles files with leaflet

1 Answers1