Используем Leaflet JS для географических данных

Итак, задача на сегодня:

  1. Отобразить некий уголок земного шара на карте
  2. Выделить интересную область карты
  3. Пометить ключевые объекты
  4. Добавить описания
  5. Реагировать на зум карты, отображая только нужную информацию

Для всего этого воспользуемся открытыми картами — Open Street Map и библиотекой JavaScript — Leaflet JS.

1. Подключаем Leaflet JS

2. Определяем стили для документа и карты

3. Погнали!

Для OSM существует много вариантов тайлов от разных вендоров, есть официальный Mapnik. Но в качестве сервера тайлов для примера я выбрал MapSurfer, поскольку Mapnik мне не нравится.

Полный код и демо: strangeway-org.github.io/leaflet-js-example/index.htm

Yuriy Artamonov on GithubYuriy Artamonov on LinkedinYuriy Artamonov on Twitter
Yuriy Artamonov
Technical Manager
До последнего времени Юрий принимал активное участие в разработке опенсорс-фреймворка CUBA Platform, специализируясь на архитектуре и фронтенд-технологиях. Преподавал в Самарском университете разработку приложений для мобильных устройств, основы UI/UX и менторил студентов.

В настоящее время работает в компании JetBrains в команде IntelliJ IDEA Ultimate. Когда выдаётся свободное время, пишет статьи и контрибьютит в проекты с открытым исходным кодом. Обожает реализовывать странные идеи с лозунгом: «А почему бы и нет?».