WP Manifestindependent plugin directory
manifest / media / map-travels

Travels

WordPress plugin: Travels map block by Hollands Spoor.

by The WordPress Contributors · github.com/hollands-spoor/map-travels

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/hollands-spoor/map-travels/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/hollands-spoor/map-travels ↗

Interactive WordPress block plugin that combines:

  • OpenLayers + OpenStreetMap for map rendering
  • Swiper.js for the bottom toolbar/slide navigation
  • WordPress post content for marker/popover content

The block name is hollands-spoor/travels.

What It Does

Travels renders a full-screen, app-like map experience inside a Gutenberg block:

  • Shows locations as map overlays
  • Connects each location to a Swiper slide in the bottom toolbar
  • Flies the map view to the selected location
  • Opens a styled popover with post content and simple next/prev navigation

Data Source

The plugin currently queries up to 100 regular WordPress posts (post_type = post) via src/writers.php.

The args for getting the used posts are filtered by the 'travel_args' filter so cpt or post taxonomy can be used.

Each post can provide map/display metadata through ACF fields:

  • lat
  • lon
  • zoom
  • location_name
  • show_marker
  • travels_background_color
  • travels_color

A featured image is used in the slide card and popover (if available).

ACF Fields can be imported from here:'../docs/acf-export-travels.json'

Installation

  1. Place this plugin in wp-content/plugins/travels.
  2. Activate Travels in WordPress admin.
  3. Build assets (if needed):
npm install
npm run build
  1. In the block editor, insert the Travels block (hollands-spoor/travels).

Development

From package.json:

  • npm run start for watch mode
  • npm run build for production assets
  • npm run lint:js
  • npm run lint:css

Build output is generated in build.

Notes For Staging / Migration

This plugin was renamed from a previous scaffold and internal prefix.

If migrating old content/configuration, ensure ACF keys are aligned with the current names:

  • travels_background_color
  • travels_color

License

GPL-2.0-or-later