Владимир Агафонкин — автор библиотеки leaflet — написал туториал про создание мини-версии библиотеки для отображения географических карт — "A Web Map from Scratch".

Все растровые web-карты работают по похожему принципу. Сначала карта разбивается на тайлы (изображения размера 256x256 пикселей). На нулевом уровне масштаба будет один тайл, на первом — четыре, на втором — 16, а на пятнадцатом — 32768. Потом для заданного уровня масштаба, широты и долготы географической точки выбирается необходимый тайл. Для этого используются формулы вариации проекции Меркатора — Web Mercator projection. Для полученного тайла выбираются несколько соседних тайлов, и затем все они размещаются на странице с помощью абсолютного позиционирования.

Рекомендую посмотреть туториал, если интересно узнать принцип работы растровых версий Google-карт, Яндекс-карт и 2GIS.

#map #tutorial

https://observablehq.com/@mourner/simple-web-map