How does Carto make it possible to interact with elements on their tiles? Can I do the same with Leaflet?

Question

I was looking at this Carto Map. You can click on a building and it shows some extra information about it.

Then I noticed that these buildings weren't added as individual polygons or something like that, but instead are part of generated tiles that has been added to the map. Here is a an example of a single tile.

If you look at the code these tiles have the leaflet-tile class, so it seems like Carto are using Leaflet for adding the tiles to the map.

But how is it possible that there is interaction? I don't think it's possible to interact with PNG files like this, so what is going on?

I have a large dataset of buildings. If I add them to a map using Leaflet the map gets really slow, so I would like to use something like Mapnik to generate the tiles and make things a lot faster. But as far as I know I will then lose interactivity, which is a real shame.

Is there a way to use Leaflet to add tiles rather than features and keep interactivity with the features that are generated onto the tiles?

Answer 1

The magic is called UTFGrid and it was developed by Mapbox. It is basically "an encoding scheme that efficiently encodes interactivity data for map tiles". According to the documentation, for each map tile there is a json storing each pixel values as long strings. Then you can easily retrieve the information when interacting with that map tile pixel.

You can check for yourself in the console:

Builder and CARTO.js maps are rendered using raster (image) tiles. So the tiles are built as sandwiches (basemap + data + style) on the server (backend), and then "painted" on the client/browser (frontend) everytime you pan or zoom and there is no caching involved. Vector rendering, on the other hand, fetches everything and then you can interact, style and so on on the browser. Mapbox (and everything built on top such as CARTO VL or Deck GL/Kepler), Google, OL... all are already using this technology because it produces a faster and smooth experience.