Создать свою карту: Конструктор карт Яндекса

alexxlab

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

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

Что такое shMapper? 

shMapper — бесплатный плагин для WordPress, созданный Теплицей социальных технологий в 2019 году. Расшифровывается как simple human mapper, или простой человечный картограф. С помощью плагина можно сделать интерактивную карту на базе «Яндекс.Карты» или Open Street Maps, на которой любой пользователь сможет поставить свою отметку. Это удобный способ привлечь внимание к социальной проблеме, например, ямам на дорогах, нарушениям на выборах или вырубке лесов. Краудсорсинговые карты, созданные с помощью плагина, также помогают искать сторонников и координировать свои действия с другими активистами и волонтерами.

Основные функции плагина:

  • настройка и отображение карт с маркерами на страницах сайта;
  • получение новых маркеров карты через форму обратной связи;
  • премодерация или постмодерация новых маркеров;
  • загрузка полигонов с помощью экспорта KML-файлов;
  • защита формы при помощи ReCaptcha;
  • загрузка пользовательских значков маркеров.

В последней версии плагина 1.4.8 появился Gutenberg-блок «shMapper Full Screen», который позволяет сделать сайт, на котором карта будет ключевым элементом. Блок совместим с конструктором сайтов «Кандинский» и другими темами WordPress, а также адаптирован для мобильных телефонов. Теперь форма отправки маркеров может накладываться на карту или располагаться под картой и адаптироваться к разной ширине экрана. Можно выбирать положение формы — по центру, слева или справа (и с помощью CSS корректировать попиксельно).

Скриншот сайта rynda.org.

Как сделать сайт-карту

Скачайте и установите плагин shMapper в панели управления вашего сайта на WordPress. Если ваш сайт не на WordPress, вы можете сделать страницу с картой на поддомене вашего основного сайта, на котором развернете WordPress.

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

Скриншот панели управления WordPress.

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

Скриншот панели управления WordPress.

Откройте главную страницу и добавьте на нее блок shMapper из библиотеки Gutenberg-блоков. Больше никаких шорткодов! 

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

Скриншот настроек Gutenberg-блока «shMapper Full Screen».

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

Скриншот настроек Gutenberg-блока «shMapper Full Screen».

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

Скриншот настроек плагина shMapper.

Настройте подвал и шапку вашего сайта.

Скриншот сайта rynda.org.

Ваш сайт готов!

На карту, созданную с помощью плагина shMapper, можно нанести неограниченное количество точек. Все данные доступны для экспорта и импорта.

Примеры использования плагина

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

Вот так выглядит «Карта недоступности».

Скриншот «Карты недоступности».

Еще один пример использования плагина — «Карта победителей борщевиков», которую создала команда проекта «Борщевиктори». Карта помогает сформировать волонтерское сообщество. Основатели проекта предлагают людям взять под свою опеку участок земли, на котором растет борщевик, и не дать ему распространиться. С помощью карты можно найти единомышленников в своем регионе — достаточно оставить свои контакты, чтобы активисты могли связаться друг с другом и спланировать совместные действия. 

Вот так выглядит «Карта победителей борщевиков».

Скриншот карты borshevictory.ru

А какую проблему будете решать вы? Скачайте shMapper и создайте свою карту помощи.

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

Google, Yandex, Microsoft и прочие гиганты продвигают свои картографические сервисы как только позволяет их бюджет. OpenStreetMap не отстаёт стараниями тысяч своих пользователей. Но совсем не факт, что именно ваш город уже нанесён на карту с нужной детализацией. В тоже время у вас почти наверняка есть бумажная карта вашего города, которую можно отсканировать. Благодаря нашему сервису этого достаточно, чтобы сделать свою интерактивную карту online!

Более того, речь может идти не о карте города на Земле, а о вымышленном мире. Вам до безумия нравится трилогия «Властелин колец»? Чудесно, вы легко и просто можете сделать свою карту Средиземья и отметить на ней особо значимые места, прикрепить комментарии, описания и даже фотографии с автографом самого Фродо. Или, возможно, вы тратите всё свободное время на изучение игрового мира The Eldest Scrolls IV: Oblivion? Тогда вам будет отличным подспорьем карта, на которой вы сами разметите все форты, пещеры и стоянки, оставите комментарии и добавите скриншоты своих игр. Более того, совсем не обязательно речь должна идти о картах. С тем же успехом можно демонстрировать схему пожарной эвакуации из здания или план палуб корабля. Мы даём инструмент, а уж его использование ограничено только вашей фантазией.

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

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

Итак, приступим!

Общая идея. На входе — изображение карты, на выходе — интерактивная карта.

