Знаете похожие технологии? Расскажите о своем опыте, нам интересно! Как сделать интерактивную карту для сайта


Как сделать интерактивную карту: обзор сервисов • sdelano.media

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.

sdelano.media

Как Сделать Интерактивную Карту Google Для Сайта? | Продвижение Системы МИД на Автопилоте

Интерактивная карта Google для сайта вызывает больше доверия у ваших посетителей, потому что Вы позаботились заранее о том, чтобы они Вас нашли, как можно быстрее, и убедились в реальном Вашем существовании.

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

  1. Откройте сайт https://www.google.ru/maps
  2. Нажмите кнопку «Меню» слева вверху
  3. Выберите в меню «Мои места»
  4. На открывшейся панели во вкладке «Карты» нажмите кнопку «Создать карту»

interaktivnayakartadlyasaita1

  1. В информационном блоке кликните «Карта без названия»
  2. Во всплывшем окне напишите своё название и описание и нажмите «Сохранить»
  3. Созданная карта отобразится во вкладке «Карты» раздела «Мои места»

interaktivnayakartadlyasaita12

  1. Нажмите «Открыть в Моих картах»
  2. Далее кликните на ссылку «Базовая карта» и карты Google предложат несколько вариантов отображения, выберите одну из девяти карт (описание карты появится при наведении мышки на картинку)

interaktivnayakartadlyasaita2

Как добавить объекты на интерактивную карту Google?

  1. Слева нажмите на «Слой без названия»
  2. Во всплывшем окне введите название

В одном слое Вы можете разместить до 2000 объектов, но сами слои вы не можете смешивать, например, пункты и маршруты будут размещены на разных.

interaktivnayakartadlyasaita3

Для начала рассмотрим вариант, когда Вы хотите добавить объект, которого нет в списке Google.
  1. Для создания нового объекта в панеле под строкой поиска нажмите на иконку «Метки».
  2. Кликните мышкой в том месте, которое хотите отметить
    • Во всплывшем окне напишите название компании или офиса
    • Заполните описание, можно указать адрес Вашего сайта, а также добавить видео или картинку, для этого:
    • Нажмите на иконку «Фото»
    • Выберите из предложенных вариантов
    • Нажмите «Выбрать», затем «Сохранить»

interaktivnayakartadlyasaita13

Теперь создадим новый слой и выберем объект из списка Google
  1. В поисковой строке напишите, что хотите отобразить, чтобы перенести объекты из поиска на картуВ открывшемся списке слева кликните на названиеinteraktivnayakartadlyasaita4
  2. Во всплывшем окне нажмите ссылку «Добавить на карту»Объект появится в списке слоя и будет отмечен другим цветом, Вы можете его изменятьinteraktivnayakartadlyasaita5
  3. Отметьте те объекты, которые нужныОстальные удалите, нажав крестик в результатах поискаinteraktivnayakartadlyasaita6
К вашему офису можно проложить маршрут
  1. Нажмите кнопку «Проложить маршрут сюда», автоматически создастся новый слой
  2. Введите название пункта А
  3. Нажмите на ссылку «На автомобиле» и выберите способ перемещения «На авто», «На велосипеде», «Пешком»

interaktivnayakartadlyasaita7

Вы можете создать несколько слоёв с разными вариантами маршрута. Когда Вы разместите карту на блоге, то Вы можете настроить отображение определённого участка

  1. Увеличьте/уменьшите карту до необходимых размеров с помощью кнопок +/- внизу слева на карте и нажмите кнопку «Настройки»
  2. Из списка выберите «Задать область просмотра по умолчанию»

interaktivnayakartadlyasaita8

В разделе «Справочный центр — Мои карты» Вы можете узнать о дополнительных настройках https://support.google.com/mymaps

Как разместить интерактивную карту на сайте WordPress?

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

  1. Нажмите «Поделиться»
  2. Нажмите ссылку «Изменить»
  3. В открывшемся окне выберите «Всем в интернет»
  4. Нажмите «Сохранить», далее «Готово»

