mbtiles files with leaflet - 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.

Answer 1

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 © OpenStreetMap'
}).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.