Алгоритм действий.

  1. Скачать специально разработанную нами программу MapTileCutter. Эта программа предназначена для нарезки изображения карты на небольшие кусочки, которые будут подгружаться в браузер по мере необходимости. Кроме того, она подготовит файл с некоторой служебной информацией необходимой для правильного отображения карты нашим скриптом. Также программа пригодится для подготовки custom maps если вы решили создать свою карту на основе Google Maps, без помощи нашего сервиса.
  2. С помощью программы подготовить карту к загрузке на сервер.

    MapTileCutter

    Необходимо указать «Изображение карты» и «папка для сохранения». Всё остальное — опционально, хотя желательно заполнить всё. «Картинка для фона» — это изображение размером 256х256 точек в формате GIF, оно будет использоваться для вывода по периметру вашей карты (несколько примеров вы найдёте в архиве с программой).

    Когда всё поля заполнены жмите «Подготовить файлы карты». По окончании процесса в указанной папке окажется куча файлов.

  3. Если у вас нет сайта — зарегистрируйте хотя бы бесплатный. Подойдёт практически любой, например, 50webs.com. Некоторые бесплатные хостинги «не отдают» картинки скрипту запущенному с другого сайта, поэтому выбирайте такой, который лишён этого недостатка. На платных хостингах этой проблемы не возникает.
  4. Залейте папку с файлами подготовленными в п.2. на свой сайт. Рекомендуем использовать программу доступа по FTP FileZilla. Для определённости будем считать, что ваш сайт имеет адрес http://yourtestsite.ru, а папка, которую вы залили на сайт называется mymap. В этом случае ваши файлы располагаются по адресу http://yourtestsite.ru/mymap. Если ваш сайт поддерживает протокол HTTPS, то далее в адресах используйте HTTPS вместо HTTP.
  5. Обратитесь по адресу http://fotokarta.info/map/map.php?url=http://Адрес-вашего-сайта/ваша-папка в нашем примере это будет http://fotokarta. info/map/map.php?url=http://yourtestsite.ru/mymap. Это всё! Ваша карта уже действует!
  6. Допишите к URL из п.5 «&d=markers» (в нашем примере адрес будет выглядеть так: http://fotokarta.info/map/map.php?url=http://yourtestsite.ru/mymap&d=markers). В этом режиме вы можете размещать на карте маркеры (щелчком на карте, также маркеры можно перетаскивать мышью) и в редакторе справа вводить к ним описания, выбирать изображение маркера из списка доступных. Не забывайте нажимать иконку с дискетой (сохранить) по окончании редактирования каждого маркера.

    Параметры маркера на карте

  7. Для пользователей карта будет открываться в том масштабе и в той позиции, в которых вы закончите редактирование. Поэтому не забудьте о необходимости выбрать нужный масштаб и положение центра карты заканчивая работу.
  8. На карте могу выводиться маркеры с разными иконками, удобно иметь возможность скрыть/показать сразу все маркеры с конкретной иконкой. Чтобы дать пользователям такую возможность установите галочку «Показывать список типов маркеров». Если нужна возможность видеть список текстов введённых как описание маркеров и быстро переходить к соответствующему маркеру на карте, установите галочку «Показывать список маркеров».
  9. Когда все маркеры расставлены/отредактированы, положение и масштаб карты заданы, параметры определены нажмите кнопку «получить файл маркеров». Скопируйте текст из открывшегося окна и сохраните в файл markers.js. Загрузите этот файл в ту же папку вашего сайта, где уже лежат кусочки карты.
  10. Обратившись по адресу вида
    //fotokarta.info/map/map.php?url=http://Адрес-вашего-сайта/ваша-папка&m=markers     вы увидите свою карту с отмеченными вами местами. При щелчке на маркере в открывшемся окошке будет выведено ваше примечание к нему.

Примечание: совсем не обязательно использовать имя «markers». Вы можете использовать любое имя файла. Более того, можно использовать несколько файлов маркеров с одной картой для вывода на ней объектов разных типов (например, http://…. &m=cinema — кинотеатры (имя файла cinema.js), http://….&m=school — школы (имя файла school.js) и т.д.).

Вставка на свой сайт.

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

<iframe src=»//fotokarta.info/map/map.php?url=https://fotokarta.info/map/map_data/middleearth&m=markers» style=»width:700px;height:500px;border:none;» frameborder=»0″ allowfullscreen></iframe>

Демонстрация
Интерактивная карта Средиземья с несколькими маркерами.

Смотрите также

Европа — Подробно | MapChart

Нужны дополнительные функции, например собственная учетная запись и возможность сохранять в нее карты? Получите новую версию MapChart Plus. Больше не показывать

Используйте колесо мыши для увеличения/уменьшения масштаба:  

Щелкните и перетащите, чтобы переместить карту:  

Дважды щелкните, чтобы увеличить масштаб.

Используйте сочетания клавиш I О или + - для увеличения/уменьшения масштаба и Вт А

С D или стрелки клавиатуры для перемещения по карте.

Используйте элементы управления в правом нижнем углу карты для тех же функций.

Нажмите