diff --git a/Anson-Projects/wiki-data/js/mapkit-init.js b/Anson-Projects/wiki-data/js/mapkit-init.js
index d9a673bdc..798fa8572 100644
--- a/Anson-Projects/wiki-data/js/mapkit-init.js
+++ b/Anson-Projects/wiki-data/js/mapkit-init.js
@@ -181,6 +181,10 @@ class MapKitManager {
const distanceKm = (article.dist / 1000).toFixed(1);
const wikipediaUrl = `https://en.wikipedia.org/wiki/${encodeURIComponent(article.title)}`;
+ // Platform-agnostic navigation URL using geo: URI scheme
+ // Falls back to Google Maps if geo: isn't supported
+ const navUrl = `https://maps.google.com/?q=${article.lat},${article.lon}`;
+
const icon = article.distanceMode === 'walking' ? '🚶' : '🚗';
const distanceDisplay = `${distanceKm} km ${icon}`;
@@ -204,9 +208,14 @@ class MapKitManager {
${article.description ? `` : ''}
${helpNeeded}
-
+
`;
diff --git a/Anson-Projects/wiki-data/styles.css b/Anson-Projects/wiki-data/styles.css
index 5564b6350..fcc96d637 100644
--- a/Anson-Projects/wiki-data/styles.css
+++ b/Anson-Projects/wiki-data/styles.css
@@ -260,6 +260,12 @@ select:hover {
line-height: 1.4;
}
+.popup-actions {
+ display: flex;
+ gap: 0.5rem;
+ margin-top: 0.75rem;
+}
+
.popup-link {
display: inline-block;
background: #007AFF;
@@ -270,12 +276,31 @@ select:hover {
font-size: 0.9rem;
font-weight: 500;
transition: background-color 0.2s;
+ flex: 1;
+ text-align: center;
}
.popup-link:hover {
background: #0056CC;
}
+.popup-nav-link {
+ display: inline-block;
+ background: #34C759;
+ color: white;
+ text-decoration: none;
+ padding: 0.5rem 1rem;
+ border-radius: 6px;
+ font-size: 0.9rem;
+ font-weight: 500;
+ transition: background-color 0.2s;
+ white-space: nowrap;
+}
+
+.popup-nav-link:hover {
+ background: #28A745;
+}
+
.popup-distance {
font-size: 0.8rem;
color: #999;