Обзор возможностей бесплатного плагина shMapper
<em>Обзор возможностей бесплатного плагина shMapper</em>

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

<h4>Что такое shMapper?&nbsp;</h4>

<a href="https://rynda.org/" rel="noreferrer noopener" target="_blank">shMapper</a>&nbsp; бесплатный плагин для WordPress, созданный Теплицей социальных технологий в 2019 году.Расшифровывается как simple human mapper, или простой человечный картограф. С помощью плагина можно сделать интерактивную карту на базе Яндекс.Карты или Open Street Maps, на которой любой пользователь сможет поставить свою отметку. Это удобный способ привлечь внимание к социальной проблеме, например, ямам на дорогах, нарушениям на выборах или вырубке лесов. Краудсорсинговые карты, созданные с помощью плагина, также помогают искать сторонников и координировать свои действия с другими активистами и волонтерами.

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

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

В последней версии плагина 1.4.8 появился Gutenberg-блок shMapper Full Screen, который позволяет сделать сайт, на котором карта будет ключевым элементом. Блок совместим с конструктором сайтов <a href="https://knd.te-st.ru/" rel="noreferrer noopener" target="_blank">Кандинский</a> и другими темами WordPress, а также адаптирован для мобильных телефонов. Теперь форма отправки маркеров может накладываться на карту или располагаться под картой и адаптироваться к разной ширине экрана. Можно выбирать положение формы  по центру, слева или справа (и с помощью CSS корректировать попиксельно).

&nbsp;

<figure class="wp-block-image size-large is-resized is-style-screenshot-with-shadow"><img alt="Скриншот сайта rynda.org." class="wp-image-157655" height="474" sizes="(max-width: 840px) 100vw, 840px" src="https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-07-at-11.21.51-edited.png" srcset="https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-07-at-11.21.51-edited.png 1756w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-07-at-11.21.51-edited-300x169.png 300w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-07-at-11.21.51-edited-760x429.png 760w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-07-at-11.21.51-edited-1536x868.png 1536w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-07-at-11.21.51-edited-600x338.png 600w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-07-at-11.21.51-edited-560x316.png 560w" title="Как создать свою интерактивную карту и найти единомышленников" width="840" />
	<figcaption>СКРИНШОТ САЙТА RYNDA.ORG.</figcaption>
</figure>

&nbsp;</h2>

<h4>Как сделать сайт-карту</h4>

Скачайте и установите плагин&nbsp;<a href="https://ru.wordpress.org/plugins/shmapper-by-teplitsa/" rel="noreferrer noopener" target="_blank">shMapper</a>&nbsp;в панели управления вашего сайта на WordPress. Если ваш сайт не на WordPress, вы можете сделать страницу с картой на поддомене вашего основного сайта, на котором развернете WordPress.

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

<figure class="wp-block-image size-large is-style-screenshot-with-shadow"><img alt="Скриншот панели управления WordPress." class="wp-image-157656" height="379" sizes="(max-width: 760px) 100vw, 760px" src="https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-07-at-11.30.55-760x379.png" srcset="https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-07-at-11.30.55-760x379.png 760w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-07-at-11.30.55-300x150.png 300w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-07-at-11.30.55-1536x766.png 1536w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-07-at-11.30.55-2048x1021.png 2048w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-07-at-11.30.55-560x279.png 560w" title="Как создать свою интерактивную карту и найти единомышленников" width="760" />
	<figcaption>СКРИНШОТ ПАНЕЛИ УПРАВЛЕНИЯ WORDPRESS.</figcaption>
</figure>

&nbsp;

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

<figure class="wp-block-image size-large is-style-screenshot-with-shadow"><img alt="Скриншот панели управления WordPress." class="wp-image-157657" height="462" sizes="(max-width: 760px) 100vw, 760px" src="https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-07-at-11.32.23-760x462.png" srcset="https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-07-at-11.32.23-760x462.png 760w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-07-at-11.32.23-300x183.png 300w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-07-at-11.32.23-1536x935.png 1536w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-07-at-11.32.23-560x341.png 560w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-07-at-11.32.23.png 2018w" title="Как создать свою интерактивную карту и найти единомышленников" width="760" />
	<figcaption>СКРИНШОТ ПАНЕЛИ УПРАВЛЕНИЯ WORDPRESS.</figcaption>
</figure>

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

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

<figure class="wp-block-image size-large is-style-screenshot-with-shadow"><img alt="Скриншот настроек Gutenberg-блока «shMapper Full Screen»." class="wp-image-157659" height="255" sizes="(max-width: 760px) 100vw, 760px" src="https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-04-at-12.30.01-760x255.png" srcset="https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-04-at-12.30.01-760x255.png 760w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-04-at-12.30.01-300x101.png 300w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-04-at-12.30.01-1536x516.png 1536w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-04-at-12.30.01-2048x688.png 2048w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-04-at-12.30.01-560x188.png 560w" title="Как создать свою интерактивную карту и найти единомышленников" width="760" />
	<figcaption>СКРИНШОТ НАСТРОЕК GUTENBERG-БЛОКА SHMAPPER FULL SCREEN.</figcaption>