interaktivnayakartadlyasaita9

  1. Нажмите на «Настройки»
  2. Выберите «Добавить на сайт»
  3. Скопируйте код, нажмите «Ок»

interaktivnayakartadlyasaita10

Вставьте код на страницу блога в режиме Текст. Его Вы можете, как всегда, редактировать вручную.

interaktivnayakartadlyasaita11

Можно добавить интерактивную карту на страницу Контакты или в футер на Ваше усмотрение, например как здесь.

Как добавлять записи на блог Вы можете прочитать в статье Редактор WordPress. Как пользоваться без слёз?

Вот Вы и решили ещё одну проблему для Ваших читателей, что позволит им среди других предложений выбрать Ваше с большей вероятностью.

 

Информация оказалась полезной? Поделитесь ею с друзьями!

Чуть ниже Вы можете выразить своё мнение, прокомментировав данный материал

Берегите себя! С Верой в Вас и Ваш Успех, Ирина Клепикова

  Как Сделать Интерактивную Карту Google Для Сайта?

   2 голосаСредняя оценка: 5 из 5

irinaklepikova.ru

Технология создания интерактивной карты в программе PowerPoint — Дидактор

Применение интерактивных карт на учебных занятиях очень эффективно. Оно позволяет оперативно решать с ребятами различные учебные задачи, быстро «перемещаться» в пространстве и во времени.

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

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

И вновь хочется подчеркнуть, что данный прием очень эффективно воспроизводится не только на обыкновенном экране, в сочетании компьютер-проектор, но особенно на интерактивной доске.

Итак, начинаем создавать интерактивную карту.

 

Шаг первый. Вставляем основную карту. В приведенном ниже примере это будет карта России.

karta

Внимание! Для интерактивной карты целесообразнее настраивать не объект, а целый слайд. Поэтому целесообразно выполнить следующий шаг по смене слайдов.

Шаг второй. В главном меню выполняем следующий алгоритм: Анимация – Смена слайдов. В смене слайдов находим режим «прямоугольник наружу». С ним эффект смены карт наиболее рационален. В «Смене слайдов» убираем также галочки с режимов «по щелчку» и «автоматически». Это касается всех слайдов нашей разработки.

Шаг третий. Теперь нам необходимо создать гиперссылки. Ими будут выделенные объекты – тот или иной регион, даже населённый пункт. В прикрепленном файле, в нашем конкретном случае выделим Краснодарский край и Карелию. Выделяем их замкнутой полилинией.

Алгоритм выполнения следующий: Вставка – Фигуры – Полилиния (можно и Рисованная кривая).

polilinia

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

Обратите внимание! Необходима сплошная заливка, чтобы гиперссылка появлялась не только по контуру, но и по всему объекту. Поэтому обязательно замкните линию, чтобы получить целый объект.

Когда на экране у вас появится выделенная область, независимо от полученного цвета заливки настраиваем формат полученного рисунка на 100%-ную прозрачность. Таким образом, объект гиперссылки невидим, внешне наша карта ничем не отличается от обычной. Но между тем, все выделенные нами регионы являются гиперссылками.

Шаг четвёртый. На отдельных слайдах размещаем необходимые нам карты регионов. Напомню, что смена всех слайдов в режиме «прямоугольник наружу».

karel

Шаг пятый. Каждый из выделенных объектов делаем гиперссылками на соответствующие карты. Рекомендуемое действие гиперссылки «по наведению указателя мыши». В таком режиме наиболее эффективна работа интерактивной карты.

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

При необходимости можем продолжить углубление содержания, то есть от карты региона перейти к карте города (населённого пункта). Отсюда – к отдельным объектам. Например, показать вид школы из космоса. Или перейти по гиперссылке к фото отдельных объектов.

Шаг шестой. Не забываем на всех картах разместить «кнопки возврата» и на главную карту, и на карту, например, региона. То есть на остальных картах может быть несколько кнопок возврата: например, одна кнопка — с населенного пункта на карту региона, другая – на карту России.

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

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

