Содержание

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

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

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

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

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

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

«,»fillOpacity»:»0.3″,»polyHover»:»check»,»linkField»:»»,»hintContent»:»»,»fillColor»:»#33CC00″,»HoverFillColor»:»#33CC00″}}], «routes»:null, «edit»:false, «folder»:»d59f16e40137c1c528f58ca5dad8c00a», «restrictMapArea»: true, «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: «Очень тонкая» } };

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

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

Бесплатные конструкторы для создания интерактивных карт

Что такое интерактивные карты и зачем они нужны

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

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

Разместить большой объём информации

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

У Авиасейлс есть интерактивная карта низких цен на авиабилеты, которая помогает сравнить стоимость билетов по разным направлениям. Информация появляется по мере масштабирования, а все точки кликабельные.

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

Сравнить географические объекты

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

У Тинькофф Путешествий есть интерактивная карта «Куда лететь». Если активировать все фильтры в правом верхнем углу, можно быстро отсортировать страны по доступности. Зелёные — въезд открыт, жёлтый — есть ограничения, красный — закрыты. По клику на регион открывается окно с дополнительной информацией и кнопкой покупки авиабилетов. 

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

Показать изменения

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

В 2019 году голландский дизайнер Даан Лутер выпустил карту с таймлайном появления новых объектов Airbnb в Стамбуле на основе данных сервиса. Каждому шагу соответствуют вспышка на карте. Возникновение новой точки — «захват» ещё одного района, а рост точки — увеличение числа доступных объектов. 

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

Показать перемещение

Рассказать о перелётах можно с помощью текста, но интерактивная карта сильнее вовлекает читателей во взаимодействие со страницей.

 

У авиакомпании Red Wings есть карта доступных направлений. По клику на выбранную точку появляются интерактивные маркеры с доступными маршрутами и стоимостью авиабилетов. 

Тревел-блогеры с помощью интерактивной карты могут создать онлайн-гид своего путешествия. Авторы медиа We Shall Burn Bright разработали карту перемещений от начальной точки в Киеве до конечной в Карпатах. Читатели проходят маршрут по шагам и читают заметки автора. 

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

Инструмент для визуализации данных DataWrapper

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

Какие карты можно сделать в DataWrapper

В сервисе можно сделать 3 вида карт:

  1. Картограмма (Choropleth map). Подходит для закрашивания регионов по определённым параметрам. Можно показать качество мобильной связи или сравнить привлекательность городов для туристов. 
  2. Символьная карта (Symbol map). Данные можно зашифровать цветом и размером символов. Оптимальный вариант для сравнения регионов по нескольким показателям. Например, можно показать, рейсы каких авиакомпаний прилетают в город. Цвет будет соответствовать авиакомпании, а размер — числу рейсов. 
  3. Карта локатора (Locator Map). Карта подойдёт для отображения геолокации достопримечательности.

Как сделать интерактивную карту в DataWrapper

Процесс создания карты в DataWrapper состоит из нескольких шагов:

  1. Нажимаем Create new, выбираем «New Map».
  2. Выбираем тип карты. Континент, страна, город, округ или район.
  3. Загружаем данные. DataWrapper поддерживает импорт из CSV, Excel и Google Sheet.
    Можно сопоставить свои данные с картой по ISO-кодам стран.
  4. Оформляем карту. Выбираем цвета, настраиваем легенду, добавляем заголовок карты, задаём дополнительные параметры: масштабирование, выравнивание, высоту. В настройках можно выбрать язык, отключить логотип сервиса на платном тарифе и добавить кнопки шеринга.
  5. Экспортируем карту. Если интерактивных элементов нет, можно сохранить её как изображение. Интерактивные карты можно встроить на свой ресурс с помощью HTML-кода.

Инструмент для визуализации данных Flourish

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

Какие карты можно сделать в Flourish

В Flourish можно создать разные виды карт:

  1. Картограммы (Projection map).
  2. Карту локатора (Locator Map).
  3. 3D-карты (3D map) для отображения точек с дополнительной информацией.  
  4. Карту дуг (Arc map) для визуализации направлений и перемещений.
  5. Маркерную карту или карту-указатель (Marker map). Отлично подходит для создания гида по региону или городу. 

Как сделать интерактивную карту в Flourish

Процесс создания карты в Flourish состоит из нескольких шагов:

  1. Выбираем шаблон внешнего вида карты.
  2. Загружаем данные во вкладку Data. Число доступных вкладок зависит от выбранного типа карты: данные, локации, связи. Благодаря встроенному шаблону остаётся только загрузить и распределить данные. Импортировать информацию можно из CSV, Excel, JSON и других форматов.
  3. Настраиваем внешний вид карты. Во вкладке Preview можно изменить формат отображения: размер символов, иконок, всплывающих окон с информацией и другие параметры.
  4. Экспортируем карту. Нажимаем Export & Publish в правом верхнем углу и выбираем формат экспорта: картинка, код вставки или HTML-страница для премиум-тарифа.

Рекомендации по визуализации данных на интерактивных картах

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

Советы по визуализации данных:

  1. Выбирайте оптимальный формат карты. Опирайтесь на свои цели и данные, которые будут использоваться для визуализации. Например, для карт дуг нужно много информации, чтобы визуализировать перемещения. 
  2. Не переусердствуйте с дизайном. Лучше выбрать минималистичный формат и сфокусировать внимание пользователей на данных. 
  3. Оставьте минимум элементов. Уберите всю информацию, которая не влияет на информативность визуализации. Карты с большим количеством информации лучше разбить на несколько для удобного взаимодействия. 
  4. Добавьте название и подписи. Без легенды не все читатели смогут понять, что именно хотел сказать автор.
  5. Придерживайтесь классической схемы цветовых ассоциаций. Положительные свойства ассоциируются с зелёным, а отрицательные — с красным.
  6. Используйте единую цветовую гамму. Если на каждом участке будет свой набор цветов, карта перестанет быть целостной.  
Карта покрытия 5G в США

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

интерактивных карт | Геологическая служба США

Всего элементов фильтра: 386

Topics

TopicBiologyCitizen ScienceClimateCoastsEcosystemsEnergyGeologyInformation SystemsMaps and MappingMethods and AnalysesMineralsNatural HazardsOceanOtherPlanetary ScienceScience TechnologyWater

Node Release Date

Year2022202120202019201820172016201520142013201220112010200920082007200620052004200320022001200019991998199719961995

Fulltext search

Этикетка