app/static/js/main.js

// 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 = `<h4>${feature.properties.name}</h4><p>${feature.properties.info}</p>`;
                        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
    }
});