Интерактивные карты могут быть использованы и в дидактических играх-путешествиях по виртуальным, вымышленным странам.  В таком случае необходимо красочно прорисовать необходимые зоны, объекты.  Однако здесь могут быть другие проблемы с гиперссылками.

Если на такой  карте  вы  рисовали  какие-то  символы,  делали надписи и т.п., то  группировка  их в один объект (область какой-то страны например)  не поможет вам сделать его гиперссылкой.  Вряд ли уместно  давать гиперссылку  на отдельные  элементы.  Тут вновь может помочь  гиперссылка на основе  невидимой автофигуры.

См. пример Виртуальной страны.

См. Интерактивную карту

didaktor.ru

15 бесплатных jQuery-плагинов электронных карт

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

Добавление маркеров или возможность вычислить расстояние между точками в режиме реального времени — это всегда интересно для пользователя. JQuery-плагины электронных карт сегодня уже широко используются в современных web и мобильных приложениях. Они просты в реализации, если исходный код уже написан разработчиками и выложен в свободном доступе. Как вы увидите, многие пользователи GitHub и других сообществ предоставляют нам большое количество бесплатных плагинов электронных карт, созданных на Jquery.

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

gmaps.js

gmaps.js позволяет в простой форме использовать огромный потенциал Google Maps. Не требует изучения дополнительной документация или внедрения большого объема кода.

Скачать

Landcarte, JQuery-плагин Google Maps

Landcarte — это JQuery-плагин и библиотека JavaScript, которые помогают реализовать на веб-странице географические карты и их многочисленные функции (геокодирование, геолокация, пользовательские события).

Скачать

JQVMap

JQVMap – это Jquery— плагин, который выводит Vector Maps. Для современных браузеров, таких как Firefox, Safari, Chrome, Opera и Internet Explorer 9, он использует Scalable Vector Graphics (SVG).

Скачать

JQuery интерактивные карты

Бесплатная интерактивная карта 47 стран Европейского континента. Это лучший способ преобразовать список регионов в стильные интерактивные карты без необходимости установки Flash Player или каких-либо внешних плагинов, необходимы только широко используемые CSS-спрайты, которые работают во всех современных браузерах.

Скачать

U.S. Map — JQuery плагин

С его помощью можно очень просто добавить на страницу интерактивную карту США без использования Flash.

Скачать

Kartograph.js

JavaScript — библиотека для создания интерактивных карт, основанных на SVG картах Kartograph.py. Kartograph — это простая основа для создания интерактивных приложений без Google Maps или любой другой картографической службы.

Скачать

Плагин jQuery Location Picker

Этот плагин позволяет легко найти и выбрать местоположение на карте Google. Наряду с выбором одиночной точки, он позволяет выбрать область с помощью центра и радиуса. Все данные автоматически могут быть сохранены в любой HTML-элемент, а также обработаны с помощью Javascript (при условии поддержки обратных вызовов).

Скачать

Mappy.js: Google Maps & Places jQuery plugin

Я не могу придумать ничего, чтобы мне нужно было еще делать после установки Mappy.js (нужен опыт работы с JavaScript).

Скачать

jHERE

Карты — это здорово, но API карт может быть немного сложным. jHERE решает эту проблему, предлагая простой, но мощный API карт в виде JQuery плагина (Zepto.JS или Tire).

Скачать

jQuery Geocoding and Places Autocomplete Plugin

Сложный JQuery плагин, который использует сервисы геокодирования и автозаполнения Google Maps API. Вы просто предоставляете входные данные, которые позволяют искать место с помощью большого списка автозаполнения.

Скачать

WhatsNearby

JQuery-плагин для просмотра и показа с помощью Google Maps близлежащей области вокруг заданной точки.

Скачать

Адаптивные JQuery Google Maps

Этот плагин позволяет реализовать на вашем сайте оригинальные Google Maps и резервный вариант статического изображения Google карт для небольших устройств.

Скачать

DataMaps

Настраиваемая визуализация SVG карт для веб-страницы в одном Javascript — файле с использованием D3.js

Скачать

maplace.js

Небольшое JavaScript дополнение к Google Maps.

