Наш последний проект представлял собой сотрудничество с крупной сетью из более 50 аптек по всей Беларуси. В ходе нашей работы главной задачей было разработать веб-сайт, который не только соответствовал бы стандартам индустрии, но и предоставлял клиентам удобство и информацию, необходимую для успешных покупок.
Важным этапом этого проекта стала разработка интерактивной карты с отмеченными зонами доставки разной стоимости. В данной статье мы расскажем о подходах и шагах, предпринятых для её создания.
Выбор инструмента
Определение подходящего инструмента для создания интерактивной карты зависит от целей, которые преследуются при ее интеграции на сайт. В большинстве случаев наилучшим выбором являются онлайн-конструкторы карт. Например, для реализации наших задач, мы использовали конструктор карт Яндекса.
Создание карты
Для создания карты необходимо иметь или создать аккаунт в Яндексе.
После создания аккаунта или авторизации заходим в конструктор карт по этой ссылке и нажимаем кнопку «Создать карту». После этого перейдем к основному интерфейсу конструктора, где начнем создавать свою карту.
В левой части экрана нужно ввести название карты. Это название станет уникальным идентификатором, чтобы не запутаться в создаваемых нами картах. По желанию, можно задать краткое описание карты.
Основные инструменты
Основные инструменты конструктора расположены в верхнем левом углу карты. Это метки, линии, многоугольники, пробки и слои.
В левом меню, под описанием, есть список объектов, которые уже добавлены на карту и которые можно редактировать.
Доступные инструменты
1. Многоугольники
«Многоугольники» — удобный инструмент для обозначения и выделения замкнутых областей на карте. Многоугольники позволяют создавать закрытые формы, охватывая определенные территории.
Используя этот инструмент, можно легко обозначить границы зон, указать важные районы или области обслуживания. При создании многоугольника, нужно определить последовательность точек, образующих форму, после чего область внутри этих точек становится выделенной на карте.
Также есть возможность настройки стиля многоугольников, а именно цвет заливки, цвет границы, прозрачность и другие параметры. Это позволяет не только выделить нужные области, но и сделать из визуально разными, акцентировать внимание на конкретных областях.
2. Метки
«Метки» предоставляют возможность выделять и отмечать на карте конкретные точки. Используя этот инструмент, можно добавлять разнообразные метки к определенным местам, что делает карту более информативной и удобной для пользователя.
С помощью поиска по адресу или в ручном режиме, двигая карту, находим адрес, затем устанавливаем метку. При необходимости можно выбрать цвет метки, тип, номер или иконку.
3. Линии
«Линии» — эффективное средство для обозначения и визуализации маршрутов, линейных объектов или других важных направлений на карте. Используя этот инструмент, мы можем создавать линии, соединяющие точки и обозначающие направления движения.
При работе с линиями, мы определяем последовательность точек, через которые будет проходить линия. Это может быть полезным для отображения маршрутов доставки, обозначения границ районов обслуживания или выделения других линий.
Дополнительно, в конструкторе предусмотрены возможности настройки стиля линий, включая цвет, толщину, стиль линии и другие параметры. Это позволяет нам не только подчеркнуть важные направления, но и придать им визуальную выразительность.
Инструмент «Линии» похож на «Многоугольники». С помощью линий тоже можно создавать фигуры. Отличие в том, что они создают незамкнутые фигуры.
4. Слои, пробки
В конструкторе предусмотрена возможность выбора отображаемого вида карты — «Схема», «Спутник» или «Гибрид». По умолчанию отображается «Схема». Также можно указать, отображать ли на карте информацию о пробках.
Внедрение карты на сайт
Чтобы карта появилась на сайте, делаем следующее:
1) Нажимаем «Сохранить и продолжить».
2) Выбираем область карты в нужном масштабе, которая будет отражаться на сайте по умолчанию. Размер карты можно отрегулировать вручную, передвигая ползунки видимой области на карте, или прописать в левом меню.
При этом можно сделать так, чтобы карта была статичной — пользователь не сможет менять заданный масштаб карты и двигать её, или интерактивной — пользователь карты сможет масштабировать и двигать карту для удобного ему просмотра.
.gif)
3) Экспортируем карту, получаем на неё ссылку или копируем код — вариант зависит от того, как вы собираетесь использовать карту и внедрять её на сайт.
Код для сайта можно получить в формате JavaScript или Iframe. А ссылку на Яндекс — только, если выбран формат интерактивной карты (не статичной):
Форматы для экспорта: KML, XLSX, GPX, GEO JSON, CSV.
В зависимости от типа файла на карту сохраняются разные виды объектов: например, в CSV-файле сохранятся только метки без линий и многоугольников.
Вывод
Для создания полезной и интерактивной карты необходимо четко определить ее цель. Исходя из этого нужно составить список элементов, которые нужно отобразить, чтобы пользователь получил необходимую информацию. Не стоит перегружать карту лишними данными и дизайнерскими решениями, поскольку ее основная цель — четкая и понятная визуализация географических областей, в пределах которых предоставляются услуги доставки.
Надеемся, что статья была для вас полезной и полученная информация поможет вам в будущем. А ещё мы будем рады помочь вам в вопросах SEO-продвижения, рекламы в интернете, разработки сайтов и запуска продаж на маркетплейсах. Оставляйте заявку ниже:
