CODEWITHSUNDEEP
javascriptpythonmapbox-gl-jsvector-tiles
code0x00
code0x00

Reputation: 673

How to use mapbox vector tiles in a performant way?

I am a bit confused about Mapbox MVT. As I understood, a tile is a little piece of map, as in a jigsaw puzzle.

Not completely sure about the working of MVT.

https://docs.mapbox.com/data/tilesets/guides/vector-tiles-introduction/#benefits-of-vector-tiles

Here, it says Vector tiles are really small, enabling global high resolution maps, fast map loads, and efficient caching.

So the thing is I am trying to get all the coordinates from db which can go up to more than 10K and currently getting the data from postgis using:

    with connection.cursor() as cursor:
        cursor.execute(query)
        rows = cursor.fetchall()
        mvt = bytes(rows[-1][-1])

    return Response(
        mvt, content_type="application/vnd.mapbox-vector-tile", status=200
    )

Now I am wondering about the performance issues, as everytime a user will visit it will put stress on db.

And another problem I am having is when using vector tiles as a source, it calls the source url and (hitting the db) everytime I move the map.

        type: 'vector',
        tiles: [
          'http://url/{z}/{x}/{y}.mvt'
        ]

Is it possible to call the source url at a specific zoom level and until then all the points remains on the map?

for eg.

Mapbox should call source url (only one time from zoom level 1-7) at zoom level 1 and draw points on to the map and when zoom level reach 7 then mapbox should call the source url(only one time from zoom level 7-22) and update the map.

Really be grateful if anyone can help.

Upvotes: 0

Views: 2903

Answers (1)

rbrundritt
rbrundritt

Reputation: 17954

When it comes to tiling data (vector, raster, whatever format), you will almost always want a service that has a caching strategy, especially if the tiles are being created in real time from data in a database. Calling directly into the DB for when every tile is needed should only be done during development/testing, or for simple demos. Vector tiles alone are not the solution, you need an end-to-end architecture for serving the data. Here are a couple of examples of caching strategies:

  • If your data is constantly changing by the second or faster, you often don't need to show the update that quickly on a map. If you have a lot of users a 15 second cache expiry on tiles can drastically reduce the number of times a tile has to be created. Azure Maps does this for their creator platform which is designed to show the near real time sensor readings in a digital twin scenario. It is capable of supporting billions of sensors updating the map every 15 seconds. If you truly need to see updates as they happen, then vector tiles likely isn't the right approach, instead consider using a stream service like SignalR, and limiting the data sent to the map based on bounding box and zoom level.
  • In most applications the data doesn't update that quickly, so a longer cache header can be used.
  • In some cases, the data changes so infrequently (or not at all) that it makes more sense to pre-generate the tiles once, host those, and serve those directly. You would still have a caching strategy so that users aren't constantly requesting the same tiles from your server when they could simply pull it from their browser cache. In this case, it is useful to put the tiles into a MBTile file which is basically a Sqlite DB with a standardized structure. The benifit of putting the tiles in an MBTile file is you only have to move one file around, instead of thousands of tiles (moving this many files creates a ton of IO read/writes that can make deploying extremely slow).

It's also important to note that you should optimize the data in your tiles. For example, if you are working with high resolution polygons, for tiles that are zoomed out, you will likely find there are a lot of coordinates that fit inside the same pixel, so when you request the polygon from the database, reduce its resolution to match the resolution of the tile. This will drastically reduce the size of the tile, and the amount of data the database is outputting.

You can find a lot of tools and articles for vector tiles here: https://github.com/mapbox/awesome-vector-tiles

There are also lots of blogs out there on how to serve vector tiles and create pipelines.

Upvotes: 2

Related Questions