maptiler / tileserver-gl

Vector and raster maps with GL styles. Server side rendering by MapLibre GL Native. Map tile server for MapLibre GL JS, Android, iOS, Leaflet, OpenLayers, GIS via WMTS, etc.
https://tileserver.readthedocs.io/en/latest/
Other
2.19k stars 632 forks source link

Serving pbf as a tilelayer / data-driven style capability #133

Open rmrice opened 7 years ago

rmrice commented 7 years ago

Hey guys,

I would like to call the vector layer as a styled tilelayer rather than .png. Based on the vector preview I would assume the url is this:

http://{tileserver_url}:8080/data/{data_id}/{x}/{y}/{z}.pbf?style={style_id}

However I'm getting Out of bounds errors in dev console.

I'm trying to add this as a leaflet tilelayer overlay, btw. I tried adding bounds to the L.tileLayer call but it didn't help. I'm still getting x/y values that are huge.

The xyz.png url works just fine, but my style is data-driven (with stops based on property) and is not rendering as I would like :disappointed:

Is this possible or am I trying to do something that is unsupported?

An alternative to this would be to serve the xyz.png tilelayer with the same styling capabilities as the vector tilelayer (data-driven-styles). I'm pretty sure this is a limitation of the current release of mapbox-gl-native. Am I on the right track here or no?

Any insight to my problem is very appreciated. Thanks in advance!

DaxServer commented 7 years ago

Hi @rmrice,

It's {z}/{x}/{y}.pbf 😄

petrsloup commented 7 years ago

Yes, @SrihariThalla is right.

@rmrice Does this solve your problem?

rmrice commented 7 years ago

thanks, @SrihariThalla, that makes a lot more sense.

Unfortunately, it didn't solve my problem. I'm still getting 404 errors and crazy x/y values ( like 14/4474/6710).

petrsloup commented 7 years ago

That seems like a perfectly valid value and contains something like this:

image

Are you sure you are using correct mbtiles data (the data actually contain this area) ?

rmrice commented 7 years ago

@petrsloup yes, you're right.

I'm working with a global data source (bounds [-180,-85.0511,180,85.0511]) and trying to add my tilelayer like this:

L.tileLayer('http://{tileserverurl}:8080/data/{dataid}/{z}/{x}/{y}.pbf?style={styleid}');

This url works but like I said before, my data-driven style doesn't render as expected:

http://{tileserverurl}:8080/styles/{styleid}/rendered/{z}/{x}/{y}.png

Any insight?

petrsloup commented 7 years ago

Maybe this could help: https://openmaptiles.org/docs/website/leaflet/

petrsloup commented 7 years ago

BTW the ?style= parameter on pbf vector tiles is not needed and is actually ignore at the moment (it was reserved for future use and will be removed soon)