Как сделать интерактивную карту
Несомненно, Google Maps — ведущий картографический сервис на рынке, предоставляющий услуги GPS-трекинга и навигации. Но сегодня сфера применения карт постоянно расширяется и уже вышла за рамки традиционных прокладки маршрута и поиска объектов.
Очевидно, что услуги геолокации будут играть все более важную роль в будущем и потребность в подобных услугах будет только расти.
С учетом этого в сети уже существует несколько онлайн-сервисов, позволяющих создавать собственные карты, т.е. размещать на них маркеры и пометки, показывать маршруты и выделять области, отрисовывать картограммы (они же теплокарты, от англ. heatmaps) и многое другое.
Созданные карты можно открыть для общего доступа, встроить их на страницу своего сайта или экспортировать в PDF для подготовки печатной продукции — как уже было сказано область применения очень широка.
Итак, давайте перейдем к рассмотрению наиболее популярных картографических сервисов.
Mapme
Mapme — мощный современный инструмент с богатыми возможностями. Позволяет управлять набором всевозможных карт и их содержимым. Поддерживаются тэги и категории, импорт из Excel. Имеет возможность делать карты публичными и встраивать их в веб-приложения.
Стоимость: бесплатно, $99 и $199
Animaps
Интересный сервис, позволяющий создавать анимированные карты для описания путешествия, расписания различных событий и т.п. На карту можно добавлять маркеры, значки, фотографии, заметки, перемещать их, выделять и изменять границы территорий и многое другое. А созданными картами можно делиться, встраивая их в блог или вебсайт.
Click2Map
Стоимость: $39 в месяц
Zee Maps
Zee Maps — онлайн-сервис для создания и публикации карт с целым набором современных и уникальных инструментов — механизмом поиска, личными картами, более 30 всевозможных маркеров и возможностью выделения целых областей, трехуровневым доступом (обычные посетители, члены группы и администраторы). Кроме того имеется возможность привязывать к маркеру различный медиаматериал — фотографии, аудио- и видеозаписи и сохранять карты в PDF и PNG формате для брошюр и презентаций.
Стоимость: бесплатно (до 5 карт) и платно, в зависимости от тарифного плана.
Scribble Maps
Еще один мощный и многофункциональный сервис для создания и публикации различных карт. Также предлагает возможность добавлять маркеры, заметки, собственные виджеты, сохранят карты в виде PDF или изображений. Кроме того есть инструменты для измерения расстояний, площадей, а также механизмы интеграции в десктопные и мобильные приложения.
Имеется плагин для интеграции с Wordpress.
GmapGIS
Эффективный инструмент для создания различных статических карт — спутниковых, гибридных, уличных. Имеется набор инструментов, для установки маркеров и добавлении различной информации, а также экспорта их в KML формат для просмотра в Google Earth.
Heatmap Tool
MapTiler
Использование MapTiler просто, как раз-два-три. Раз — отсканировать бумажную карту или создать ее с помощью GIS-системы (например, AutoCAD MAP 3D). Два — обработать ее MapTiler. Три — опубликовать в интернете, встроив, например, на страницу вашего сайта. При этом обеспечивается интеграция с такими популярными хостингами как Dropbox, Google Drive и Amazon S3.
Стоимость: имеются как бесплатный, так и платные тарифные планы
Mapbox
И в заключении рассмотрим Mapbox — профессиональный сервис для разработчиков. Приложение позволяет создавать векторные карты, отображающие различные данные в реальном времени, имеет мощный механизм поиска по координатам и адресам и предоставляет несколько API и вспомогательных инструментов (например, для преобразования спутниковых снимков в векторные карты, прокладку оптимального маршрута).
Интерактивная карта — это карта, в которой можно изменять масштаб, двигаться в разных направлениях, узнавать о близлежащих ориентирах. Обычная карта в виде статичной картинки не даёт такого широкого функционала.
Интерактивная карта на сайте пример
Если на сайте карты нет, то пользователю придется уходить со страницы и пользоваться сторонними сервисами, что не очень удобно.
Особенно интерактивная карта для сайта необходима компаниям, которые реализуют свой продукт в оффлайне, по конкретному физическому адресу. То есть магазинам, салонам красоты, сервисным центрам, медицинским клиникам и другим организациям, работающим в сервисной индустрии. Для них непонятная локация приводит к потере клиентов.
Удобство пользователей — это только один аспект необходимости карты на сайте. Второй—это позитивное влияние на ранжирование сайта, так как наличие карты является коммерческим фактором. Сайты с хорошо проработанной страницей контактов с максимально полной информацией, включая схему проезда, маршрутов общественного транспорта, позитивно воспринимаются поисковиками и при прочих других факторах занимают более высокие позиции в выдаче.
Разработка SEO-сайтов с пожизненной гарантиейСоздаем невероятные SEO-сайты, оптимизированные по 69 параметрам уже на этапе разработки
Как сделать интерактивную карту для сайта
Сегодня разместить интерактивную карту на сайте не составляет никакого труда, это может сделать даже непрофессионал. Сделать карту можно с помощью специализированных сервисов. Самые популярные из них: Яндекс. Карты, Google Maps и 2ГИС.
Как добавить интерактивную карту Яндекс на сайт
Шаг 3. Дальше оформить карту по своему вкусу. Можно добавить специальный символ для метки, написать её название, с помощью линий выстроить схему проезда, обозначить близлежащий ориентиры. Также в редакторе можно выбрать, в каком виде будет отображаться карта: в виде схемы, изображения со спутника или гибридный вариант.
Как сделать карту в Google Maps
Как вставить интерактивную карту на сайт с помощью 2Гис
Шаг 3. Появившийся код нужно скопировать и вставить в HTML код страницы сайта компании.
При конструировании карты нужно учесть один момент: чтобы масштаб карты не изменялся при скроллинге страницы. На некоторых сайтах когда прокрутка страницы вниз доход до карты, она останавливается, и вместо этого с каждым поворотом колесика мышки увеличивается масштаб карты. Этого ни в коем случае нельзя допускать, так как это крайне негативно влияет на пользовательский опыт с сайтом, это очень неудобно и раздражает пользователей— процент отказов с такой страницы будет очень большим. Чтобы такого не произошло, нужно отключать прокрутку в коде карты.
Нужен настоящий SEO-сайт и интернет-реклама ? Пишите, звоните:
Изучение
Leaflet.js в настоящее время является одной из самых популярных библиотек картографии. Это гибкая, легкая библиотека JavaScript с открытым исходным кодом для создания интерактивных карт.
Leaflet — это структура для представления картографических данных. Данные вместе с базовым слоем карты должны быть предоставлены разработчиками. Карты состоят из слоев мозаики с поддержкой браузера, интерактивностью по умолчанию, возможностями панорамирования и масштабирования. Вы также можете добавить дополнительные пользовательские слои и плагины, а также все сопоставления в Leaflet. Эта библиотека картографии преобразует ваши данные в слои карты и имеет прекрасную поддержку, что делает ее лучшим выбором для большинства разработчиков. Он действительно хорошо работает на основных настольных и мобильных платформах, что делает его идеальной библиотекой JavaScript для мобильных и больших экранных карт.
В этом уроке я покажу вам, как создать красивую интерактивную карту южной части Тихого океана с помощью HTML, CSS и Leaflet, на которой будут выделены самые популярные пляжи. Я собрал данные с веб-сайта TripAdvisor и сопоставил десять лучших пляжей южной части Тихого океана по результатам опроса Travelers ’Choice 2021.
Вы видели несколько интересных онлайн-карт и хотели бы создать их самостоятельно? Следуйте за этим увлекательным путешествием, когда я покажу вам, как построить классную карту и выделить десять лучших пляжей с помощью Leaflet.
Листовка с картой GIF, показывающей различные слои
Создание базовой карты-листовки за четыре шага
Процесс создания простой карты с листовкой несложен. Некоторые базовые знания HTML и JavaScript полезны, но не волнуйтесь, если вы полный новичок. С этой библиотекой JavaScript это довольно просто, и я проведу вас по каждой строчке кода, создавая эту потрясающую, проницательную карту.
Создайте базовую HTML-страницу
Для начала я создаю HTML-страницу для визуализации объекта карты. Затем я добавляю,
чтобы удерживать карту, и присваиваю ей идентификатор, mapна который я буду ссылаться позже. Затем я добавляю некоторые детали стиля, где указываю ширину и высоту как 100vwи 100vh. Это приведет к тому, что карта займет всю страницу:
Ссылка на файлы библиотеки JavaScript Leaflet с открытым исходным кодом
Поскольку я использую библиотеку Leaflet, мне нужно включить необходимые файлы JavaScript и CSS этой библиотеки. Вы можете загрузить файлы напрямую, использовать диспетчер пакетов JavaScript (npm) для локальной установки файлов или использовать размещенную версию из их CDN:
Примечание: integrityатрибут позволяет браузеру проверять выбранный сценарий, чтобы убедиться, что код не загружен, если источник был изменен.
Подготовьте данные
Чтобы построить любую карту, мне нужны значения координат, такие как широта и долгота. Я сверяют широты и долготы для каждой из точек данных с этого сайта здесь. Кроме того, для разработки Leaflet мне также нужен базовый уровень, который я получил с сайта OpenStreetMap.
Настройте карту Leaflet
Теперь переходим к интересной части создания карты путем написания нескольких строк кода. Вы не поверите, сколько строк кода требуется для создания полнофункциональных карт с помощью Leaflet. Эта простота разработки, наряду с тем фактом, что Leaflet является библиотекой JavaScript с открытым исходным кодом, ставит ее на первое место в списке библиотек сопоставления.
Инициализировать карту
Первое, что я делаю, это объявляю переменную карты и инициализирую ее с помощью карты Leaflet. Первый параметр — это идентификатор
ранее определенного. Второй — это то место, где вы хотите, чтобы был центр карты. Последнее — это уровень масштабирования. Я установил масштаб на 3,5, но вы можете установить все, что захотите.
Я использую эти параметры для своей карты, но существует множество различных опций для настройки состояния карты, взаимодействия, анимации и событий, которые вы можете проверить здесь :
Добавьте базовый слой
Затем я добавил слой тайлов, который будет базовым слоем для карты Leaflet. Слой листов — это набор листов, доступ к которым осуществляется через сервер с помощью прямого запроса URL. Этот слой листов добавляет на карту географические границы.
Обязательно укажите для этого текст атрибуции, так как большинство разработчиков это забывают:
Добавьте маркеры по умолчанию
Чтобы обозначить пляжи, я добавляю маркеры. Leaflet предоставляет эту функцию по умолчанию. Поскольку мне нужно показать десять пляжей, я добавлю маркер со значениями широты и долготы соответствующего пляжа:
Вуаля! Совершенно красивая и функциональная карта Leaflet настроена и готова. Разве эта разработка Leaflet не была легкой?
На изображении ниже показано, как все это выглядит на данный момент.
Настройка карты листовок
Одной из полезных функций библиотеки Leaflet JavaScript является возможность быстрого создания базовых карт, а также наличие множества опций для настройки карт. Итак, позвольте мне показать вам четыре способа сделать эту карту Leaflet более информативной и более эстетичной.
1. Отключить масштабирование с помощью прокрутки мыши
2. Добавьте слои на карту.
Еще одна интересная и полезная функция Leaflet — это возможность добавлять несколько векторных слоев. Сохраняя вид улиц как один из слоев, я добавлю еще два слоя тайлов с сайта, который предоставляет бесплатный сервис веб-карт (WMS). Я добавлю слой топографии и слой мест:
Leaflet также предоставляет функцию, позволяющую пользователю управлять слоем для рендеринга. Используя эту функцию, я добавлю кнопку меню параметров в правом верхнем углу страницы, которая позволяет вам выбрать, какой из трех слоев вы хотите наложить на карту:
Наконец, я установлю слой Topography в качестве слоя по умолчанию для рендеринга. В финальной версии я вернусь к просмотру улиц по умолчанию:
3. Настройте маркеры
Маркер по умолчанию отлично подходит для обозначения местоположения, но настраиваемые маркеры придают карте индивидуальный вид, и их довольно легко настроить с помощью библиотеки Leaflet.
Чтобы определить значок, мне нужно указать URL-адрес и размер значка. Я скачаю бесплатный значок SVG и размещу его в своей учетной записи GitHub, где указан URL-адрес. Я установил размер 40, но вы можете оставить его более-менее.
Теперь я просто добавлю этот значок к каждому определенному ранее маркеру, и все. Все маркеры, обозначающие пляж, теперь являются значками пляжа:
Посмотрите, как выглядит эта персонализированная версия, и поиграйте с кодом на CodePen.
Этот значок был всего лишь примером, поэтому следите за более забавным значком, когда я меняю пользовательский маркер в окончательной версии визуализации.
4. Добавить всплывающие окна
Как и всплывающие подсказки, всплывающие окна могут содержать дополнительную информацию о данных. Всплывающее окно на картах отображается при нажатии и может быть настроено в соответствии с вашими предпочтениями. С помощью Leaflet всплывающее окно можно очень легко добавить с помощью функции, называемой bindPopup.
Поскольку мы отображаем пляжи на нашем объекте карты, я решил показать название каждого пляжа во всплывающем окне. Я просто добавляю текст в функцию и привязываю его к каждому из маркеров:
Вот и все! Вы можете найти весь код на CodePen.
Другие настройки с картами Leaflet
Помимо того, что я показал вам в этом руководстве, в Leaflet есть множество вариантов настройки, таких как добавление фигур, таких как круги или многоугольники, настройка всплывающего окна и добавление событий. Вы можете ознакомиться с инструкциями в официальной документации и многочисленными примерами, предоставленными Leaflet.
Плагин открывает целую вселенную настроек, а Leaflet, будучи открытым исходным кодом, имеет множество сторонних плагинов, которые обеспечивают расширенную функциональность исходной карты. Вы можете найти любой плагин, разработанный сообществом Листовка здесь. Вы можете добавить дополнительные фрагменты карты, страницы, шаблоны URL, изображения PNG, изображения фрагментов, расширенные параметры масштабирования и улучшенное взаимодействие фрагментов с помощью подключаемых модулей Leaflet. Также есть возможность использовать API Google для определения местоположения и поиска.
Заключение
Как видите, создавать интерактивные карты с помощью библиотеки JS, такой как Leaflet, очень просто и быстро. Установка проста, работает эффективно, код читается, а все сопоставления удобно обрабатываются библиотекой. Это отличный выбор для создания удобных для мобильных устройств интерактивных карт, так как он хорошо работает со всеми мобильными платформами. Наряду с отличным удобством использования Leaflet поддерживает множество параметров настройки. Пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы или предложения.
Итак, прогуляйтесь по пляжу или начните строить карты. Оба варианта помогут вам расслабиться и развлечься!
Карты сейчас стали необходимым элементом. Они присутствуют практически на каждом веб-сайте. В интерфейсах многих мобильных приложений также часто можно найти карту местности. В Uber-like сервисах без карты и вовсе не обойтись. Как создать уникальную карту и при этом не потратить много времени на дизайн? Наша подборка инструментов для дизайнеров поможет легко создать карту в стиле сервиса, который он разрабатывает.
ТОП бесплатных инструментов для создания карт
Snazzy Maps
Бесплатный инструмент для создания карт Snazzy Maps предназначен для работы с Google Maps. Этот сервис для дизайнеров поможет придать нестандартный вид карте, чтобы сделать ваш дизайн уникальным. Сервис Snazzy Maps позволяет подобрать интересный дизайн карты из уже готовых образцов. Также здесь можно создавать свои уникальные стили для оформления карты местности.
В данном сервисе для дизайнеров продуман рейтинг — можно подобрать готовые стили карт по релевантности, популярности и т.д. Что удобно — в Snazzy Maps есть плагины для адаптации карт на сайт или приложение.
Heat Map Tool
Само название этого инструмента для создания карт говорит за себя. Heat Map Tool предназначен для создания тепловых карт местности. Пользоваться инструментом проще простого — достаточно загрузить карту в формате CSV и выбрать нужные эффекты.
- Цвета и градиенты тепловых зон;
- Цвет фона;
- Радиусы тепловых пятен;
- Масштабы тепловых зон и т.д.
Free vector maps
Ресурс Free vector maps предоставляет бесплатные карты всех городов, регионов, стран и частей мира в векторном формате. На сайте каждый дизайнер может выбрать бесплатную карту для скачивания для вставки в макет, который он разрабатывает. Макеты карт доступны для скачивания бесплатно, достаточно отключить Adblock в браузере — ведь сайт спонсируется за счет рекламы.
Animaps
Пожалуй, один из самых известных ресурсов для создания карт. Правда тут дизайнеру понадобится пройти бесплатную регистрацию и дальше можно работать бесплатно. На Animaps дизайнеры могут создавать анимированные карты и даже делиться ими с друзьями — в таком случае карта будет видна другу в видео-формате. Благодаря возможностям, предоставленным на сайте, каждый дизайнер может создать свою уникальную анимированную карту, добавить к ней фото, значки и многое другое.
Сервис позволяет загружать элементы указателей местности прямо с компьютера. В принципе, инструмент разработан как своего рода расширение для Google Maps, так что данные об объектах на карте всегда будут актуальны. Дизайнеры могут дать волю своей фантазии и создать карту с движущимися значками, всплывающими указателями и т.д.
Scribble maps
ZeeMaps
Бесплатный инструмент для создания интерактивных карт ZeeMaps позволяет дизайнеру без особого труда создать уникальную карту под нужды его макета. Сервис не требует регистрации поддерживает бесплатную и продвинутую версии. В ZeeMaps можно выделять страны (города, зоны) цветами, а также добавлять уникальные маркеры.
Что интересно — этот сервис для дизайнеров позволяет даже вставлять видео на карту. Вы можете экспериментировать с вставками видео и аудио-маркеров, что придает карте особый вид и выделяет среди прочих.
Гитхаб аккаунт с векторными картами
В одной из предыдущих статей мы уже упоминали, что Гитхаб будет полезен не только разработчикам. Этот ресурс также содержит массу возможностей практически для всех сфер работы. Вот, например, ресурс, который собрал множество готовых векторных карт практически всех регионов и даже улиц из разных хранилищ Гитхаба. Дизайнеру нужно только лишь зарегистрироваться и огромное количество карт для работы будут доступны для скачивания в неограниченном количестве.
Создание карт в 2019: что будет актуально?
Современные возможности редактирования карт выходят далеко за рамки создания красивой картинки для макета. Мы можем делать карты удобней для пользователя конкретного продукта и эффективно имплементировать дизайн в продукт.
Для одного из наших проектов в туристической сфере мы стилизовали карту под теплые брендовые цвета, очистили слои от лишней информации и сделали парки более заметными.
Читайте также: