English
Somali
All Districts
All Types
All Status
let map = L.map('map').setView([2.05, 45.33], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19
}).addTo(map);
let markerGroup = L.layerGroup().addTo(map);
let data;
fetch('https://niec.so/wp-content/uploads/vrc_centers.json')
.then(response => response.json())
.then(json => {
data = json;
populateFilters();
renderMarkers();
});
function populateFilters() {
const districtSet = new Set();
const typeSet = new Set();
const statusSet = new Set();
data.forEach(item => {
districtSet.add(item['District']);
typeSet.add(item['Center Type']);
if (item['Status']) statusSet.add(item['Status']);
});
const districtFilter = document.getElementById('districtFilter');
districtSet.forEach(d => {
const option = document.createElement('option');
option.value = d;
option.textContent = d;
districtFilter.appendChild(option);
});
const typeFilter = document.getElementById('typeFilter');
typeSet.forEach(t => {
const option = document.createElement('option');
option.value = t;
option.textContent = t;
typeFilter.appendChild(option);
});
const statusFilter = document.getElementById('statusFilter');
statusSet.forEach(s => {
const option = document.createElement('option');
option.value = s;
option.textContent = s;
statusFilter.appendChild(option);
});
districtFilter.addEventListener('change', renderMarkers);
typeFilter.addEventListener('change', renderMarkers);
statusFilter.addEventListener('change', renderMarkers);
}
function renderMarkers() {
markerGroup.clearLayers();
const districtVal = document.getElementById('districtFilter').value;
const typeVal = document.getElementById('typeFilter').value;
const statusVal = document.getElementById('statusFilter').value;
data.forEach(item => {
if ((districtVal === '' || item['District'] === districtVal) &&
(typeVal === '' || item['Center Type'] === typeVal) &&
(statusVal === '' || item['Status'] === statusVal)) {
const lat = parseFloat(item['Latitude']);
const lon = parseFloat(item['Longitude']);
if (!isNaN(lat) && !isNaN(lon)) {
L.marker([lat, lon]).addTo(markerGroup)
.bindPopup(`${item['Center Name']}District: ${item['District']}
Type: ${item['Center Type']}
Status: ${item['Status'] || 'N/A'}`); } } }); }