Скачать

Премиум варианты

Custom Interactive Map – jQuery Plugin

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

Демо|Скачать

jQuery Interactive SVG Map Plugin

Плагин MapSVG превращает любой SVG-файл в интерактивную и полностью настраиваемую карту или план здания.

Демо|Скачать

5sec Google Maps Standalone

Демо|Скачать

MapIt – Maps Made Your Way

MapIt — подключаемый JQuery плагин, который взаимодействует с Google Maps API. Плагин был разработан для того, чтобы облегчить навигацию и поиск заданных координат в любой точке мира. Плагин, управляемый с помощью XML и AJAX, поможет вам сгруппировать и организовать все ваши ссылки местоположения.

Демо|Скачать

Google Maps Module with Geolocation [V2]

Модуль Google Maps V2 был создан для организации простого сервиса по прокладке маршрута. С помощью геолокации, вы можете проложить маршрут из любой точки к дому, работе и т.д. … Кроме этого его геолокация совместима со всеми браузерами с поддержкой JavaScript.

Демо|Скачать

5 Color Themes for Google Maps API

5 Color Themes for Google Maps API. Стандартная цветовая тема для Google Maps. Предлагает большую персонализацию, отображая оригинальные цветовые темы для ваших карт Google.

Демо|Скачать

Перевод статьи «15 Free jQuery Map Plugins» был подготовлен дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru

Планограф. Интерактивная карта для сайта за 7 минут!

В своей работе мы часто сталкивались с обслуживанием интерактивных карт, выполненных на технологиях flash или html-разметке. Редактирование, обновление таких карт и поддержание таких карт в актуальном состоянии ‒ достаточно трудоёмкое и затратное дело. Планограф поможет вам сэкономить время и деньги на таких проектах.

Для каких целей используется Планограф?

  • Создание интерактивных карт местности, объектов
  • Интерактивные планы коттеджных посёлков, туристических центров, баз отдыха, отелей
  • Интерактивные схемы торговых центров, зданий офисов
  • Размещение планировки этажей в многоквартирных домах
  • Наглядное отображение на Яндекс.Картах или на любых загруженных изображениях
Попробовать бесплатно

В большинстве случаев карты, составленные на Flash или html-разметке, затрудняют восприятие планировки, не передают полной картины местности/застройки. Как следствие - потенциальный клиент или заказчик не может получить всей необходимой информации о проекте с вашего сайта.

Преимущества нашего решения:

  • Планограф на сайте помогает максимально эффективно взаимодействовать с потенциальными заказчиками, так как в полной мере представляет интерактивный план вашего проекта или объекта
  • Ваши клиенты получат всю необходимую и актуальную информацию об интересующих структурах и локациях (будь то коттеджный посёлок, участок, квартира, офисное помещение или любой другой объект)
  • Возможность выбора любой подложки плана, его самостоятельного заполнения и редактирования согласно типу проекта.
  • Используя Планограф, вы можете оперативно добавлять описания объектов, изображения и фотографии, использовать внешние ссылки, различные цветовые схемы
  • Быстрое редактирование информации, возможность своевременного и оперативного внесения изменений позволит значительно сэкономить время и деньги
  • Решение совместимо со всеми редакциями «1С-Битрикс: Управление сайтом»

Схема коттеджного поселка      Схема торгового центра

