From 5737e5953d5f903416637ae4a1a90a276ea1470e Mon Sep 17 00:00:00 2001
From: pac7 <47831526-pac7@users.noreply.replit.com>
Date: Mon, 22 Sep 2025 15:18:50 +0000
Subject: [PATCH] Improve park detail page by integrating map data

Refactors the park detail template to pass map coordinates and park name as data attributes to a hidden div, which is then used to initialize the park map via JavaScript.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 48ecdb60-d0f0-4b75-95c9-34e409ef35fb
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
---
 .replit                          |  4 ----
 templates/parks/park_detail.html | 29 ++++++++++++++++++++++++-----
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/.replit b/.replit
index 31acaadd..3520ba63 100644
--- a/.replit
+++ b/.replit
@@ -54,10 +54,6 @@ outputType = "webview"
 localPort = 5000
 externalPort = 80
 
-[[ports]]
-localPort = 35687
-externalPort = 3002
-
 [[ports]]
 localPort = 41923
 externalPort = 3000
diff --git a/templates/parks/park_detail.html b/templates/parks/park_detail.html
index 1883cc64..dbc554aa 100644
--- a/templates/parks/park_detail.html
+++ b/templates/parks/park_detail.html
@@ -261,12 +261,31 @@
 {% if park.location.exists %}
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
 <script src="{% static 'js/park-map.js' %}"></script>
+
+<!-- Map data container -->
+{% with location=park.location.first %}
+{% if location.latitude and location.longitude %}
+<div id="map-data" 
+     data-latitude="{{ location.latitude|floatformat:6|default:'' }}"
+     data-longitude="{{ location.longitude|floatformat:6|default:'' }}"
+     data-park-name="{{ park.name|escapejs|default:'' }}"
+     style="display: none;"></div>
+
 <script>
-    document.addEventListener('DOMContentLoaded', function() {
-        {% with location=park.location.first %}
-        initParkMap({{ location.latitude }}, {{ location.longitude }}, "{{ park.name }}");
-        {% endwith %}
-    });
+document.addEventListener('DOMContentLoaded', function() {
+    var mapDataElement = document.getElementById('map-data');
+    if (mapDataElement) {
+        var latitude = parseFloat(mapDataElement.dataset.latitude);
+        var longitude = parseFloat(mapDataElement.dataset.longitude);
+        var parkName = mapDataElement.dataset.parkName;
+        
+        if (!isNaN(latitude) && !isNaN(longitude) && parkName) {
+            initParkMap(latitude, longitude, parkName);
+        }
+    }
+});
 </script>
 {% endif %}
+{% endwith %}
+{% endif %}
 {% endblock %}