Add JavaScript functionality for dynamic UI updates and filtering

- Implemented font color configuration based on numeric values in various sections.
- Added resizing functionality for input fields to accommodate text length.
- Initialized filters on document ready for improved user interaction.
- Created visualization for profile data using fetched dot format.
- Enhanced SQL detail page with click event handling for row navigation.
- Ensured consistent highlighting for code blocks across multiple pages.

staticfiles/js/park-map.js

@@ -1,28 +1,29 @@
-let parkMap = null;
+// Only declare parkMap if it doesn't exist
+window.parkMap = window.parkMap || null;
 
 function initParkMap(latitude, longitude, name) {
     const mapContainer = document.getElementById('park-map');
     
     // Only initialize if container exists and map hasn't been initialized
-    if (mapContainer && !parkMap) {
+    if (mapContainer && !window.parkMap) {
         const width = mapContainer.offsetWidth;
         mapContainer.style.height = width + 'px';
 
-        parkMap = L.map('park-map').setView([latitude, longitude], 13);
+        window.parkMap = L.map('park-map').setView([latitude, longitude], 13);
         
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
             attribution: '© OpenStreetMap contributors'
-        }).addTo(parkMap);
+        }).addTo(window.parkMap);
 
         L.marker([latitude, longitude])
-         .addTo(parkMap)
+         .addTo(window.parkMap)
          .bindPopup(name);
 
         // Update map size when window is resized
         window.addEventListener('resize', function() {
             const width = mapContainer.offsetWidth;
             mapContainer.style.height = width + 'px';
-            parkMap.invalidateSize();
+            window.parkMap.invalidateSize();
         });
     }
 }