map issue resolved

2025-08-21 11:04:53 +05:30
parent 27d013e853
commit 602d0ff4b9
1 changed files with 72 additions and 37 deletions
@@ -196,45 +196,80 @@
 {% endblock %}

 {% block extra_js %}
-<!-- Leaflet JS -->
-<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
 <script>
-    $(document).ready(function() {
-        // Initialize map
-        const map = L.map('map').setView([51.505, -0.09], 13);
-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-            attribution: '&copy; OpenStreetMap contributors'
-        }).addTo(map);
-        
-        let marker = null;
-        
-        // Add click event to map
-        map.on('click', function(e) {
-            if (marker) {
-                map.removeLayer(marker);
-            }
-            
-            marker = L.marker(e.latlng).addTo(map)
-                .bindPopup('Selected location').openPopup();
-            
-            // Update form fields
-            $('#id_latitude').val(e.latlng.lat);
-            $('#id_longitude').val(e.latlng.lng);
-            
-            // Reverse geocode to get address
-            fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${e.latlng.lat}&lon=${e.latlng.lng}`)
-                .then(response => response.json())
-                .then(data => {
-                    $('#id_location').val(data.display_name || 'Selected location');
-                });
+document.addEventListener("DOMContentLoaded", () => {
+    let map = null, marker = null;
+
+    // Lazy load Leaflet only when modal opens
+    const ensureLeafletLoaded = () => {
+        return new Promise((resolve) => {
+            if (window.L) return resolve();
+
+            const css = document.createElement("link");
+            css.rel = "stylesheet";
+            css.href = "https://unpkg.com/leaflet@1.9.3/dist/leaflet.css";
+            document.head.appendChild(css);
+
+            const js = document.createElement("script");
+            js.src = "https://unpkg.com/leaflet@1.9.3/dist/leaflet.js";
+            js.onload = resolve;
+            document.body.appendChild(js);
+        });
+    };
+
+    const initMap = () => {
+        if (map) return;
+
+        map = L.map("map", {
+            center: [12.9716, 77.5946],
+            zoom: 13
        });

-        // Add Bootstrap classes to form fields
-        $('input:not([type="file"]), select, textarea').addClass('form-control');
-        $('input[type="file"]').addClass('form-control-file');
-        
-        // Add specific classes to description field
-        $('#id_description').addClass('form-control').attr('rows', '3');
+        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+            attribution: "&copy; OpenStreetMap contributors",
+            maxZoom: 19
+        }).addTo(map);
+
+        map.on("click", (e) => {
+            if (!marker) {
+                marker = L.marker(e.latlng).addTo(map);
+            } else {
+                marker.setLatLng(e.latlng);
+            }
+            marker.bindPopup("Selected location").openPopup();
+
+            // update hidden fields immediately
+            document.getElementById("id_latitude").value = e.latlng.lat.toFixed(6);
+            document.getElementById("id_longitude").value = e.latlng.lng.toFixed(6);
+
+            // defer reverse geocode
+            requestIdleCallback(() => {
+                fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${e.latlng.lat}&lon=${e.latlng.lng}`)
+                    .then(r => r.json())
+                    .then(data => {
+                        document.getElementById("id_location").value =
+                            data?.display_name ||
+                            `Lat: ${e.latlng.lat.toFixed(6)}, Lng: ${e.latlng.lng.toFixed(6)}`;
+                    })
+                    .catch(() => {
+                        document.getElementById("id_location").value =
+                            `Lat: ${e.latlng.lat.toFixed(6)}, Lng: ${e.latlng.lng.toFixed(6)}`;
+                    });
+            });
+        });
+    };
+
+    const modal = document.getElementById("reportIssueModal");
+    modal.addEventListener("shown.bs.modal", async () => {
+        await ensureLeafletLoaded();
+        initMap();
+
+        // fix resize/centering after animation
+        setTimeout(() => {
+            map.invalidateSize();
+            if (marker) map.setView(marker.getLatLng(), 15);
+        }, 200);
    });
+});
 </script>
-{% endblock %}
+{% endblock %}