Atlas — чем рисовать карту мира

Пять одинаковых демок на разных библиотеках: слева список стран (258 стран и территорий, с русскими названиями, маленькие — первыми), клик — камера летит к стране и подсвечивает её.

Как сравнивать
  1. Открой любую демку и выбери страну — например Науру или кнопка «Случайная».
  2. Переключай демки ссылками вверху панели: выбранная страна остаётся в адресе (#NRU), так что все пять показывают одно и то же место.
  3. Проверь на телефоне: Cesium и Globe.gl — самые тяжёлые.

Globe.gl three.js

3D-глобус с текстурой планеты, атмосферой и анимированным перелётом. «Вау» из коробки.

  • Эффектно, 30 строк кода — и готово
  • Удобно добавлять точки, дуги, кольца, подписи поверх глобуса
  • Не нужны тайлы и ключи: одна текстура NASA
  • При приближении — размытая текстура, никаких городов и улиц
  • Только WebGL, тянет ~1 МБ three.js
Лицензия MIT · ~1,1 МБ JS · данные: наш GeoJSON
Открыть демо →

MapLibre GL векторные тайлы

Открытый форк Mapbox GL: настоящая карта с улицами и подписями, умеет показываться глобусом и плавно переходить в плоскую карту.

  • Детали до уровня улиц, подписи на разных языках
  • Глобус ↔ Меркатор одной кнопкой, 3D-наклон
  • Стандарт индустрии, активно развивается
  • Нужен источник тайлов (здесь бесплатный OpenFreeMap; для серьёзного трафика — свой или платный)
  • Стилизация через JSON-стиль — порог входа выше
Лицензия BSD-3 · ~0,8 МБ JS · тайлы OpenFreeMap (OSM), без ключа
Открыть демо →

CesiumJS виртуальный глобус

«Google Earth в браузере»: спутниковые снимки, кино-перелёты из космоса, при желании рельеф и 3D-здания.

  • Максимальный реализм — видно реальные острова и города со спутника
  • Умеет рельеф, время суток, 3D-тайлы
  • Тяжёлый: ~4 МБ + воркеры, долго грузится, греет телефон
  • Сложный API, много лишнего для нашей задачи
  • Снимки Esri здесь для демо; для продакшена — Cesium ion (ключ, лимиты) или свой источник
Лицензия Apache-2.0 · ~4 МБ JS · снимки Esri World Imagery
Открыть демо →

D3-geo canvas, свой рендер

Рисуем глобус сами: ортографическая проекция, вектор, никаких внешних сервисов. Можно сделать любой стиль — от атласа XIX века до неона.

  • Полный контроль над внешним видом, уникальный стиль
  • Самый лёгкий и автономный: только наш GeoJSON, работает офлайн
  • Проекция любая (глобус, Робинсон, Меркатор…)
  • Всё руками: перелёты, drag, zoom, подписи (базовое уже написано)
  • Ничего ниже уровня страны: без городов, рек, дорог (можно добавить слои Natural Earth)
Лицензия ISC · ~0,3 МБ JS · данные: наш GeoJSON
Открыть демо →

Leaflet классика 2D

Самая простая и лёгкая карта. Плоская проекция, растровые тайлы, тысячи плагинов.

  • 40 КБ, работает на любом устройстве
  • Проще всего разрабатывать и расширять плагинами
  • Нет глобуса, Меркатор искажает размеры (Гренландия ≈ Африка)
  • Визуально обыденно — ощущения «познания мира» меньше
Лицензия BSD-2 · ~40 КБ JS · тайлы OSM + спутник Esri
Открыть демо →
Globe.glMapLibreCesiumD3-geoLeaflet
3D-глобусдада, переключаемыйдада (вектор)нет
Детали до города/улицнетдада (снимки)нетда
Внешние тайлы/сервисынетдаданетда
Вес библиотеки~1,1 МБ~0,8 МБ~4 МБ~0,3 МБ~40 КБ
Порог входанизкийсреднийвысокийсредний (всё своё)низкий
На телефоненормальнохорошотяжелохорошоотлично
Свобода стилясредняявысокаянизкаяполнаясредняя

Данные: Natural Earth 10m admin-0 (258 объектов, поля NAME_RU, площадь посчитана по сфере — у микрогосударств контуры в Natural Earth утрированы). Пересборка: tools/build-data.sh.