The Walk Management System

🥾 The Walk Management System: 

I’ve decided to walk the length of the Jubilee Line on the London Underground. But before setting off, I figured I needed a WMS (Walk Management System) to help plan and document each stage of this epic hike.

With a little help from ChatGPT and MapLibre GL, I’ve built a lightweight web app that lets me create, edit, and view walking routes - complete with custom markers, images, and notes.

Let’s break it down:

---

✏️ The Editor – edit.html

At the heart of the system is the walk editor page, edit.html. This is an interactive map that can be used to design walking routes and annotate them with rich, location-based information.

🔧 Key Features:

• Draw Routes (Polylines): Click on the map to draw consecutive points that form a walking route. Each route can be named for better organization.

• Add Markers with Images & Text: Drop a marker anywhere and attach an image URL and descriptive text to it - ideal for pointing out landmarks, rest stops, or scenic viewpoints.

• Load Existing Walks: Import previously saved GeoJSON walk files directly into the map for editing or review.

• Save as GeoJSON: Export your custom walk—complete with routes and markers—as a .geojson file for easy sharing or later use.

🧠 How It Works:

• Draw Mode: Click "Draw Route", enter a route name, then click on the map to create the route point-by-point. Each segment is drawn in real-time.

• Marker Mode: Click "Add Marker" to drop custom pins. You can attach an image and a short note that pops up when the marker is clicked.

• GeoJSON-Based: All route and marker data is saved in standard GeoJSON format, making it easy to reuse in other mapping tools.

---

👀 The Viewer – view.html

Once your walk is saved, the view.html page becomes your user-friendly presentation map. Visitors can explore your routes visually, view markers, and even get a summary of total distance and estimated walking time.

🌍 Viewer Highlights:

• Auto-load Walks: Display any saved walk by specifying its file (e.g., walk1.geojson) in the URL or file input.

• Interactive Map: All drawn routes and markers from the GeoJSON are rendered beautifully with MapLibre GL.

• Walk Summary Panel: Automatically calculates and shows:

  • 📏 Total Distance Walked

  • ⏱️ Estimated Walking Time

• Responsive and Clean UI: The walk summary is neatly styled for clarity and blends into the overall map layout.

---

🧹 How It All Fits Together

1. Use edit.html to create or modify a walk.

2. Click "Save Walk" to generate a .geojson file.

3. Open view.html to display that file and interact with the walk.

This separation of concerns means you get both powerful walk editing and a polished public-facing viewer - no backend or database required.

---

🛠️ Under the Hood

• MapLibre GL powers the interactive maps.

• GeoJSON is used for route and marker data storage.

• Client-side JavaScript handles all logic - no server needed.

• Marker Popups include custom HTML, so you can embed images and rich text descriptions.

---

🚀 Ready to Explore?

You can clone the entire WMS (Walk Management System) package from its Glitch page. Once cloned, simply upload any images you want to use into the Assets folder, then copy and paste their URLs into the edit.html interface.

By default, view.html is set up to map data from walk1.geojson, which is saved in the /public folder. You can easily modify view.html to work with any GeoJSON file stored in that folder. Once your custom file is working in view.html, you can edit it using the edit.html interface.

For example, after completing another stage of my Jubilee Line walk, I can upload walk1.geojson into edit.html, draw in the newly completed route, and add markers and photos. I can then download the updated GeoJSON file and replace the existing walk1.geojson in the /public folder of the Glitch project.