Как создать интерактивные карты. 2GIS

Российский конструктор карт 2GIS помогает создавать интерактивные карты, на которых отмечать точки, маршруты и выделять области. Карту можно добавить на любой сайт.

МОЖНО СДЕЛАТЬ
ИСПОЛЬЗУЕТСЯ В:

В базе конструктора интерактивных карт 2GIS около 170 населенных пунктов: городов, регионов (например, республика Алтай). Другие города по поиску не находятся. Но на карте некоторые присутствует, чтобы добавить в такой населенный пункт отметку или выделить на ней область, придется приближать вручную.

Конструктор карт 2GIS простой в использовании и бесплатный, чтобы им воспользоваться, регистрация не нужна. Он позволяет добавлять на карту:

• отметки — чтобы указать на конкретное место или адрес,
• линии — чтобы показать маршрут забега, перекрытые улицы, дорогу от точки А до точки Б,
• фигуры — квадраты, круги, многоугольники — чтобы выделить на карте небольшой участок или целый район.

Откройте сервис 2GIS. В верхней строке выберите город из списка и при необходимости укажите адрес. Если города в списке нет, найдите его вручную на карте.

В верхней панели выберите отметку, линию или фигуру и поместите ее в нужное место.

В левой панели можно отредактировать текст метки, настроить цвет, толщину линии и другие свойства фигур и ​​добавить описание. Его пользователи увидят, когда кликнут на объект. Название отметки будет сразу отображаться на карте.

Все отметки, линии и фигуры на карте появятся в левой панели. Там их можно дополнительно редактировать. Чтобы удалить объект, выберите его из списка и нажмите на крестик.

Как сделать интерактивную карту. Обзор 13 сервисов

Карты — отличный способ рассказать, как событие разворачивалось на местности. Если у вашей истории есть маршрут или ключевые точки в разных местах, или же есть характеристика для определённой области, покажите всё это на карте. Преимущество карт в том, что они наглядны, а с помощью интерактивных сервисов ещё и многофункциональны.

МОЖНО СДЕЛАТЬ
ИСПОЛЬЗУЕТСЯ В:

С помощью карт можно:

• построить маршрут
• измерить расстояние
• оценить масштаб
• увидеть любую улицу глазами прохожего
• узнать информацию о реальном объекте
• определить местоположение (как своё, так и других)
• определить и сравнить характеристики регионов

Карты от Google и Яндекса

Два базовых и самых популярных сервиса — Google Maps и Яндекс Карты. Они довольно простые, но их функционала будет достаточно для краткого описания маршрута, иллюстрации местоположения или расстояния, а также демонстрации дорожной ситуации.

Вы можете собрать собственную карту, изменив дизайн, добавив слои, метки и изображения. Интерактивные карты Гугла и Яндекса можно использовать на своём сайте или в приложении.

Данные Wikimapia полностью созданы добровольцами. Внося свой вклад, пользователь приобретает опыт и получает доступ к более продвинутым инструментам. Пользователь также может делиться данными и картами в блогах, на сайтах и в социальных сетях.

Отдельным приложением Google предлагает интерактивную модель мира — Google Earth. На ней отлично видны рельеф и реальные размеры объектов. Многие крупные города воссозданы с помощью 3D-зданий. У «Планеты Земля» масса графических слоёв для изучения, а также карты Марса, Луны и всего звёздного неба.

Вы и сами можете отрисовать объекты, которых ещё нет. Для этого ознакомьтесь с Руководством по 3D-моделированию. Хотя Google Earth работает как отдельное приложение, которое нельзя просто взять и вставить в свой проект, его можно использовать, к примеру, для съёмки 3D-туров. Google Планета Земля Pro предлагает ещё и бизнес-инструменты.

OpenStreetMap

У неё есть несколько слоёв на выбор, среди которых, например, карта для велосипедистов. Можно отдельно выгружать города и континенты. Узнайте, как экспортировать данные OpenStreetMap.

2ГИС

Этот сервис специализируется на точных данных об организациях, которые можно найти на карте. Изучите инструкцию, чтобы узнать как можно использовать виджет 2GIS на своём сайте. Если вы хотите заявить о себе через данный сервис, попробуйте 2ГИС для бизнеса с набором инструментов для продвижения. Полезная функция: можно встроить карту, которая покажет в указанном регионе заведения, отсортированные по категориям.

ZeeMaps

Сервис предлагает инструменты для добавления больших объёмов информации и её анализа на карте. Посмотрите эти видео-инструкции, чтобы понять, как кастомизировать карту и добавить на неё новые слои и элементы.

ArcGIS

Огромное количество инструментов для визуализации данных есть у ArcGIS. Они рассчитаны в первую очередь на профессионалов, поэтому имеют только платную подписку. Зато возможности для аналитики данных и разработки новых интерактивных карт практически безграничны.

CartoDB

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

Scribble Maps

Этот сервис отличает возможность выгружать карты в самых разных форматах.

StoryMap JS

Сервис, который позволяет создавать из карт целые истории — StoryMap JS. Составьте маршрут и добавьте текст, фото или видео к каждой точке на карте.

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

