pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-20 07:11:08 -05:00
Code Issues Packages Projects Releases Wiki Activity

Improve park detail page map display for better user experience

Browse Source 
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
This commit is contained in:
pac7
2025-09-22 15:20:45 +00:00
parent 5737e5953d
commit 6d30131f2c
2 changed files with 22 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.replit
View File

@@ -62,6 +62,10 @@ externalPort = 3000
localPort = 45245 localPort = 45245
externalPort = 3001 externalPort = 3001
[[ports]]
localPort = 46519
externalPort = 3002
[deployment] [deployment]
deploymentTarget = "autoscale" deploymentTarget = "autoscale"
run = [ run = [

35
templates/parks/park_detail.html
View File

@@ -186,7 +186,19 @@
{% if park.location.exists %} {% if park.location.exists %}
<div class="p-optimized mb-6 bg-white rounded-lg shadow dark:bg-gray-800"> <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> <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> </div>
{% endif %} {% endif %}
@@ -262,22 +274,13 @@
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="{% static 'js/park-map.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> <script>
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
var mapDataElement = document.getElementById('map-data'); var mapElement = document.getElementById('park-map');
if (mapDataElement) { if (mapElement && mapElement.dataset.latitude && mapElement.dataset.longitude) {
var latitude = parseFloat(mapDataElement.dataset.latitude); var latitude = parseFloat(mapElement.dataset.latitude);
var longitude = parseFloat(mapDataElement.dataset.longitude); var longitude = parseFloat(mapElement.dataset.longitude);
var parkName = mapDataElement.dataset.parkName; var parkName = mapElement.dataset.parkName;
if (!isNaN(latitude) && !isNaN(longitude) && parkName) { if (!isNaN(latitude) && !isNaN(longitude) && parkName) {
initParkMap(latitude, longitude, parkName); initParkMap(latitude, longitude, parkName);
@@ -286,6 +289,4 @@ document.addEventListener('DOMContentLoaded', function() {
}); });
</script> </script>
{% endif %} {% endif %}
{% endwith %}
{% endif %}
{% endblock %} {% endblock %}