File size: 2,072 Bytes
6f10462 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
// 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
}
}); |