7 ms·

Does anyone know how they make their map so performant? Showing all those pins is mind blowing to me coming from leaflet maps. Marinetraffic is also a map that

Does anyone know how they make their map so performant? Showing all those pins is mind blowing to me coming from leaflet maps. Marinetraffic is also a map that blows me away every time i see all the icons and how smooth and fast the loading is when zooming in. Would love to make a similar map at some point for my hobby but leaflet just does not cut it when you want to render 10million plus pins on a global map. Tech blogs or pointers would be great

noahgolmant 6mo ago
You may want to look into the PMTiles format and tippecanoe. It efficiently produces pyramidal XYZ tile overviews of vector data. Sometimes this is also done server side via the PostGIS asMVT ffunction, or Martin. For client side rendering, deck.gl is quite good, also a newer library called lonboard from DevelopmentSeed.
- coalteddy 6mo ago
  Thanks for those pointers! Very helpful.
jw_cook 6mo ago
Points are rendered server-side, backed by Elasticsearch, and served as PNG tiles for each zoom level. Individual markers are only rendered for small sets. Some of the relevant source code: https://github.com/inaturalist/inaturalist/blob/main/app/assets/javascripts/inaturalist/map3.js.erb https://github.com/inaturalist/inaturalist/blob/main/app/ass... https://github.com/inaturalist/inaturalist/blob/main/app/assets/javascripts/jquery/plugins/inat/taxonmap.js.erb https://github.com/inaturalist/inaturalist/blob/main/app/ass... https://github.com/inaturalist/inaturalist/blob/main/app/assets/javascripts/wax.g.js https://github.com/inaturalist/inaturalist/blob/main/app/ass...
- coalteddy 6mo ago
  Did not realize that they publish their code. Very cool. Thanks!
  - functional_dev 6mo ago
    Looked at their source code out of curiosity. They use Elasticsearch as a geo backend, tile server that renders PNG images server side for each map tile request. - low zoom -> server aggregated grid - high zoom -> switcher to point tiles browser just displays images, there is no work to do on client side.. I generated a visual schematic how these kind of systems work: https://vectree.io/c/server-side-geo-tile-rendering-elasticsearch-aggregations-to-png-tiles https://vectree.io/c/server-side-geo-tile-rendering-elastics...

noahgolmant 6mo ago

You may want to look into the PMTiles format and tippecanoe. It efficiently produces pyramidal XYZ tile overviews of vector data. Sometimes this is also done server side via the PostGIS asMVT ffunction, or Martin. For client side rendering, deck.gl is quite good, also a newer library called lonboard from DevelopmentSeed.

coalteddy 6mo ago
Thanks for those pointers! Very helpful.

jw_cook 6mo ago

Points are rendered server-side, backed by Elasticsearch, and served as PNG tiles for each zoom level. Individual markers are only rendered for small sets. Some of the relevant source code: https://github.com/inaturalist/inaturalist/blob/main/app/assets/javascripts/inaturalist/map3.js.erb https://github.com/inaturalist/inaturalist/blob/main/app/ass... https://github.com/inaturalist/inaturalist/blob/main/app/assets/javascripts/jquery/plugins/inat/taxonmap.js.erb https://github.com/inaturalist/inaturalist/blob/main/app/ass... https://github.com/inaturalist/inaturalist/blob/main/app/assets/javascripts/wax.g.js https://github.com/inaturalist/inaturalist/blob/main/app/ass...

coalteddy 6mo ago
Did not realize that they publish their code. Very cool. Thanks!
- functional_dev 6mo ago
  Looked at their source code out of curiosity. They use Elasticsearch as a geo backend, tile server that renders PNG images server side for each map tile request. - low zoom -> server aggregated grid - high zoom -> switcher to point tiles browser just displays images, there is no work to do on client side.. I generated a visual schematic how these kind of systems work: https://vectree.io/c/server-side-geo-tile-rendering-elasticsearch-aggregations-to-png-tiles https://vectree.io/c/server-side-geo-tile-rendering-elastics...