CODEWITHSUNDEEP
leafletgisopenstreetmapoffline
prakash r
prakash r

Reputation: 113

How to use localhost TileServer GL in leaflet map in L.tileLayer?

I am trying to make offline maps using leaflet and Tileserver Gl

Im trying to load Tileserver Gl tiles[Which is hosted in my Local system of an particular region which is Sri Lanka] in my application where in have used Leaflet to plot map. But tiles are not loading and i'm not able to figure it out. Will add the code which is used to plot my map

Locally hosted my tiles using following code

npm install -g tileserver-gl-light
tileserver-gl-light sri_lanka.mbtiles

Online Working Map-

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

Offline Map

Which is not loading the tiles

L.tileLayer('http://localhost:8080/data/v3/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

Info : Im bit new to leaflet and programming, Im struck in this for past 2 days
Thanx in advance!

Upvotes: 3

Views: 6994

Answers (1)

chrki
chrki

Reputation: 6333

The /data/v3 endpoint of TileServer GL Light does not serve PNG image tiles but vector tiles in the Protobuf (pbf) format.

For Leaflet you will have to use a plugin, some are listed in the Leaflet Documentation. Some more suggestions and sample code can be found on this GIS Stackexchange question: How to load a vector tile layer in a Leaflet map?.

Only the "non-light" TileServer GL has "rendered tiles". If you are using that you can access tiles using one of the following URLs (with the standard styles provided):

http://localhost:8080/styles/klokantech-basic/{z}/{x}/{y}.png
http://localhost:8080/styles/osm-bright/{z}/{x}/{y}.png

You'll also find these on http://localhost:8080/ after you have started TileServer GL.

Upvotes: 10

Related Questions