","fillOpacity":"0.3","polyHover":"check","linkField":"","hintContent":"","fillColor":"#33CC00","HoverFillColor":"#33CC00"}}], "routes":null, "edit":false, "folder":"d59f16e40137c1c528f58ca5dad8c00a", "logo":"/bitrix/images/profistudio.planograf/logo.jpg", "lang": { route_add: "Построить маршрут", route_exist: "На этой карте уже построен маршрут", route_error: "Возникла ошибка", placemark: "Настройки метки", placemark_text: "Текст метки", placemark_icon: "Иконка", placemark_select: "Выбрать", placemark_color: "Цвет", placemark_hover: "Настройки наведения", placemark_fill: "Цвет заливки", placemark_desc: "Описание", placemark_find_on_map: "Найти на карте", placemark_find: "Найти", placemark_not_found: "Не найдено", placemark_add: "Добавить метку", polygon: "Настройки полигона", polygon_stroke: "Цвет контура", polygon_fill: "Цвет заливки", polygon_hover: "Настройки наведения", polygon_desc: "Описание", polygon_add: "Нарисовать многоугольник", line_add: "Нарисовать линию", line_color: "Цвет линии", line_desc: "Подсказка", text: "Текст", link: "Ссылка", save: "Сохранить", delete: "Удалить", hover: "Реагировать на наведение", opacity: "Прозрачность", thickness: "Толщина", very_bold: "Очень толстая", bold: "Толстая", normal: "Нормальная", thin: "Тонкая", very_thin: "Очень тонкая" } };

Пример работы с модулем:

Описание создания многоуровневой карты скачатьОписание создания карты с большим числом выделенных областей скачать

Описание технических характеристик решения:

  • Добавление собственных изображений подложки карты с возможностью автоматического масштабирования
  • Удобная работа с интерактивными объектами Яндекс.Карт: полигоном, линией, меткой
  • Настройка внешнего вида полигонов: цвет контура и заливки, прозрачность, эффекты при наведении указателя
  • Возможность загрузки собственного изображения для каждой метки
  • Выбор взаимодействия с пользователем: открытие описания объекта или переход по ссылке
  • При описании объекта используется простой редактор текста с возможностью вставки изображений и ссылок
  • Вы можете разместить на одной странице сайта неограниченное количество карт с индивидуальными настройками границ масштабирования, начальных координат, размеров области вывода
  • Карты, интерфейс работы пользователя с картой

Частые ошибки

‒ Созданная карта не отображается Возможно, Вы забыли указать координаты центра карты. «Пошевелите» карту, координаты установятся автоматически. Не забудьте сохранить :) ‒ Создан элемент Планографа, при сохранении все пропало Инструкция по работе с большими объемами данных скачать

Обновления новой версии:

  • Изменена система установки модуля, теперь можно выбирать создавать новый инфоблок или добавить свойство к существующему инфоблоку
  • При удалении модуля добавлена возможность сохранять загруженные данные
  • Добавлен новый компонент, позволяющий хранить объекты в разных элементах инфоблока
  • В новом компоненте добавлена возможность использования фильтра
  • В настройки карты добавлена возможность отключения элементов управления
  • Обновлена версия API Яндекс.Карт (2.1)

По запросу мы сможем осуществить индивидуальные доработки модуля под ваш проект

Узнать стоимость и приобрести модуль вы можете на странице в Маркетплейс. 

Еще мы сделали очень подробное описание использования с наглядными примерами.

profi-studio.ru

10 бесплатных сервисов для создания и публикации пользовательских карт

Стоящая за окном зимняя стужа и заносы на дорогах не слишком радуют любителей активного отдыха и туризма, но дают достаточно времени, чтобы разобрать наконец-то снимки, маршруты и впечатления из прошлых походов. Поэтому именно сейчас самое лучшее время для составления отчетов о своих приключениях и разработки маршрутов на будущее. Разумеется, все путешественники знают и активно пользуются для этих целей прекрасным сервисом Google Maps. Однако на нем список картографических сервисов далеко не заканчивается, и в этой статье вы узнаете о достойных альтернативных инструментах для создания, публикации и анализа пользовательских карт.

 

Онлайновый сервис Scribble Maps отличает от множества конкурентов то, что этот сервис отлично подойдет как новичкам, так и экспертам в области картографии. Его простота и функциональность делают Scribble Maps одним из самых популярных картографических приложений в сфере образования и науки. Сервис предлагает пользователям широкий спектр возможностей, в том числе разметку карт, измерение расстояний, импорт данных в формате KML, импорт табличных данных, нанесение пользовательских меток, текста, изображений и многое другое.

