3 ms·

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

by 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...