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