</figure>

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

<figure class="wp-block-image size-large"><img alt="Скриншот настроек Gutenberg-блока «shMapper Full Screen»." class="wp-image-157736" height="256" sizes="(max-width: 760px) 100vw, 760px" src="https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-08-at-12.00.02-760x256.png" srcset="https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-08-at-12.00.02-760x256.png 760w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-08-at-12.00.02-300x101.png 300w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-08-at-12.00.02-1536x518.png 1536w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-08-at-12.00.02-2048x690.png 2048w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-08-at-12.00.02-560x189.png 560w" title="Как создать свою интерактивную карту и найти единомышленников" width="760" />
	<figcaption>СКРИНШОТ НАСТРОЕК GUTENBERG-БЛОКА SHMAPPER FULL SCREEN.</figcaption>
</figure>

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

<figure class="wp-block-image size-large is-style-screenshot-with-shadow"><img alt="Скриншот настроек плагина shMapper." class="wp-image-157661" height="218" sizes="(max-width: 760px) 100vw, 760px" src="https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-02-at-11.51.28-760x218.png" srcset="https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-02-at-11.51.28-760x218.png 760w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-02-at-11.51.28-300x86.png 300w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-02-at-11.51.28-1536x440.png 1536w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-02-at-11.51.28-2048x587.png 2048w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-02-at-11.51.28-560x160.png 560w" title="Как создать свою интерактивную карту и найти единомышленников" width="760" />
	<figcaption>СКРИНШОТ НАСТРОЕК ПЛАГИНА SHMAPPER.</figcaption>
</figure>

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

<figure class="wp-block-image size-large is-style-screenshot-with-shadow"><img alt="Скриншот сайта rynda.org." class="wp-image-157662" height="594" sizes="(max-width: 760px) 100vw, 760px" src="https://te-st.ru/wp-content/uploads/2022/02/shmapper-fullwidth-map-screenshot-2-760x594.jpg" srcset="https://te-st.ru/wp-content/uploads/2022/02/shmapper-fullwidth-map-screenshot-2-760x594.jpg 760w, https://te-st.ru/wp-content/uploads/2022/02/shmapper-fullwidth-map-screenshot-2-300x235.jpg 300w, https://te-st.ru/wp-content/uploads/2022/02/shmapper-fullwidth-map-screenshot-2-1536x1201.jpg 1536w, https://te-st.ru/wp-content/uploads/2022/02/shmapper-fullwidth-map-screenshot-2-560x438.jpg 560w, https://te-st.ru/wp-content/uploads/2022/02/shmapper-fullwidth-map-screenshot-2.jpg 1903w" title="Как создать свою интерактивную карту и найти единомышленников" width="760" />
	<figcaption>СКРИНШОТ САЙТА RYNDA.ORG.</figcaption>
</figure>

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

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

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

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

Вот так выглядит <a href="https://mgn.mykurgan.ru/sobiraem-dannye/ulitsy/" rel="noreferrer noopener" target="_blank">Карта недоступности</a>.

<figure class="wp-block-image size-large is-style-screenshot-with-shadow"><img alt="Скриншот «Карты недоступности»." class="wp-image-157663" height="507" sizes="(max-width: 760px) 100vw, 760px" src="https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-03-at-18.26.20-760x507.png" srcset="https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-03-at-18.26.20-760x507.png 760w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-03-at-18.26.20-300x200.png 300w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-03-at-18.26.20-1536x1025.png 1536w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-03-at-18.26.20-560x374.png 560w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-03-at-18.26.20.png 1922w" title="Как создать свою интерактивную карту и найти единомышленников" width="760" />
	<figcaption>СКРИНШОТ КАРТЫ НЕДОСТУПНОСТИ.</figcaption>
</figure>

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

Вот так выглядит <a href="https://borshevictory.ru/karta-pobeditelej-borshhevikov/" rel="noreferrer noopener" target="_blank">Карта победителей борщевиков</a>.

<figure class="wp-block-image size-large is-style-screenshot-with-shadow"><img alt="Скриншот карты borshevictory.ru" class="wp-image-157665" height="490" sizes="(max-width: 760px) 100vw, 760px" src="https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-04-at-16.40.52-760x490.png" srcset="https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-04-at-16.40.52-760x490.png 760w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-04-at-16.40.52-300x193.png 300w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-04-at-16.40.52-560x361.png 560w, https://te-st.ru/wp-content/uploads/2022/02/Screenshot-2022-02-04-at-16.40.52.png 1440w" title="Как создать свою интерактивную карту и найти единомышленников" width="760" />
	<figcaption>СКРИНШОТ КАРТЫ BORSHEVICTORY.RU</figcaption>
</figure>

А какую проблему будете решать вы? Скачайте&nbsp;<a href="https://ru.wordpress.org/plugins/shmapper-by-teplitsa/" rel="noreferrer noopener" target="_blank">shMapper</a>&nbsp;и создайте свою карту помощи.
