Используем 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

Facebooktwittergoogle_plusredditlinkedin
Yuriy Artamonov on GithubYuriy Artamonov on LinkedinYuriy Artamonov on Twitter
Yuriy Artamonov
Technical Manager
Юрий фанатеет от технологий, программирования и веб-разработки.
Последние несколько лет он занимает позицию ведущего разработчика в команде CUBA Platform и делает существенный вклад в архитектуру этого продукта, специализируясь на фронтенд-технологиях. Кроме того, Юрий обучает студентов факультета информатики Самарского Университета.