From 6d30131f2c3483578f1332f2078b4a9315a21254 Mon Sep 17 00:00:00 2001
From: pac7 <47831526-pac7@users.noreply.replit.com>
Date: Mon, 22 Sep 2025 15:20:45 +0000
Subject: [PATCH] Improve park detail page map display for better user
 experience

Refactor park detail template to use data attributes on the map div for latitude, longitude, and park name, simplifying map initialization and handling missing location data gracefully.

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 | 35 ++++++++++++++++----------------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/.replit b/.replit
index 3520ba63..3a20e06b 100644
--- a/.replit
+++ b/.replit
@@ -62,6 +62,10 @@ externalPort = 3000
 localPort = 45245
 externalPort = 3001
 
+[[ports]]
+localPort = 46519
+externalPort = 3002
+
 [deployment]
 deploymentTarget = "autoscale"
 run = [
diff --git a/templates/parks/park_detail.html b/templates/parks/park_detail.html
index dbc554aa..cf37da26 100644
--- a/templates/parks/park_detail.html
+++ b/templates/parks/park_detail.html
@@ -186,7 +186,19 @@
             {% if park.location.exists %}
                 <div class="p-optimized mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
                     <h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white">Location</h2>
-                    <div id="park-map" class="relative rounded-lg" style="z-index: 0;"></div>
+                    {% with location=park.location.first %}
+                    {% if location.latitude is not None and location.longitude is not None %}
+                    <div id="park-map" class="relative rounded-lg" style="z-index: 0;"
+                         data-latitude="{{ location.latitude|default_if_none:'' }}"
+                         data-longitude="{{ location.longitude|default_if_none:'' }}"
+                         data-park-name="{{ park.name|escape }}"></div>
+                    {% else %}
+                    <div class="relative rounded-lg p-4 text-center text-gray-500 dark:text-gray-400">
+                        <i class="fas fa-map-marker-alt text-2xl mb-2"></i>
+                        <p>Location information not available</p>
+                    </div>
+                    {% endif %}
+                    {% endwith %}
                 </div>
             {% endif %}
 
@@ -262,22 +274,13 @@
 <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() {
-    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;
+    var mapElement = document.getElementById('park-map');
+    if (mapElement && mapElement.dataset.latitude && mapElement.dataset.longitude) {
+        var latitude = parseFloat(mapElement.dataset.latitude);
+        var longitude = parseFloat(mapElement.dataset.longitude);
+        var parkName = mapElement.dataset.parkName;
         
         if (!isNaN(latitude) && !isNaN(longitude) && parkName) {
             initParkMap(latitude, longitude, parkName);
@@ -286,6 +289,4 @@ document.addEventListener('DOMContentLoaded', function() {
 });
 </script>
 {% endif %}
-{% endwith %}
-{% endif %}
 {% endblock %}