Интерактивное взаимодействие с цифровыми продуктами во многом облегчает и упрощает жизнь как рядовых пользователей, так и узких специалистов. Электронные карты открыли широкие возможности для развития интерактивности, т.е. двустороннего взаимодействия пользователей и программного комплекса, расширив функциональность и информативность по множеству направлений.
Что такое интерактивные карты?
Интерактивная функция позволяет пользователю двусторонне взаимодействовать с электронной картой, изучая, анализируя и дополняя определенную информацию, привязанную к географическому контексту. Интерактивность предполагает не просто изучение местности и условных обозначений, но и возможность выбирать их по интересующему запросу, будь то отели, АЗС, магазины, рестораны, театры и т.д. Кроме того, двустороннее взаимодействие позволяет не только считывать информацию, но и дополнять ее.
Несмотря на то, что до сих пор ни в ГОСТе, ни каких-либо иных картографических нормативных документах не существует такого официального понятия, как «интерактивные карты», их активно используют в повседневной жизни, и профессиональной деятельности, рядовые люди, коммерческие предприятия и органы государственной власти.
Создание интерактивной карты средствами PowerPoint
Зачем они нужны?
Основное назначение интерактивных карт в систематизации важной для пользователей информации с ее привязкой к геоданным. Группирование информации по слоям дает возможность включать пользовательские фильтры и анализировать конкретную местность по интересующей сфере.
При этом, каждый пользователь может самостоятельно создавать интерактивные карты, дополняя, уточняя и актуализируя нанесенную информацию. Это может быть:
- самостоятельное внесение корректировок и предложений по актуализации данных;
- автоматическая передача данных по предварительному пользовательскому соглашению.
В качестве примера автоматического взаимодействия с интерактивной картой можно привести передачу данных о пробках и средней скорости движения автомобилей по городским улицам. В результате такого коллективного взаимодействия множества водителей с электронным ресурсом на схеме отображается информация о загруженности трафика на тех или иных улицах, которые подсвечиваются зеленым, желтым или красным цветом, сигнализируя другим автомобилистам о реальной ситуации на дорогах в данный момент.
Назначение некоторых интерактивных электронных карт может быть и достаточно узким, сфокусированным на решении определенных коммерческих задач или целей муниципальных властей.
- Нанесение на корпоративную карту адресов клиентов и партнеров.
- Составление маршрутов торговых агентов.
- Оптимизация логистических схем транспортных и оптово-торговых предприятий.
- Интерактивная карта общественного транспорта.
- Оповещение населения о пунктах вакцинации, защиты во время ЧС и т.п.
- Нанесение на карту органов муниципальной и государственной власти с возможностью отсортировать данные по интересующей сфере.
- Экологический мониторинг, включая контроль загрязнения воздуха, почвы и воды в водоемах по отдельным районам.
- Указание контактной информации на корпоративных сайтах.
Особенность таких узкоспециализированных интерактивных карт в возможности установки фильтров по интересующей информации. Для коммерческого использования такое двустороннее взаимодействие дает возможность отслеживать выполнение маршрута встреч с клиентами и партнерами, движение транспорта, логистические процессы и т.п. При этом интерактивность подразумевает нанесение на карту особых геометок как контролирующим, так и подконтрольным субъектам.
Делаем интерактивную карту с помощью Google Maps
Муниципальные, региональные и общегосударственные власти создают информационные интерактивные карты, которые помогают сделать поиск необходимых учреждений, больниц, пунктов вакцинации, образовательных заведений, МФЦ и другие пунктов оказания государственных услуг более простым. При этом каждый их потребитель может оставить отзыв или жалобу о конкретном пункте на схеме и сделать предоставленную на ней информацию более актуальной.
Интерактивные карты – важный рабочий инструмент экологов. Это узкоспециализированные программы экологического мониторинга, которые создают с привлечением актуальной спутниковой информации и снимков. Также это могут быть ресурсы общего пользования, на которых любой пользователь может ознакомиться с реальной экологической обстановкой на конкретной местности или внести свои данные о состоянии воздуха, воды и почвы.
Коммерческое использование интерактивных карт также связано оформлением корпоративных сайтов. Электронная схема проезда позволяет клиентам и партнерам моментально сориентироваться без необходимости ухода на внешние картографические ресурсы. Множество удобных инструментов дают возможность легко создать такую карту, оформить ее по вашему усмотрению и сделать ее максимально удобной для пользователей.
Использование крупных отечественных и мировых ресурсов позволяет расширить возможности и аудиторию конкретной интерактивной карты благодаря более широкому охвату пользователей и расширенному функционалу. Такие ресурсы, как Яндекс, Google и пр. используют сотни миллионов пользователей, благодаря чему целевая аудитория становится транснациональной и охватывает практически весь мир.
Какие бывают интерактивные карты?
Электронные географические системы бывают двух основных типов:
- программно-зависимые;
- программно-независимые.
В первом случае для создания и использования электронных интерактивных карт необходимо обладать соответствующим специальным программным обеспечением. Это во многом неудобно, поскольку требует покупки и установки узкоспециализированных программ, такие как Microstation, Panorama, MapInfo и пр. Кроме того, это делает невозможным использование продукта на другом компьютере или мобильном гаджете.
Программно-независимые интерактивные карты не требуют использования специального программного обеспечения и базируются на удаленных серверах, а доступ к ним осуществляется через интернет. Это самый удобный и популярный вид интерактивных карт, который используется в большинстве мировых ресурсов, включая Google Maps, Яндекс-Карты и прочие.
Кто может их создавать?
Удобный интерфейс общедоступных ресурсов позволяет создавать собственные пользовательские интерактивные карты как для узкоспециализированного, так и широкого использования. Сделать собственную схему определенных пунктов с привязкой их к географическим данным может любой пользователь интернета.
Преимущество программно-независимых интернет-ресурсов именно в общедоступности интерактивных карт, что позволяет их не только создавать, но и править, в т.ч. и вносить предложения по актуализации данных разными пользователями.
Сервисы, позволяющие создавать интерактивные карты
Кроме наиболее используемых Google Maps и Яндекс-Карты, широко распространены и другие ресурсы, которые обладают более расширенным или, наоборот, упрощенным функционалом.
- OpenStreetMap. Позволяет выбирать определенные слои и выгружать целые города и страны.
- 2ГИС. Основная специализация – точные данные о предприятиях и организациях с привязкой к геоданным.
- ZeeMaps. Дает возможность сделать интерактивную карту с большим объемом информации и ее анализом.
- ArcGIS. Профессиональная платформа с наиболее широкими возможностями.
- CartoDB. Еще один профессиональный ресурс, позволяющий сделать многофункциональную интерактивную карту.
- Scribble Maps. Позволяет выгружать географические данные в самых разнообразных форматах.
- StoryMap JS. Дает возможность создавать целую историю на основании пройденного маршрута или прошедших событий с добавлением фотографий и иных материалов.
- Tripline. Также позволяет сделать целую историю с прикреплением фото из Instagram, Facebook, Twitter, Foursquare, Flickr, и других сервисов.
- GeaCron. Ресурс, позволяющий создавать исторические проекты с привязкой к геоданным.
- Windyty. Удобный инструмент, позволяющий сделать интерактивную погодную и климатическую карту.
Заключение
Интерактивные карты стали частью нашей повседневной и профессиональной жизни. Они помогают нам оценить уличный трафик и ситуацию на дорогах, найти нужный пункт и отследить логистические процессы, провести мониторинг экологической ситуации и проинформировать население о пунктах помощи при ЧС.
Компания «УралГеоИнформ» поможет сделать точную и удобную в использовании интерактивную карту в полном соответствии с вашим техническим заданием и необходимой визуализацией. Такие электронные картографические схемы, основанные на глобальных интернет-ресурсах сделают взаимодействие с вашими партнерами или клиентами более продуктивным и динамичным.
Источник: ugi.ru
Какая программа используется для создания интерактивной карты местности
Частная коллекция качественных материалов для тех, кто делает сайты
- Creativo.one2000+ уроков по фотошопу
- Фото-монстр300+ уроков для фотографов
- Видео-смайл200+ уроков по видеообработке
- Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни
- Главная»
- Уроки»
- Уроки jQuery для начинающих
В этой рубрике Вы найдете уроки по Javascript библиотеке jQuery.
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
Автор/переводчик: Станислав Протасевич
Сложность:
Создан: 26 Июля 2017 Просмотров: 39518 Комментариев: 0
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
Автор/переводчик: Станислав Протасевич
Сложность:
Создан: 5 Июня 2017 Просмотров: 22651 Комментариев: 0
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
Автор/переводчик: Станислав Протасевич
Сложность:
Создан: 3 Июня 2017 Просмотров: 15916 Комментариев: 0
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
Автор/переводчик: Станислав Протасевич
Сложность:
Создан: 30 Мая 2017 Просмотров: 18696 Комментариев: 0
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.
Автор/переводчик: Станислав Протасевич
Сложность:
Создан: 24 Мая 2017 Просмотров: 65193 Комментариев: 0
Stimed — стили в зависимости от времени суток
Интересная библиотека с помощью которой можно задать определённым элементам страницы особые стили в зависимости от времени суток.
Источник: ruseller.com
Делаем интерактивный план местности за 15 минут
На Тостере часто спрашивают о том, как сделать интерактивную схему дома, план его внутреннего устройства, возможность выбора этажей или квартир с выводом информации о них, вывод информации о деталях того или иного товара при наведении мыши на них на фотографии и.т.д. Речь там идет не о трехмерной модели, а именно о картинке с возможностью подсветить те или иные детали. Все эти задачи похожие и решаются достаточно просто, но тем не менее вопросы продолжают появляться, так что сегодня мы рассмотрим, как подобные вещи делаются при помощи SVG, графического редактора и щепотки javascript.
Выбор именно SVG обусловлен тем, что это максимально простой для разработки и отладки вариант. Я встречал людей, которые советовали все это делать на canvas, но там гораздо сложнее понять, что происходит, да и координаты всех точек на кривых нужно как-то заранее рассчитать, а здесь – открыл инструменты разработчика и сразу видишь всю структуру, все объекты, с которыми идет взаимодействие, а все остальное можно накликать мышкой в человеко-понятном интерфейсе. Производительность между обычным 2d-канвасом и SVG почти не будет отличаться. WebGL может дать некоторый бонус в этом плане, но и сроки разработки вырастут в разы, не говоря уже о дальнейшей поддержке, что не всегда вписывается в бюджет. Я бы даже сказал “никогда не вписывается”.
В этом туториале мы сделаем что-то вроде виджета для вымышленного сайта по аренде частных домов в каком-то районе, но понятно, что рассматриваемые принципы создания таких вещей применимы к любой тематике.
Начинаем начинать
Я буду все показывать на примере Inkscape, но все те же действия можно провернуть и в любом другом редакторе используя аналогичные функции.
Для работы нам понадобятся два основных диалоговых окна:
- XML Editor (Ctrl+Shift+X или иконка с угловыми скобками) — для просмотра структуры документа в виде разметки и редактирования отдельных элементов.
- Fill and Stroke (Ctrl+Shift+F или иконка с кистью в рамке) — в основном для заливки контуров.
Сразу запускаем их и переходим к созданию документа.
Если вы случайно перетянули их в отдельное окно, то можно кликнуть под верхней рамкой этого окна (где ничего нет), и перетянуть их обратно в основное. Это не совсем интуитивно понятно, но довольно удобно.
Открываем фотографию с видом на район. Мы можем выбрать – вставить саму картинку в виде base64-строки или внешней ссылкой. Поскольку она большая, выбираем ссылку. Путь к картинке потом поменяем руками при внедрении всего в страницы сайта. Создастся SVG-документ, в который фотография будет встроена через тег image.
Для растровых картинок, встроенных в SVG, встроенных в HTML, можно будет использовать lazy loading, так же, как и для обычных картинок на страницах. В этом примере мы не будем останавливаться на таких оптимизациях, но не стоит про них забывать в практической работе.
На текущем этапе видим перед собой примерно такую картину:
Теперь создаем новый слой (Ctrl+Shift+N или Menu > Layer > Add layer). В XML-редакторе видим, что появился обычный элемент g. Пока далеко не ушли, можем задать ему class, который потом будем использовать в скриптах.
Не стоит полагаться на id. Чем сложнее интерфейс, тем проще схлопотать их повторение и получить странные баги. А в нашей задаче от них все равно пользы нет никакой. Так что классы или data-атрибуты – наш выбор.
Если пристально посмотреть на структуру документа в XML-редакторе, то можно заметить, что там много лишнего. Любой более-менее сложный векторный графический редактор будет добавлять что-то свое в документы. Убирать все это руками – дело долгое и неблагодарное, редактор постоянно будет что-то добавлять заново. Так что очистка SVG от мусора производится только в конце работы. И желательно в автоматизированном виде, благо есть готовые варианты, тот же svgo к примеру.
Находим инструмент под названием Draw Bezier curves and Straight Lines (Shift+F6). С его помощью будем рисовать замкнутые контуры вокруг объектов. В нашей задаче нужно обрисовать все здания. Для примера ограничимся шестью, но в реальных условиях стоило бы заранее выделить время для того, чтобы аккуратно обрисовать все необходимые объекты.
Хотя часто бывает, что есть много похожих сущностей – те же этажи на здании могут быть абсолютно идентичными. В таких случаях можно немного ускориться и копипастить кривые.
После того, как обвели нужные здания, возвращаемся в XML-редактор, добавляем классы или, что скорее всего будет даже удобнее, data-атрибуты с индексами для них (можно и с адресами, но т.к. у нас район вымышленный — есть только индексы), и перемещаем все в ранее созданный слой, чтобы все было “разложено по полочкам”. И картинку, кстати, тоже будет полезно туда переместить, чтобы все было в одном месте, но это уже мелочи.
Теперь, выбрав один path – кривую вокруг здания, можно выбрать их все с помощью Ctrl+A или Menu > Edit > Select All и редактировать одновременно. Нужно их все закрасить в окне Fill and Stroke, а заодно там же убрать лишнюю обводку. Ну или добавить ее, если она нужна из соображений дизайна.
Имеет смысл закрасить все контуры каким-нибудь цветом с минимальным значением opacity для них, даже если это не нужно в плане дизайна. Дело в том, что “умные” браузеры считают, что нельзя кликнуть по пустому контуру, а по залитому – можно, даже если никто этой заливки не видит.
В нашем примере оставим небольшую подсветку белым цветом, чтобы лучше видеть, с какими именно зданиями работаем, сохраним все и плавно переместимся в браузер и более привычный редактор кода.
Базовый пример
Сделаем пустую html-страницу, вставим полученную SVG прямо в нее и добавим немного CSS, чтобы ничего не вылезало за границы экрана. Тут даже комментировать нечего.
.map < width: 90%; max-width: 1300px; margin: 2rem auto; border: 1rem solid #fff; border-radius: 1rem; box-shadow: 0 0 .5rem rgba(0, 0, 0, .3); >.map > svg
Вспоминаем, что добавили зданиям классы, и используем их, чтобы CSS был более-менее структурированным.
.building < transition: opacity .3s ease-in-out; >.building:hover < cursor: pointer; opacity: .8 !important; >.building.-available < fill: #0f0 !important; >.building.-reserved < fill: #f00 !important; >.building.-service
Поскольку мы задавали инлайновые стили в Inkscape, в CSS нужно их перебить. Было бы удобнее все делать в CSS? И да, и нет. Зависит от ситуации.
Иногда выбора нет. Например если дизайнер нарисовал много всего разноцветного и переносить все в CSS и раздувать его до невозможности как-то не комильфо. В данном примере я использую “неудобный” вариант, чтобы показать, что и он не особенно то и страшный в контексте решаемой задачи.
Предположим, что к нам прилетели свежие данные по домам, и добавим им разные классы в зависимости от их текущего статуса:
const data = < id_0: < status: ‘service’ >, id_1: < status: ‘available’ >, id_2: < status: ‘reserved’ >, id_3: < status: ‘available’ >, id_4: < status: ‘available’ >, id_5: < status: ‘reserved’ >, messages: < ‘available’: ‘Доступно для аренды’, ‘reserved’: ‘Зарезервировано’, ‘service’: ‘Доступно через 1-2 дня’ >>; const map = document.getElementById(‘my-map’); const buildings = map.querySelectorAll(‘.building’); for (building of buildings) < const const status = data[`id_$`].status; building.classList.add(`-$`); >
Получим что-то такое:
Уже виднеется что-то похожее на то, что нам нужно. На данном этапе мы имеем подсвеченные объекты на плане местности, которые реагируют на наведение мыши. И не составляет труда добавить для них реагирование на нажатие кнопки мыши через стандартный addEventListener.
Leader Line
Часто встречается задача сделать линии, которые будут соединять объекты на карте и какие-то элементы на странице с дополнительной информацией, а также сделать минимальные всплывающие подсказки при наведении на эти самые объекты. Для решения этих задач очень неплохо подходит мини-библиотека leader-line, которая создает векторные стрелочки на любой вкус и цвет.
Давайте добавим к данным цены для всплывающих подсказок и сделаем эти линии.
const data = < id_0: < price: ‘3000’, status: ‘service’ >, id_1: < price: ‘3000’, status: ‘available’ >, id_2: < price: ‘2000’, status: ‘reserved’ >, id_3: < price: ‘5000’, status: ‘available’ >, id_4: < price: ‘2500’, status: ‘available’ >, id_5: < price: ‘2500’, status: ‘reserved’ >, messages: < ‘available’: ‘Доступно для аренды’, ‘reserved’: ‘Зарезервировано’, ‘service’: ‘Производится техническое обслуживание (1-2 дня)’ >>; const map = document.getElementById(‘my-map’); const buildings = map.querySelectorAll(‘.building’); const info = map.querySelector(‘.info’); const lines = []; for (building of buildings) < const const status = data[`id_$`].status; const price = data[`id_$`].price; building.classList.add(`-$`); const line = new LeaderLine( LeaderLine.pointAnchor(building, < x: ‘50%’, y: ‘50%’ >), LeaderLine.pointAnchor(info, < x: ‘50%’, y: 0 >), < color: ‘#fff’, startPlug: ‘arrow1’, endPlug: ‘behind’, endSocket: ‘top’ >); lines.push(line); >
Как можно заметить, ничего сложного не происходит.
У линии есть “места крепления” к элементам. Координаты этих точек относительно элементов обычно удобно определять в процентах. В целом там есть много разных опций, перечислять и запоминать которые не имеет смысла, так что рекомендую просто полистать документацию. Одна из этих опций – startLabel – понадобится нам для создания маленькой всплывающей подсказки с ценой.
const line = new LeaderLine( LeaderLine.pointAnchor(building, < x: ‘50%’, y: ‘50%’ >), LeaderLine.pointAnchor(info, < x: ‘50%’, y: 0 >), < startLabel: LeaderLine.captionLabel(`$р/сутки`, < fontFamily: ‘Rubik Mono One’, fontWeight: 400, offset: [-30, -50], outlineColor: ‘#555’ >), color: ‘#fff’, startPlug: ‘arrow1’, endPlug: ‘behind’, endSocket: ‘top’, hide: true > );
Никто не мешает все подсказки рисовать в графическом редакторе. Если у них предполагается неизменный контент, то это может быть даже удобно. Особенно если есть желание задавать им разное положение для разных объектов.