top | item 45126586

How to build vector tiles from scratch

112 points| ajd555 | 5 months ago |debuisne.com

33 comments

order

stevage|5 months ago

>The spec refers to 4096 tile sizes, but MapLibre seems to use 512 pixels,

I think OP is maybe confusing two different things. The 4096 is, IIRC, not "pixels" but rather "units of precision". They are saying that within a vector tile, the far left is 0, the far right is 4095, with 4096 discrete distance values between.

The 512 is about the portion of the map that is occupied by a vector tile, in "pixels". So if you have a vector tile with 4096 units of precision crammed into 512 pixels, that means you actually get a bit of sub-pixel precision, which is really helpful when you overzoom - you can stretch that same vector tile out over to a bigger and bigger area as you zoom in.

This matters because generally you generate vector tiles to some finite depth (eg, zoom 13) but then you want to be able to display them through to say zoom 17, which means the tile is going to be stretched 4 more zoom depths, so 2^4 (16) times wider/higher.

ajd555|5 months ago

Ah, I was missing that bit of information, and it explains why I was seeing these two values. Thank you stevage, I'll update the post with this info and cite you.

ajd555|5 months ago

Hi HN! This is my first blog, inspired by many posts read here. I attempt to explain how Vector Tiles in GIS tools are constructed from scratch, and how easy it is. This also sets up future blog posts about MapLibre tiles as well as some tricks in the backend to pre-generate the MVT files to serve them up quickly, and update tiles for real time updates on a map. I'll be happy to answer any questions or feedback!

stevage|5 months ago

I'm not entirely clear on why you had to go all the way to "from scratch". Are there really no libraries in Go that can generate tiles more conveniently?

(I've been basically a full time freelance Mapbox consultant for the last 7 years. When I'm generating tiles, it's either statically (tippecanoe), through PostGIS, or occasionally using a JavaScript library. Never had to get my hands quite as dirty as you here...)

It is a real shame that Mapbox GL JS doesn't support GeoJSON vector tiles, which makes a lot of this stuff easier. Yes, they're not as compact as PBF, but for ease of development, debuggability etc, they're a great step along the way and flatten the learning curve. (From memory, OpenLayers does support them...)

Also curious whether you looked at https://docs.protomaps.com/pmtiles/

jjgreen|5 months ago

Interesting read, thanks

aaa_2006|5 months ago

Very cool project. One option worth exploring is FlatGeobuf. It provides fast, indexed storage for large GeoJSON datasets and makes it easy to stream only the features you need per tile. It can slot neatly into a vector tile pipeline and improve both batch and real time generation.

sfblah|5 months ago

I built a system like this to create vector tiles for mapbox at a side-job I had a few years back. Unfortunately my boss couldn't understand what I was doing and instead wanted us to run a SQL query on the database every time the map was moved, and just buy an extra-large instance for the load. I tried to explain it to him but to no avail. I finally just quit. He wasn't a dumb guy either.

Point being: If you're doing GIS stuff on a website, it's worth making sure you have folks who actually can understand these underlying technologies.

snickerdoodle12|5 months ago

If you need a backend anyway I like using postgis ST_AsMVT and caching the result. So pretty much running a sql query on the database every time the map is moved and then caching it. Super easy to maintain, don't have to pregenerate anything. Just bust the cache when necessary.

ajd555|5 months ago

So running a SQL query and returning GeoJSON? Sorry that didn't work - hopefully you can work on another system like this soon, with someone who actually understands the benefits of tiles!

Bedon292|5 months ago

I commend you for actually digging into it and trying to understand the format. I have used them plenty but hadn't really dug into their internals. As you are adding more data layers, it may be worth looking at Geoserver [1]. You can load the data in and let it handle the tile generation and caching. Even if you don't use it, the Vector Tiles extension [2] may be a useful reference for implementing it.

[1] https://geoserver.org/

[2] https://github.com/geoserver/geoserver/tree/main/src/extensi...

ajd555|5 months ago

Thank you! I'll take a look, this looks great

e1gen-v|5 months ago

I actually did this at work! Set up a fast api with a tile server endpoint and it wasn’t as bad as I thought it would be.

ajd555|5 months ago

Awesome, good job! Did you implement likes and polygons too?

J_Sherz|5 months ago

This is cool - is there any data you can aggregate on waterways traffic / the ferry system?

ajd555|5 months ago

I've found some waterways traffic data, but it seems to be previous day usage data, and not real-time usage or position. I'll dig to see if there is some info, as that would add some value to the dashboard for sure!