Custom Mapbox Routes Plugin for WordPress

Описание

Этот плагин предназначен для отображения маршрутов на карте с использованием Mapbox API. Он позволяет кэшировать маршруты на стороне сервера и клиента, чтобы минимизировать количество запросов к Mapbox API и улучшить производительность вашего сайта.

Функции

• Отображение маршрутов на карте с использованием Mapbox.
• Кэширование маршрутов на сервере с использованием WordPress Transients API.
• Кэширование маршрутов на клиенте с использованием localStorage.
• Автоматическое изменение языка карты в зависимости от языка браузера пользователя.

Установка

1. Скопируйте файлы:

   • custom-mapbox.js в директорию вашей темы: /wp-content/themes/THEME_NAME/js/custom-mapbox.js
   • enqueue-scripts.php в директорию вашей темы: /wp-content/themes/THEME_NAME/inc/enqueue-scripts.php
   • config_mapbox.json в директорию вашей темы: /wp-content/themes/THEME_NAME/js/config_mapbox.json
   • routes.json в директорию вашей темы: /wp-content/themes/THEME_NAME/js/routes.json

2. Создайте файлы конфигурации:

   • Создайте файл config_mapbox.json в директории /wp-content/themes/THEME_NAME/js/ на основе примера config_mapbox.json.example и заполните его вашими данными.

   {
     "accessToken": "YOUR_NEW_ACCESS_TOKEN",
     "markerImageUrl": "YOUR_PATH_TO_CUSTOM_MARKER",
     "routesUrl": "/wp-content/themes/THEME_NAME/js/routes.json"
   }

3. Создайте файл routes.json в директории /wp-content/themes/THEME_NAME/js/ на основе примера routes.json.example и заполните его вашими маршрутами.

Как заполнить файл routes.json своими маршрутами:

• Определите уникальные идентификаторы для каждого маршрута: Каждый маршрут должен иметь уникальный идентификатор (id), который будет использоваться для инициализации карты.

• Соберите координаты для каждого маршрута: Координаты должны быть в формате [долгота, широта] и перечислены в порядке следования маршрута.

4. Подключите файл enqueue-scripts.php в functions.php вашей темы:

   // functions.php
   
   // Подключаем файл enqueue-scripts.php
   require_once get_template_directory() . '/inc/enqueue-scripts.php';

5. Добавьте HTML для отображения карты в ваш шаблон:

<div id="map01" class="map"></div>

Структура файлов`

custom-mapbox.js Этот файл содержит весь JavaScript код для инициализации и отображения карт. Он также обрабатывает кэширование маршрутов на стороне клиента.

Путь хранения: /wp-content/themes/THEME_NAME/js/custom-mapbox.js

enqueue-scripts.php Этот файл регистрирует и подключает необходимые стили и скрипты для Mapbox, а также создает REST API endpoints для кэширования маршрутов на сервере.

Путь хранения: /wp-content/themes/THEME_NAME/inc/enqueue-scripts.php

config_mapbox.json Этот файл содержит конфигурационные данные, такие как токен доступа к Mapbox, URL изображения маркера и URL для загрузки маршрутов.

Путь хранения: /wp-content/themes/THEME_NAME/js/config_mapbox.json

routes.json Этот файл содержит данные маршрутов в формате JSON, которые используются для отображения маршрутов на карте.

Путь хранения: /wp-content/themes/THEME_NAME/js/routes.json

Преследуемые цели

• Оптимизация производительности: Минимизация количества запросов к Mapbox API с помощью кэширования данных маршрутов на стороне сервера и клиента.
• Улучшение пользовательского опыта: Автоматическое изменение языка карты в зависимости от языка браузера пользователя (по умолчанию en, если нет в списке поддерживаемых)).

Использование

Инициализация карты:

При загрузке страницы, содержащей элемент с id map## и классом map, плагин инициализирует карту и отображает маршрут, указанный в routes.json.

Кэширование маршрутов:

На сервере: Плагин использует WordPress Transients API для кэширования данных маршрутов на сервере на 1 месяц (по умолчанию). На клиенте: Плагин использует localStorage для кэширования данных маршрутов на стороне клиента.

Обновление маршрутов:

Для обновления маршрутов, измените содержимое файла routes.json и очистите кэш на сервере, если необходимо.

Технические детали

• Mapbox API: Используется для получения данных маршрутов и отображения карт.
• WordPress Transients API: Используется для кэширования данных маршрутов на сервере.
• localStorage: Используется для кэширования данных маршрутов на стороне клиента.

Автор

Andrei Siniauski

Лицензия

MIT License