🥾 The Stroll Administration System:
I’ve determined to stroll the size of the Jubilee Line on the London Underground. However earlier than setting off, I figured I wanted a WMS (Stroll Administration System) to assist plan and doc every stage of this epic hike.
With a little bit assist from ChatGPT and MapLibre GL, I’ve constructed a light-weight internet app that lets me create, edit, and consider strolling routes – full with customized markers, pictures, and notes.
Let’s break it down:
✏️ The Editor – edit.html
On the coronary heart of the system is the stroll editor web page, edit.html. That is an interactive map that can be utilized to design strolling routes and annotate them with wealthy, location-based info.
🔧 Key Options:
Draw Routes (Polylines): Click on on the map to attract consecutive factors that type a strolling route. Every route will be named for higher group.
Add Markers with Photos & Textual content: Drop a marker anyplace and connect a picture URL and descriptive textual content to it – preferrred for stating landmarks, relaxation stops, or scenic viewpoints.
Load Present Walks: Import beforehand saved GeoJSON stroll information immediately into the map for modifying or evaluation.
Save as GeoJSON: Export your customized stroll—full with routes and markers—as a
.geojsonfile for straightforward sharing or later use.
🧠 How It Works:
Draw Mode: Click on “Draw Route”, enter a route title, then click on on the map to create the route point-by-point. Every section is drawn in real-time.
Marker Mode: Click on “Add Marker” to drop customized pins. You may connect a picture and a brief notice that pops up when the marker is clicked.
GeoJSON-Based mostly: All route and marker information is saved in normal GeoJSON format, making it simple to reuse in different mapping instruments.
👀 The Viewer – view.html
As soon as your stroll is saved, the view.html web page turns into your user-friendly presentation map. Guests can discover your routes visually, view markers, and even get a abstract of complete distance and estimated strolling time.
🌍 Viewer Highlights:
Auto-load Walks: Show any saved stroll by specifying its file (e.g.,
walk1.geojson) within the URL or file enter.Interactive Map: All drawn routes and markers from the GeoJSON are rendered fantastically with MapLibre GL.
Stroll Abstract Panel: Routinely calculates and exhibits:
Responsive and Clear UI: The stroll abstract is neatly styled for readability and blends into the general map format.
🧹 How It All Matches Collectively
Use
edit.htmlto create or modify a stroll.Click on “Save Stroll” to generate a
.geojsonfile.Open
view.htmlto show that file and work together with the stroll.
This separation of considerations means you get each highly effective stroll modifying and a elegant public-facing viewer – no backend or database required.
🛠️ Underneath the Hood
MapLibre GL powers the interactive maps.
GeoJSON is used for route and marker information storage.
Shopper-side JavaScript handles all logic – no server wanted.
Marker Popups embrace customized HTML, so you’ll be able to embed pictures and wealthy textual content descriptions.
🚀 Able to Discover?
You may clone the whole WMS (Stroll Administration System) bundle from its Glitch web page. As soon as cloned, merely add any pictures you wish to use into the Belongings folder, then copy and paste their URLs into the edit.html interface.
By default, view.html is ready as much as map information from walk1.geojson, which is saved within the /public folder. You may simply modify view.html to work with any GeoJSON file saved in that folder. As soon as your customized file is working in view.html, you’ll be able to edit it utilizing the edit.html interface.
For instance, after finishing one other stage of my Jubilee Line stroll, I can add walk1.geojson into edit.html, draw within the newly accomplished route, and add markers and pictures. I can then obtain the up to date GeoJSON file and change the prevailing walk1.geojson within the /public folder of the Glitch venture.