В своей работе сервис использует карты не только Google, но также Street Map и Cloud Made, позволяя пользователям выбирать наиболее удобный для них вариант. Готовая карта сохраняется в галерее сервиса, при этом вы можете поделиться прямой ссылкой на нее, опубликовать в социальных сетях или встроить в виде виджета в свой сайт или блог. Есть возможность экспорта в виде изображения, KML и GPX файлов.

 

Сервис Open Street Map (OSM) исповедует те же принципы, которые легли в основу создания всемирно известной Википедии. Вся информация здесь собрана усилиями десятков тысяч добровольцев, предоставляющих в распоряжение проекта данные с персональных GPS-трекеров, аэрофотографии, видеозаписи, спутниковые снимки и панорамы улиц. Хотя точность этих данных значительно отличается в зависимости от региона, все же можно уверенно сказать, что OSM для некоторых районов содержит более детальную и актуальную информацию, чем Google Maps.

Для всех зарегистрированных пользователей доступна функция редактирования карт. Вы можете экспортировать данные из своего GPS-устройства, рисовать маршруты вручную, ставить маркеры, отмечать интересные и памятные места, давать описания и комментарии. Возможен экспорт карт в формате OpenStreetMap XML или в виде изображения (PNG, JPEG, SVG, PD), также можно получить HTML-код для вставки на любой сайт.

 

Хотя Build-A-Map производит несколько несерьезное впечатление своими большими яркими иконками, все же перед нами вполне взрослый инструмент для создания карт и схем. Источником картографической информации здесь является Google Maps, поверх которого пользователь может создавать свои слои и наносить на них необходимые данные.

Сервис Build-A-Map позволяет добавлять не только банальные метки и треки, но и текстовые надписи, круги, полигональные фигуры, лайтбоксы с фотографиями, прокладывать маршруты и так далее. Ко всему этому вы можете внедрить сведения о погоде, точки Google Places, снимки фотохостинга Panoramio. Полученную таким образом карту можно сохранить в хранилище сервиса и демонстрировать ссылку на нее, или получить код для встраивания в веб-страницу.

 

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

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

 

ZeeMaps предоставляет пользователям быстрый и простой способ создавать и совместно использовать интерактивные карты мира. С его помощью вы сможете визуализировать на карте треки в форматах KML, KMZ или GeoRSS, добавить свои отметки и комментарии. Отличительной особенностью этого сервиса является возможность работы с табличными данными. Так, если у вас есть таблица с координатами нужных точек или, например, адреса проживания ваших клиентов, то вы можете скормить эти данные ZeeMaps, и он аккуратно нанесет их на карту.

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

 

Этот сервис интересен тем, что позволяет не только проложить трек по карте, но и увидеть, как он будет выглядеть в реальности. TripGeo использует данные Google Maps и Google Street View и объединяет их в одном интерфейсе, позволяя совершить виртуальное путешествие по выбранному маршруту.

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

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

 

Сервис QuickMaps полностью оправдывает свое название: вы можете сделать здесь карту так быстро, как это только возможно. Для этого вам не понадобится даже регистрироваться — просто придумайте имя для карты, краткое описание и можете браться за дело.

Хотя на первый взгляд может показаться, что инструментов здесь не так уж и много, на самом деле все необходимое присутствует. Вы можете отмечать треки прямыми линиями или в режиме свободного рисования, делать текстовые пометки, импортировать файлы в форматах KML или GPX из Сети и загружать их со своего компьютера. А по части разнообразных маркеров QuickMaps может дать фору куда более серьезным сервисам.

Готовую карту вы можете сразу же сохранить и получить постоянную ссылку для просмотра, а также код для встраивания в любой сайт в виде виджета. Кроме того, возможен экспорт данных в формате KML или GPX.

 

Этот сервис является частью проекта Яндекс.Карты и черпает информацию, разумеется, именно оттуда. В очень многих случаях, особенно когда касается дело территории Украины или России, эти данные могут быть даже более верны и детализированы, чем у зарубежных конкурентов. Конструктор карт позволяет наносить маршрут, измерять расстояния, рисовать многоугольники, наносить точки на нужный вам участок карты. Маркеры здесь могут быть только одного вида, но каждый можно сопроводить номером и комментарием, который будет появляться при щелчке по точке.

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

 

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

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

 