Tripline

Пользователи Инстаграм могут подключать свои аккаунты и импортировать свои фотографии в Tripline. Сервис также интегрируется с Flickr, Twitter, Facebook и другими соцсетями.

GeaCron

Историческая карта от GeaCron может пригодиться для проекта по истории.

Windyty и Planet OS

Если вы рассказываете о погоде, то смело встраивайте Windyty — красивый погодный глобус с неплохим набором инструментов. Для профессионалов отрасли есть также Planet OS.

Как создать интерактивную карту. Яндекс.Карты

Сегодня необязательно изучать языки программирования или искать аутсорсеров, чтобы создать интерактивную карту для мультимедийного проекта. С помощью бесплатного онлайн-сервиса от компании «Яндекс» вы можете окунуться в мир картографии без всякой подготовки.

МОЖНО СДЕЛАТЬ
ИСПОЛЬЗУЕТСЯ В:

Конструктор карт Яндекс Карты — это бесплатный визуальный редактор, в котором вы можете самостоятельно сделать интерактивную карту. Он помогает создавать мультимедийные элементы для ваших лонгридов и спецпроектов: например, показать перемещения героя материала, закрытые больницы или замороженные стройки в вашем городе, территорию реконструируемого парка, маршрут марафона. Сфера применения интерактивных карт ограничена только вашей фантазией.

Карта создана, теперь нужно нанести на нее объекты. В сервисе их три вида: метка, линия и многоугольник. Рассмотрим каждый из них подробнее.

Как добавить метку на карту

Метка — это точка с месторасположением, которая указывает на определенный город, район или дом или другой объект. Чтобы добавить метку, вводим в поисковую строку адрес — например, город, который вас интересует, точный адрес объекта или его координаты. Затем нажимаем «Enter» на клавиатуре или кликаем на кнопку «Найти». Конструктор автоматически добавит метку с месторасположением в список объектов.

В появившемся окне можно персонализировать метку: изменить ее тип и цвет, дать ей название. После этого нажимаем «Готово» — на карте появится наша метка:

Щелкнув на метку еще раз, можно снова вернуться в контекстное меню и изменить параметры точки. Также можно перетаскивать объект в любую сторону с помощью мыши.

Как построить маршрут

Для построения траектории будем использовать инструмент «Линии». Сначала необходимо создать, как минимум, еще одну метку. Например, мы можем построить маршрут между Москвой и деревней Петушки. Для этого повторяем для нового объекта первый шаг: вводим название деревни — «Петушки» — и добавляем ее в список. Также можно просто кликнуть в нужное место на карте.

Теперь кликаем на инструмент «Линии». Чтобы ускорить процесс, воспользуемся комбинацией клавиш Alt+L:

Нам нужно провести маршрут из одной точки в другую. Для этого нажимаем на одну из меток. Появится пунктирная линия:

Теперь кликаем по второй метке — линия станет сплошной. Кликаем по появившемуся узлу на конце линии, затем на кнопку «Завершить»:

Заполняем описание в появившемся окне и изменяем толщину линии, ее цвет и прозрачность, если нужно. Нажимаем «Готово».

Как добавить на карту водоем, дом или другой объект

Третий вид объектов, которые можно наносить на интерактивную карту, — многоугольники. С их помощью можно обозначать какие-либо зоны, рисовать на карте пруды и озера, дома, коттеджи и прочие объекты.

Нажимаем на кнопку «Многоугольники». С помощью кликов наносим на карту несколько точек. Затем нажимаем на одну из точек и кликаем по кнопке «Завершить» — мы уже выполняли похожее действие для построения маршрута.

Например, так на карте будет выглядеть водоем в деревне Петушки:

Можно менять цвет и прозрачность фигуры, изменять ее форму и перемещать ее в любую сторону с помощью мыши. В Конструкторе есть ограничения для многоугольников: нельзя задавать более 1000 вершин (узлов) для одного объекта.

Как опубликовать карту

Встроить карту на сайт можно с помощью кода iframe. Закончив редактирование карты, нужно дать ей название. Впрочем, дать ей имя можно на любом этапе до публикации.

Затем нажимаем «Сохранить и продолжить». В появившемся окне нужно выбрать область отображения карты — та часть, которая будет отображаться на сайте. Обратите внимание на то, чтобы в нее поместились все необходимые элементы. Чтобы увеличить или уменьшить область отображения, перемещайте мышкой узлы (маленькие белые квадраты).

По умолчанию в Конструкторе указан интерактивный тип карты. Вы можете выбрать и ее статичный вариант в виде картинки, но тогда пользователи не смогут взаимодействовать с элементами карты, например, кликать на объекты и читать их описание.

Нажимаем «Получить код карты» и выбираем «iframe» в появившемся окне:

Последний шаг! Копируем код и вставляем его на сайт. Если в дальнейшем нужно что-то изменить, не обязательно делать новую карту, просто вносите необходимые изменения в первоначальную карту и встроенная на сайт карта будет обновляться автоматически.

При подготовке материала использовались источники: