// This file contains custom JavaScript for the application, including any interactivity for the map and handling user inputs. document.addEventListener('DOMContentLoaded', function() { const categoryFilter = document.getElementById('category-filter'); const yearFilter = document.getElementById('year-filter'); const crimeFilter = document.getElementById('crime-filter'); const resetButton = document.getElementById('reset-filter'); const mapContainer = document.getElementById('mapContainer'); const infoPanel = document.getElementById('infoPanel'); const closeInfoPanel = document.getElementById('closeInfoPanel'); const infoPanelBody = document.getElementById('infoPanelBody'); // Initialize the map let map = L.map(mapContainer).setView([-7.275, 112.641], 8); // Center on Jawa Timur // Load and display GeoJSON data fetch('/data/geojson/jatim.geojson') .then(response => response.json()) .then(data => { L.geoJSON(data, { onEachFeature: function(feature, layer) { layer.on('click', function() { infoPanelBody.innerHTML = `

${feature.properties.name}

${feature.properties.info}

`; infoPanel.style.display = 'block'; }); } }).addTo(map); }); // Close info panel closeInfoPanel.addEventListener('click', function() { infoPanel.style.display = 'none'; }); // Filter functionality categoryFilter.addEventListener('change', updateMap); yearFilter.addEventListener('change', updateMap); crimeFilter.addEventListener('change', updateMap); resetButton.addEventListener('click', function() { categoryFilter.value = 'all'; yearFilter.value = 'all'; crimeFilter.value = 'all'; updateMap(); }); function updateMap() { // Logic to update the map based on selected filters // This function should filter the GeoJSON data and redraw the map } });