Сайт-визитка

от 80 000 рублей

Каталог

от 120 000 рублей

Магазин

от 200 000 рублей

Своя карта для OpenLayers

Иногда нужно добавить на сайт карту, а стандартные варианты  Яндекса и Google по каким-то причинам не подходят. Может быть нужно выполнить ее в фирменных цветах или вывести данные о населенности и о среднегодовой температуре. 

Подготавливаем карту

Создаем карту в редакторе TileMiill. В новом проекте у нас есть чистая карта мира с границами государств, добавляем данные и оформляем их. Не будем останавливаться на этом, масса подробной информации об этом есть на сайте проекта.

Следующий шаг — экспорт полученной карты в формат MBTiles. Выбираем область просмотра и границы зума. С областью просто — можно выбрать всю карту, это состояние по умолчанию, а можно вплоть до района города. Границы зума — это максимальное и минимальное увеличение, чем мельче объект — тем больше значения. Но всегда нужно помнить, что каждый последующий уровень создает в четыре раза больше картинок, чем предыдущий и итоговый размер данных увеличивается соответственно. После всех настроек сохраняем файл и ждем окончание экспорта. 

Теперь нам нужно извлечь тайлы из полученного файла. И для этого есть свой инструмент — mbutil. На выходе получим набор файлов, разложенных по директориям, где каталог первого уровня — уровень зума, второго — столбец для тайла на карте, а в нем уже находится файл с номером, обозночающим порядок в столбце.

Подключаем карту к сайту

На сайте должен быть установлен модуль Openlayers и все требуемые модули и библиотеки. Размещаем наш набор файлов, пусть в нашем случае они хранятся на сервере в /sites/all/libraries/tiles/. Чтобы вывести карту нужно создать новый слой (layer) c настройками (или склонировать один из слоев типа XYZ):

  • Тип слоя: XYZ;
  • Базовый URL /sites/all/libraries/tiles/${z}/${x}/${y}.png;
  • Проекция EPSG:3857;

Полученный слой и будем использовать для карты в качестве основного, теперь фон будет таким, как мы сделали в редакторе.