Exploring Open-Source Maps in WordPress: A Live Demo

Welcome! You have landed on the live demonstration site for my decoupled WordPress mapping architecture.

If you are a developer looking to break free from expensive, proprietary mapping APIs or trying to figure out how to cleanly integrate interactive maps into a modern WordPress stack, you are in the right place. This site is a working sandbox showcasing what happens when you combine open-source tools with clean, modular code.

The Code and The Tutorial

This live demo is just one part of a larger project. Whether you want to read the step-by-step breakdown of how this architecture was built or you want to clone the repository and try it yourself, you can find all the resources below.

What You Are Looking At

This WordPress installation is actively running a custom-built plugin and child theme that plot interactive map markers without relying on heavy third-party plugins or inline scripts.

Instead of locking location data into a specific theme, this architecture separates the backend data creation from the frontend presentation. It utilizes:

  • Leaflet.js & OpenStreetMap: For a completely free, lightweight, and open-source frontend mapping interface.
  • Secure Custom Fields (SCF): To create dynamic repeater fields, allowing content editors to easily attach multiple coordinates and popups to any post.
  • Decoupled JavaScript: Using wp_localize_script to securely pass backend PHP data to the frontend, keeping the architecture clean and secure.
  • Headless-Ready REST API: A custom endpoint that serves raw JSON location data, perfect for Jamstack frontends like Gatsby, Next.js, or Astro.

Test Drive the Demo

Feel free to explore the site to see the code in action. Check out a Single Event page to see how individual location pins are plotted, or navigate to the Event Archive to see the JavaScript auto-framing feature seamlessly zoom and bound a master map containing every single location across Europe.

Built by Elisavet Triantafyllopoulou.