Картографический сервис Bing Maps долгое время находится несколько в тени своего основного конкурента. И совершенно зря — после начала дружбы Microsoft и Nokia этот сервис стал использовать данные из Nokia Maps, которые всегда отличались хорошим покрытием и отличной детализацией.

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

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

Заключение

В этой статье мы рассмотрели десять сервисов, предназначенных для создания, редактирования и публикации пользовательских карт. Все они имеют свои особенности и разную функциональность, поэтому выбор самого лучшего из них сильно зависит от стоящих перед вами задач. Если вам необходимо просто сделать схему проезда для сайта, то проще и удобнее всего воспользоваться Конструктором карт от компании Яндекс или QuickMaps. При необходимости сделать информативный отчет о вашем путешествии лучше обратить внимание на Tripline и Animaps, которые позволяют не только привязывать к треку фотографии и видеоролики, но и заворачивают все это в эффектную оболочку. Ну а для действительно серьезной работы с картами стоит использовать Scribble Maps или Open Street Map, обладающие очень богатой функциональностью.

itc.ua

StoryMap JS: инструмент для создания интерактивной карты

Интерактивная карта (сторимап — storymap) — это отличная возможность для медиа рассказать историю максимально ярко и доступно. Инструмент будет лучшим средством визуализации информации, если события происходят (или происходили) в нескольких географических точках.

Мы протестировали онлайн-сервис storymap.knightlab.com, разработанный Северо-Западным университетом (Northwestern University), США.

Storymap.knightlab.com объединяет в себе три продукта — StoryMapJS, Gigapixel и SnapMap. Чтобы воспользоваться ими, необходимо иметь Google-аккаунт — медиафайлы, которые вы используете в работе, загружаются на ваш Google-диск.

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

После входа на сайт выбираем пункт «Make». Сервис спросит вас, что вы хотите создать – Gigapixel или карту.

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

Мы выбираем «Карту». Даем название проекту. Вот, собственно, и все. Инструмент предлагает уже готовую карту и возможность добавления описаний/фото/видео на разные точки – географические пункты. Города и страны можно вводить в поиск на русском языке.

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

В правой колонке добавляем текстовую информацию, с помощью окна слева – мультимедийные файлы.

Слайд можно сделать цветным и добавить подложку.

Storymap: инструмент для создания интерактивной карты

Обратите внимание, в пункте Options меняются шрифт, размер карты, язык (выбор не очень большой, русского в списке нет).

«Призыв» к читателям (Call To Action, с чего будет начинаться обзор, в нашем случае, это – «Начать просмотр»), функция просмотра карты как фотографии или интерактивно (Treat As), то есть, будет ли смена слайдов сопровождаться автоматическим передвижением по карте.

Storymap: инструмент для создания интерактивной карты

Карту можно вставить в пост или отправить в качестве ссылки в твиттере, фейсбуке или гугл+.

Мы отметили на карте города, в которых расположены редакции медиа — участников проекта Newsroom2.0, с которыми мы работаем над созданием конвергентных мультимедийных редакций.

Вот, что получилось.

География участников проекта Newsroom2.0

Snapmap.knightlab.com — очень простой инструмент для визуализации на карте инстаграм-публикаций. Чтобы получить интерактивную карту фото в Instagram, вам нужно лишь указать аккаунт пользователя. Сервис выберет 20 отмеченных в разных местах фотографий и покажет, где они были сняты.

Карта «инстаграм-передвижений» Оксаны Силантьевой, медиаспециалиста и медиатренера.

Результат можно отправить ссылкой в соцсетях или вставить на сайт.

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

Для использования Gigapixel вам понадобятся фотографии очень хорошего качества и специальные программы для их фрагментации. К примеру, zoomify.com (сервис платный, стоимость — 19$).

В итоге можно получить вот такой искусствоведческий обзор.

Нам сервис очень понравился. Будем рады ссылками на ваши интерактивные карты.

newreporter.org