Gokuldevx/civic-fix
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

map issue resolved

Browse Source
This commit is contained in:
Gokuldevx
2025-08-21 11:04:53 +05:30
parent 27d013e853
commit 602d0ff4b9
1 changed files with 72 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
civicfix/core/templates/core/citizen_dashboard.html
+72 -37
View File
@@ -196,45 +196,80 @@
{% endblock %} {% endblock %}
{% block extra_js %} {% block extra_js %}
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
<script> <script>
$(document).ready(function() { document.addEventListener("DOMContentLoaded", () => {
// Initialize map let map = null, marker = null;
const map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { // Lazy load Leaflet only when modal opens
attribution: '&copy; OpenStreetMap contributors' const ensureLeafletLoaded = () => {
}).addTo(map); return new Promise((resolve) => {
if (window.L) return resolve();
let marker = null;
const css = document.createElement("link");
// Add click event to map css.rel = "stylesheet";
map.on('click', function(e) { css.href = "https://unpkg.com/leaflet@1.9.3/dist/leaflet.css";
if (marker) { document.head.appendChild(css);
map.removeLayer(marker);
} const js = document.createElement("script");
js.src = "https://unpkg.com/leaflet@1.9.3/dist/leaflet.js";
marker = L.marker(e.latlng).addTo(map) js.onload = resolve;
.bindPopup('Selected location').openPopup(); document.body.appendChild(js);
});
// Update form fields };
$('#id_latitude').val(e.latlng.lat);
$('#id_longitude').val(e.latlng.lng); const initMap = () => {
if (map) return;
// Reverse geocode to get address
fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${e.latlng.lat}&lon=${e.latlng.lng}`) map = L.map("map", {
.then(response => response.json()) center: [12.9716, 77.5946],
.then(data => { zoom: 13
$('#id_location').val(data.display_name || 'Selected location');
});
}); });
// Add Bootstrap classes to form fields L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
$('input:not([type="file"]), select, textarea').addClass('form-control'); attribution: "&copy; OpenStreetMap contributors",
$('input[type="file"]').addClass('form-control-file'); maxZoom: 19
}).addTo(map);
// Add specific classes to description field
$('#id_description').addClass('form-control').attr('rows', '3'); 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> </script>
{% endblock %} {% endblock %}