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

@@ -54,10 +54,6 @@ outputType = "webview"
 localPort = 5000
 externalPort = 80
 
-[[ports]]
-localPort = 35687
-externalPort = 3002
-
 [[ports]]
 localPort = 41923
 externalPort = 3000

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() {
+document.addEventListener('DOMContentLoaded', function() {
-        {% with location=park.location.first %}
+    var mapDataElement = document.getElementById('map-data');
-        initParkMap({{ location.latitude }}, {{ location.longitude }}, "{{ park.name }}");
+    if (mapDataElement) {
-        {% endwith %}
+        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 %}