Конструктор карт 2гис как пользоваться
Обновлено: 01.05.2024
Недавно передо мной встала интересная задача — отображать на сайте карту, с различными объектами, причем этих объектов могут быть десятки и сотни, а управлять ими должен уметь любой менеджер ниже среднего звена.
Более формально задача сводилась к тому, чтобы дать возможность пользователям задавать некий список гео-объектов, дать им возможность легко и быстро этими объектами управлять и автоматически отображать эти объекты на некоей карте.
Для реализации задумки была выбрана связка Google Docs и API картографического сервиса 2ГИС. Решение получилось действительно простым, в духе знаменитых «30 строк» :)
Шаг 1. Заводим таблицу для данных.
Открываем Google Docs и создаем таблицу. В моей таблице было достаточно много ненужных мне, но очень нужных для прочих служб полей, поэтому я пойду на небольшую хитрость и для тестирования заведу отдельную.
В качестве тестовых данных я взял адреса домов, относящихся к двум небольшим избирательным участкам в городе Костроме. Номер участка, улица, номер дома и число квартир.
Использование в качестве источника данных Google Drive снимает множество проблем с совместной работой специалистов разной степени подготовки и с оперативным обновлением данных.
Теперь таблицу нужно опубликовать. Для этого идем в меню «Файл — Опубликовать в интернете». В появившемся окне выбираем «Начать публикацию», в нижней части — выбираем «CSV (значения, разделенные запятыми)» и получаем ссылку на наш лист таблицы в виде CSV.
Шаг 2. Готовим данные для карты.
Напишем несложный скрипт на PHP и назовем его getMapData.php:
Разумеется, массив $points нужно куда-то закешировать, чтобы не «дергать» Google Docs при каждой отрисовке карты.
Вот простейший код для работы с API геокодера:
Ну и наконец пробежимся по массиву $points нашим «геокодером» и выведем результат в формате JSON:
Обратите внимание на странную строчку sleep(1); в коде. Дело в том, что я пользуюсь тестовым доступом к API 2GIS, а при нем частота запросов ограничена одним в секунду. После получения полного доступа эту строчку нужно, разумеется, убрать.
Ну и не забываем опять же кэшировать полученные данные, чтобы не создавать 2ГИС лишнюю нагрузку, а себе — лишнее время работы скрипта.
Шаг 3. Показываем карту.
На этом, собственно, всё. Мы получили простейшую, но вполне функциональную систему, которая показывает на карте объекты согласно списку, ведущемуся в Google Docs. Вот такой mash-up :)
Ссылку на получившуюся карту не даю, потому что опасаюсь за сервер, который легко может лечь под хабраэффектом. Но картинку не могу не вставить:
Собственно, ничто не мешает сделать такой же «трюк» с картами, например, от Яндекса. Получится даже красивее, за счет множества встроенных стилей и технологии кластеризации маркеров на карте. Изначально я пошел именно этим путем, но тесты показали, что геокодер 2ГИС все-таки гораздо точнее. Яндекс справляется с получением координат примерно от 95% адресов при условии их тщательной подготовки, 2ГИС — почти все 100%.
Конструктор карт — бесплатный инструмент для компаний, журналистов и блогеров. Помогает создавать карты со своей разметкой: точками, маршрутами, выделенными областями. Такие карты можно добавить на любой сайт.
Что есть в конструкторе
Отметки. Указывают на конкретное место, адрес или компанию. Расставляйте точки вручную или привязывайте к конкретному адресу. Чтобы привязать точку к адресу, введите улицу и дом, название организации или объекта в поисковой строке.
Линии. Пригодятся, чтобы показать маршрут забега, перекрытые улицы, дорогу от остановки до офиса.
Фигуры: квадраты, круги, многоугольники. Помогают выделить на карте небольшой участок или целый район.
Как добавить объекты на карту
Выберите отметку, линию или фигуру и поместите её в нужное место.
Цвет, толщина линии и другие свойства фигур настраиваются в левой панели.
Точкам, линиям и фигурам можно добавить описание — пользователи увидят его, когда кликнут на объект. Если знаете разметку Markdown и HTML, вставляйте в описания картинки.
Отметкам можно добавить подпись, которую всегда видно на карте.
Все отметки, линии и фигуры, которые вы нанесёте на карту, появятся в левой панели. Нажмите на объект в списке, чтобы выделить его на карте. И наоборот: выберите объект на карте, чтобы выделить в списке.
Если добавить объекту описание, оно появится в списке. Так проще отличить одну точку или фигуру от другой.
Площадные объекты могут накладываться друг на друга. Если кликнете по смежной области, то выберете тот объект, который находится на более высоком слое. Чтобы изменить приоритет объектов, перемещайте их в списке вверх и вниз.
Чтобы удалить объект, найдите его в списке и нажмите на крестик.
Как настроить размер карты
Ширина и высота карты настраиваются на верхней панели. Высоту всегда указывают в пикселях. Ширину можно выбрать по размеру экрана.
Как добавить карту на свой сайт
Нажмите на кнопку «Получить код» под картой, скопируйте код и вставьте на свою страничку. Если у сайта есть админка, которая поддерживает HTML, можно сделать это через неё. Если админки нет, добавьте карту прямо в код сайта.
В разделе «Быстрый старт» вы уже могли попробовать создать карту. Здесь же рассмотрен этот процесс в деталях. А также освещены вопросы настройки параметров карты.
Загрузка библиотеки
Работа с картой возможна только после того, как будет загружена библиотека. Есть несколько способов это сделать. Начнем с простого.
Первый способ
Сперва подключаем код библиотеки:
Затем воспользуемся функцией DG.autoload , в которую помещаем код инициализации карты:
Именно такой способ рассматривался в разделе «Быстрый старт». Внутри себя эта функция добавляет обработчик на событие загрузки страницы.
Второй способ
Если первый способ не подходит, можно воспользоваться функцией DG.load . Ее можно вызвать именно в тот момент, когда карта станет нужна, а не только при загрузки страницы.
Плюс, если на странице подключена библиотека jQuery (для определенности), можно ускорить загрузку карты, если вызывать DG.load с помощью метода JQuery.ready :
Правда, в случае использования DG.load нужно изменить способ загрузки библиотеки — добавить GET-параметр loadByRequire :
Это необходимо для того, чтобы избежать повторной загрузки библиотеки.
Версия библиотеки
Версия библиотеки состоит из двух чисел, разделенных точкой. Например, 1.7.
Первая цифра увеличивается при радикальном изменении API. Вторая - при нарушении обратной совместимости со старыми версиями.
Для подключения конкретной версии библиотеки ее следует указать при подключении. Например:
Указывать версию библиотеки обязательно.
Инициализация карты
Пусть у нас есть контейнерный HTML-элемент, внутри которого будет показываться карта:
Во время создания экземпляра карты нужно связать его с контейнерным HTML-элементом. Первый способ это сделать — передать в конструктор карты идентификатор элемента. В нашем случае:
Второй способ, более сложный, — передать в конструктор карты DOMElement:
Первоначальная настройка карты
Центр карты
Теперь нужно установить центр карты. Задать местоположение карты можно создав объект DG.GeoPoint , конструктор которого принимает долготу и широту точки соответственно.
Пример для Новосибирска (долгота: ~82.97, широта: ~55.02):
Чтобы установить центр карты вызываем метод карты setCenter :
Или одной строчкой:
Также существует возможность задать коэффициент масштабирования, при установке центра карты. Для этого, при вызове метода устанавливающего центр карты, необходимо вторым параметром указать новое значение масштаба:
Масштаб (zoom)
Установить масштаб карты можно с помощью метода карты setZoom :
Что означает коэффициент масштабирования, который мы передаем этому методу? Это целое число в интервале от 1-го до максимально допустимого уровня зума. Максимально допустимый уровень зума зависит от города, отображаемого на карте. Вне городов, покрытых 2ГИС, максимальный уровень зума составляет 13. Для большинства городов России максимальный уровень зума равен 17. Чем больше число, тем ближе мы приближаемся к поверхности. Для корректного рассчета максимально допустимого уровня зума, необходимо предварительно установить центр карты.
Управление масштабом
Чтобы добавить привычный нам всем ползунок для управления коэффициентом масштабирования, выполним следующие действия:
В разделе руководства «Элементы управления» мы подробно рассмотрим вопрос работы элементов.
Кнопка разворачивания карты на весь экран браузера
В API карт встроен стандартный элемент управления разворачиванием карты на весь экран браузера, который по умолчанию включен. Используя данный элемент управления в правом верхнем углу карты появится кнопка. При клике по этой кнопке карта разворачивается на весь экран браузера. Повторный клик восстанавливает предыдущий размер карты.
Данный элемент управления создаётся автоматически при инициализации карты и не должен создаваться вручную. Доступ к элементу управления можно получить через свойство объекта карты fullscreen, например: myMap.fullscreen .
Ниже мы рассмотрим несколько примеров.
Для наглядности предположим, что myMap — объект карты.
Включение кнопки разворачивания карты на весь экран браузера:
Отключение кнопки разворачивания карты на весь экран браузера:
Геокодирование по клику
В API карт встроена функция геокодирования, которая по умолчанию включена. Используя данную функцию, при кликах мышки по карте будет появляться балун с информацией об объекте, а периметр объекта будет подсвечиваться (периметры домов не подсвечиваются). Дополнительно можно изменить стилистику подсветки периметра объекта.
За обработку геокодированиея по клику отвечает класс геокликера. Данный класс создаётся автоматически при инициализации карты и не должен создаваться вручную. Доступ к классу можно получить через свойство объекта карты geoclicker, например: myMap.geoclicker .
Ниже мы рассмотрим несколько примеров.
Для наглядности предположим, что myMap — объект карты.
Включение функции геокодирования:
Отключение функции геокодирования:
Стилизация подсвечиваемой области:
В результате выполнения кода из этого примера подсвечиваемая область будет закрашена полупрозрачным фиолетовым фоном, а границы будут синего цвета.
Получение текущего стиля подсвечиваемой области:
Класс карты DG.Map
Для наглядности допустим, что myMap — объект карты.
Конструктор
| Имя | Тип | Обязательный | Описание |
|---|---|---|---|
| div | String | DOMElement | Да | Карта размещается внутри контейнерного HTML-элемента, внутри которого будет показываться карта. Параметр может принимать либо идентификатор карты, либо сам DOM-элемент. |
Свойства
Менеджер маркеров
| Тип | Описание |
|---|---|
| DG.Markers | Менеджер маркеров. Экземпляр класса DG.Markers . |
Менеджер балунов
| Тип | Описание |
|---|---|
| DG.Balloons | Менеджер балунов. Экземпляр класса DG.Balloons . |
Менеджер геометрий
| Тип | Описание |
|---|---|
| DG.Geometries | Менеджер геометрий. Экземпляр класса DG.Geometries . |
Менеджер элементов управления
| Тип | Описание |
|---|---|
| DG.Controls | Менеджер элементов управления. Экземпляр класса DG.Controls . |
Преобразователь координат
| Тип | Описание |
|---|---|
| DG.Converter | Преобразователь координат. Экземпляр класса DG.Converter . |
Методы
Удалить карту
Уничтожает все объекты, которые содержит карта. Чтобы уничтожить сам объект myMap после вызова данного метода рекомендуется присвоить null объекту карты:
Добавить обработчик события
Функция-обработчик, вызываемая при возникновении события определенного типа. Функция вызывается с одним параметром callback(myEvent) .
Параметр myEvent может быть объектом различных классов. Соответствия между типом события и классом события myEvent перечислены в таблице «Тип события — Класс — Условие».
Если на события одного типа назначено несколько функций-обработчиков путем нескольких вызовов myMap.addEventListener , то они вызываются в порядке добавления. При этом, если одна из функций-обработчиков вернет true , то остальные функции-обработчики дальше выполняться не будут.
| Тип | Описание |
|---|---|
| DG.Observer | Объект с помощью которого, можно управлять обработчиком. |
Все особенности работы с событиями рассмотрены в разделе документации «События».
Таблица «Тип события — Класс — Условие»:
Отключить возможность изменения масштаба карты по двойному клику мыши
Включить возможность изменения масштаба карты по двойному клику мыши
Проверить включена ли возможность изменения масштаба карты по двойному клику мыши
| Тип | Описание |
|---|---|
| Boolean | Включена ли возможность изменения масштаба карты по двойному клику мыши |
Отключить возможность изменения масштаба карты при прокрутке колесика мыши
Включить возможность изменения масштаба карты при прокрутке колесика мыши
Проверить включена ли возможность изменения масштаба карты при прокрутке колесика мыши
| Тип | Описание |
|---|---|
| Boolean | Включена ли возможность изменения масштаба карты при прокрутке колесика мыши. |
Отключить возможность перетаскивания карты с помощью мыши
Включить возможность перетаскивания карты с помощью мыши
Проверить включена ли возможность перетаскивания карты с помощью мыши
| Тип | Описание |
|---|---|
| Boolean | Включена ли возможность перетаскивания карты с помощью мыши |
Отключить возможность выделения области карты правой кнопкой
Включить возможность выделения области карты правой кнопкой
Проверить включена ли возможность выделения области карты правой кнопкой
| Тип | Описание |
|---|---|
| Boolean | Включена ли возможность выделения области карты правой кнопкой мыши |
Получить контейнер карты
| Тип | Описание |
|---|---|
| DOMElement | Контейнерный DOM-элемент, в котором размещается карта. |
Получить размер контейнера карты
| Тип | Описание |
|---|---|
| DG.Size | Объект DG.Size , соответствующий размеру контейнерного DOM-элементу, в котором размещается карта. |
Получить идентификатор контейнера карты
| Тип | Описание |
|---|---|
| String | Свойство «id» контейнерного DOM-элемента, в котором размещается карта. |
Перерисовать карту
Необходимо вызывать каждый раз при программном изменении размера карты или ее положения на странице.
Переместить карту на север
| Имя | Тип | Обязательный | Описание |
|---|---|---|---|
| moveStep | Number | Да | Шаг, на сколько пикселей сместить карту на север. |
Переместить карту на юг
| Имя | Тип | Обязательный | Описание |
|---|---|---|---|
| moveStep | Number | Да | Шаг, на сколько пикселей сместить карту на юг. |
Переместить карту на запад
| Имя | Тип | Обязательный | Описание |
|---|---|---|---|
| moveStep | Number | Да | Шаг, на сколько пикселей сместить карту на запад. |
Переместить карту на восток
| Имя | Тип | Обязательный | Описание |
|---|---|---|---|
| moveStep | Number | Да | Шаг, на сколько пикселей сместить карту на восток. |
Получить максимальный zoom
| Тип | Описание |
|---|---|
| Number | Максимально возможный коэффициент масштабирования (zoom). |
Получить минимальный zoom
| Тип | Описание |
|---|---|
| Number | Минимально возможный коэффициент масштабирования (zoom). |
Получить текущий zoom
| Тип | Описание |
|---|---|
| Number | Текущий коэффициент масштабирования (zoom). |
Установить максимальный zoom
| Имя | Тип | Обязательный | Описание |
|---|---|---|---|
| maxZoom | Number | Да | Максимально возможный коэффициент масштабирования(zoom). Максимальное допустимое значение: 18. |
Установить минимальный zoom
| Имя | Тип | Обязательный | Описание |
|---|---|---|---|
| minZoom | Number | Да | Минимально возможный коэффициент масштабирования(zoom). Минимальное допустимое значение: 1. |
Установить текущий zoom
| Имя | Тип | Обязательный | Описание |
|---|---|---|---|
| zoom | Number | Да | Текущий коэффициент масштабирования (zoom). |
Увеличить zoom на один уровень
Уменьшить zoom на один уровень
Изменить zoom на заданную величину
| Имя | Тип | Обязательный | Описание |
|---|---|---|---|
| zoomDiff | Number | Да | Изменяет коэффициент масштабирования(zoom) на определенную величину. Если параметр положительный, увеличиаем zoom , иначе — уменьшаем. |
Получить текущий центр карты
| Тип | Описание |
|---|---|
| DG.GeoPoint | Географическое положение центра карты. |
Установить центр карты
| Имя | Тип | Обязательный | Описание |
|---|---|---|---|
| center | DG.GeoPoint | Да | Географическое положение центра карты. |
| zoomLevel | Number | Нет | Коэффициент масштабирования карты (zoom). |
Получить видимые границы карты
| Тип | Описание |
|---|---|
| DG.Bounds | Объект DG.Bounds , соответствующий видимым границам карты. |
Установить видимые границы карты
| Имя | Тип | Обязательный | Описание |
|---|---|---|---|
| bounds | DG.Bounds | Да | Объект DG.Bounds , соответствующий видимым границам карты. |
При выполнении данного метода коэффициент масштабирования и центр карты будет автоматически установлен в такие значения, чтобы охватить заданные границы.
Установить ограничения на границы карты
Изменять ли видимые границы карты, чтобы они соответствовали ограничениям bounds . Если isChangePosition не указан или равен false , то видимые границы не меняются, и пользователь останется в том же положении на карте. Если isChangePosition равен true , видимые границы карты меняются, чтобы вписать заданный bounds .
Так же следует учесть, что если заданное ограничение bounds меньше, чем максимальное, полностью видимое в данных границах карты, то уровень масштабирования меняется, чтобы вписать его оптимальным образом.
Установить курсор
Позволяет добавлять один и больше курсоров на карту. Последний добавленный делается активным.
| Имя | Тип | Обязательный | Описание |
|---|---|---|---|
| cursorType | String | Да | Одна из констант класса DG.Cursor |
Удалить курсор
Удаляет курсор из карты. Если курсор был активным, то устанавливает предыдущий активным.
| Имя | Тип | Обязательный | Описание |
|---|---|---|---|
| cursorType | String | Да | Одна из констант класса DG.Cursor |
Также существует возможность задать коэффициент масштабирования при установке центра карты. Для этого при вызове метода устанавливающего центр карты необходимо вторым параметром указать новое значение масштаба.
Преимущество карт в том, что они наглядны, а с помощью интерактивных сервисов ещё и многофункциональны. С помощью карт можно измерить расстояние, оценить масштаб, увидеть внешний вид, узнать информацию о реальном объекте, определить местоположение.
2GIS — простой конструктор для создания интерактивных карт
Российский конструктор карт 2GIS помогает создавать интерактивные карты, на которых отмечать точки, маршруты и выделять области. Карту можно добавить на любой сайт.
Как создать простую анимированную карту: сервис Mult.dev
Анимированную карту хорошо использовать, когда надо показать длительное путешествие, охватывающее несколько городов (или стран). Такой формат будет хорошо смотреться и на сайте, и в соцсетях.
Как создать интерактивную карту хороплет: сервис Datawrapper
Раскрасить регионы на карте — создать фоновую картограмму или хороплет — позволяет сервис Datawrapper. Это бесплатно.
Как бесплатно сделать интерактивную карту: сервис Interacty
Рассказываем, как с помощью бесплатного редактора расставить точки на интерактивной карте (или любой картинке), подписать все объекты и встроить ее к себе на сайт.
Как в пару кликов нанести на интерактивную карту сто и более адресов
Для этого вам потребуется иметь аккаунт в Google и заранее подготовить файл в Excel.
Как создать интерактивную карту в конструкторе Яндекс Карты
Два клика и ни строчки кода. Онлайн-картография для новичков
Как создать интерактивную карту в Carto
Визуализируй как известные медиа мира. При анализе большого объема геоданных, создании многослойных карт можно воспользоваться онлайн-инструментом Carto.
Как создать интерактивную карту в сервисе Storymap
Если нужно создать простую, наглядную, адаптированную к мобильным устройствам карту с небольшим количеством точек-маркеров
Как визуализировать большое количество данных: открытая платформа Ушахиди
Сервис работает с информацией из различных источников: SMS, MMS, блоги, Twitter, принимает фото, видео и другие данные из сети
Как создать интерактивную карту с сервисами ESRI
Ключевое слово, которое объединяет все сервисы сторимэп — история. А истории, как известно, можно рассказывать по-разному
Как сделать интерактивную карту: обзор сервисов
Преимущество карт в том, что они наглядны, а с помощью интерактивных сервисов ещё и многофункциональны
Еженедельная рассылка для мультимедийных авторов
Не хватает времени сёрфить по профессиональным сайтам? Подпишитесь на нашу email-рассылку, и каждую неделю вы будете получать полезные статьи, анонсы, интервью, презентации, видеоролики, переводы, инфографику.
Два базовых и самых популярных сервиса — Google Maps и Яндекс.Карты . Они довольно простые, но их функционала будет достаточно для краткого описания маршрута, иллюстрации местоположения или расстояния, а также демонстрации дорожной ситуации.
Вы можете собрать собственную карту, изменив дизайн, добавив слои, метки и изображения. Интерактивные карты Гугла и Яндекса можно использовать на своём сайте или в приложении.
У Google есть сервис Wikimapia . Это карты совмещённые с Википедией, где каждый объект кликабелен, имеет фото и краткое описание.
Подобный ресурс есть у Яндекса — Народная карта . Там пользователи сами сами наносят и описывают объекты.
Отдельным приложением Google предлагает интерактивную модель мира — Google Earth . На ней отлично видны рельеф и реальные размеры объектов. Многие крупные города воссозданы с помощью 3D-зданий. У «Планеты Земля» масса графических слоёв для изучения, а также карты Марса, Луны и всего звёздного неба.
Вы и сами можете отрисовать объекты, которых ещё нет. Для этого ознакомьтесь с Руководством по 3D-моделированию . Хотя Google Earth работает как отдельное приложение, которое нельзя просто взять и вставить в свой проект, его можно использовать, к примеру, для съёмки 3D-туров. Google Планета Земля Pro предлагает ещё и бизнес-инструменты.
1. OpenStreetMap . У неё есть несколько слоёв на выбор, среди которых, например, карта для велосипедистов. Можно отдельно выгружать города и континенты. Узнайте, как экспортировать данные OpenStreetMap .
2. 2ГИС специализируется на точных данных об организациях, которые можно найти на карте. Изучите инструкцию , чтобы узнать как можно использовать виджет 2GIS на своём сайте. Если вы хотите заявить о себе через данный сервис, попробуйте 2ГИС для бизнеса с набором инструментов для продвижения. Полезная функция: можно встроить карту, которая покажет в указанном регионе заведения, отсортированные по категориям.
3. ZeeMaps предлагает инструменты для добавления больших объёмов информации и её анализа на карте. Посмотрите эти видео-инструкции , чтобы понять, как кастомизировать карту и добавить на неё новые слои и элементы.
4. Огромное количество инструментов для визуализации данных есть у ArcGIS . Они рассчитаны в первую очередь на профессионалов, поэтому имеют только платную подписку. Зато возможности для аналитики данных и разработки новых интерактивных карт практически безграничны.
5. CartoDB тоже имеет богатый набор инструментов для визуализации данных. В галерее видно , что карты получаются очень динамичными и информативными. Научиться делать такие можно здесь .
6. Scribble Maps отличает возможность выгружать карты в самых разных форматах.
7. Сервис, который позволяет создавать из карт целые истории — StoryMap JS . Составьте маршрут и добавьте текст, фото или видео к каждой точке на карте. К примеру, в этом проекте можно узнать, как двигался олимпийский факел во время сочинской эстафеты.
Можно использовать свои карты или фотографии, загрузив их в формате изображения и расставив на них точки с описаниями. Удобная функция StoryMap JS: сервис может автоматически собрать карту из 20 последних фотографий в Instagram. Вам останется лишь отредактировать её, если необходимо.
8. Похожей функцией может похвастаться Tripline . Помимо Инстаграма, он интегрируется с Foursquare, Flickr, Twitter, Facebook и другими сервисами.
9. Историческая карта от GeaCron может пригодиться для проекта по истории.
10 и 11. Если вы рассказываете о погоде, то смело встраивайте Windyty — красивый погодный глобус с неплохим набором инструментов. Для профессионалов отрасли есть также Planet OS .
Читайте также: