// =====================================================================
// WebGIS Citizen Participation Portal — Application Logic
// Initializes Leaflet Map, loads Contributions from the API,
// handles CRUD Workflow, and manages all UI Interactions.
//
// Depends on: MUNICIPALITY Object set in Main Page, Leaflet, Geoman,
// Sidebar, Geocoder, PolylineMeasure, Fullscreen,
// and SweetAlert2 Plugins.
// =====================================================================
// =====================================================================
// Block 1: Configuration and Application State
// =====================================================================
// API Endpoint as relative Path
const API_URL = 'api/contributions.php';
// Username set via Login Modal stored in sessionStorage
let currentUser = sessionStorage.getItem('webgis_user') || '';
// Browser Identification Number for anonymous User Identification stored as Cookie
let browserId = getBrowserId();
function getBrowserId() {
let id = document.cookie.replace(/(?:(?:^|.*;\s*)webgis_browser_id\s*=\s*([^;]*).*$)|^.*$/, '$1');
if (!id) {
id = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
const r = Math.random() * 16 | 0;
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
// Cookie Expiration in one Year
document.cookie = 'webgis_browser_id=' + id + ';path=/;max-age=31536000;SameSite=Lax';
}
return id;
}
// Application State
let map; // Leaflet Map Instance
let sidebar; // Sidebar Instance
let contributionsLayer; // GeoJSON Layer holding all Contributions
let contributionsData = []; // Raw Contribution Data Array
let activeFilters = Object.keys(CATEGORIES); // Active Category Filters
let drawnGeometry = null; // Temporary Storage for Geometry drawn with Geoman
let drawnGeomType = null; // Temporary Storage for Geometry Type
let userVotes = {}; // Tracks User Votes
// =====================================================================
// Block 2: Map Initialization
// =====================================================================
map = L.map('map', {
center: MUNICIPALITY.center,
zoom: MUNICIPALITY.zoom,
minZoom: 10,
maxBounds: [
[MUNICIPALITY.center[0] - 0.25, MUNICIPALITY.center[1] - 0.25],
[MUNICIPALITY.center[0] + 0.25, MUNICIPALITY.center[1] + 0.25]
],
maxBoundsViscosity: 0.8,
zoomControl: false,
attributionControl: true
});
// =====================================================================
// Block 3: Basemaps and Layer Control
// =====================================================================
// Basemap Tile Layers
const basemapOSM = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap ',
maxZoom: 20
});
const basemapCartoDB = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
attribution: '© Carto ',
maxZoom: 20
});
const basemapSatellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: '© Esri ',
maxZoom: 20
});
// Set Default Basemap
basemapCartoDB.addTo(map);
// Layer Control
const basemaps = {
'' +
'
' +
'Titel ' +
'
' +
'
' +
'Beschreibung ' +
'' +
'
' +
'
Keine Beiträge gefunden.
';
return;
}
let html = '';
filtered.forEach(function (f) {
const props = f.properties;
const cat = CATEGORIES[props.category] || CATEGORIES.other;
const date = new Date(props.created_at).toLocaleDateString('de-DE');
html += '' +
'' +
'' +
'
' + escapeHtml(props.title) + '
' +
'
' +
'' + escapeHtml(props.author_name) + ' · ' + date + ' ' +
'' +
' ' +
'
' +
'
' +
'' + categoryIcon(cat) + ' ' + cat.label + ' ' +
' ';
}
container.innerHTML = html;
}
// Toggles a Category Filter on or off
function toggleCategoryFilter(checkbox) {
const category = checkbox.value;
if (checkbox.checked) {
if (activeFilters.indexOf(category) === -1) {
activeFilters.push(category);
}
} else {
activeFilters = activeFilters.filter(function (c) { return c !== category; });
}
// Refilters Map Layer
if (contributionsLayer) {
contributionsLayer.eachLayer(function (layer) {
if (layer.feature) {
const cat = layer.feature.properties.category;
if (activeFilters.indexOf(cat) !== -1) {
const catDef = CATEGORIES[cat] || CATEGORIES.other;
layer.setStyle({
color: catDef.color,
weight: 3,
opacity: 0.8,
fillColor: catDef.color,
fillOpacity: 0.25
});
if (layer.setRadius) layer.setRadius(8);
layer.options.interactive = true;
} else {
layer.setStyle({ opacity: 0, fillOpacity: 0 });
if (layer.setRadius) layer.setRadius(0);
layer.options.interactive = false;
layer.closePopup();
layer.closeTooltip();
}
}
});
}
// Updates List
updateContributionsList();
}
// Updates Statistics in Home Tab
function updateStatistics() {
const container = document.getElementById('stats-container');
const total = contributionsData.length;
// Counts per Category
const counts = {};
contributionsData.forEach(function (f) {
const cat = f.properties.category;
counts[cat] = (counts[cat] || 0) + 1;
});
let html = '' + total + ' Beiträge insgesamt
';
for (const key in CATEGORIES) {
const cat = CATEGORIES[key];
const count = counts[key] || 0;
if (count > 0) {
html += '' +
categoryIcon(cat) + ' ' +
cat.label + ': ' + count +
'
';
}
}
container.innerHTML = html;
}
// =====================================================================
// Block 13: Modals — Welcome, Login, Info, Privacy, Imprint
// =====================================================================
// Welcome Modal shows on new Visits
function checkWelcomeModal() {
const hasVisited = localStorage.getItem('webgis_welcomed');
if (!hasVisited) {
document.getElementById('welcome-modal').style.display = 'flex';
}
}
function closeWelcomeAndShowLogin() {
localStorage.setItem('webgis_welcomed', 'true');
document.getElementById('welcome-modal').style.display = 'none';
showLoginModal();
}
// Login Modal shows new Session
function showLoginModal() {
document.getElementById('login-modal').style.display = 'flex';
document.getElementById('user-name-input').value = currentUser;
document.getElementById('user-name-input').focus();
}
function submitLogin() {
const name = document.getElementById('user-name-input').value.trim();
if (!name) {
Swal.fire('Name eingeben', 'Bitte geben Sie Ihren Namen ein.', 'warning');
return;
}
currentUser = name;
sessionStorage.setItem('webgis_user', currentUser);
document.getElementById('login-modal').style.display = 'none';
// Open Create Modal if Geometry is pending
if (drawnGeometry) {
document.getElementById('create-geom').value = JSON.stringify(drawnGeometry);
document.getElementById('create-geom-type').value = drawnGeomType;
document.getElementById('create-modal').style.display = 'flex';
}
}
function skipLogin() {
document.getElementById('login-modal').style.display = 'none';
}
// Info Modal
function showInfoModal() {
Swal.fire({
title: 'Informationen',
html: 'Das Bürgerbeteiligungsportal gestattet ' +
'Bürgerinnen und Bürgern sowie der Stadtverwaltung, gemeinsam an der Gestaltung von ' +
'' + MUNICIPALITY.name + ' mitzuwirken.
' +
'Bitte tragen Sie Hinweise, Anregungen und Vorschläge ' +
'mithilfe der Zeichenwerkzeuge auf der Karte ein.
',
confirmButtonColor: MUNICIPALITY.primaryColor
});
}
// =====================================================================
// Block 14: Mobile Navigation
// =====================================================================
function toggleMobileNav() {
const nav = document.querySelector('.header-nav');
nav.classList.toggle('open');
}
// Closes Mobile Nav when clicking outside
document.addEventListener('click', function (e) {
const nav = document.querySelector('.header-nav');
const toggle = document.querySelector('.header-menu-toggle');
if (nav.classList.contains('open') && !nav.contains(e.target) && !toggle.contains(e.target)) {
nav.classList.remove('open');
}
});
// Closes Modals on Escape Key
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape') {
document.getElementById('welcome-modal').style.display = 'none';
document.getElementById('login-modal').style.display = 'none';
document.getElementById('create-modal').style.display = 'none';
}
});
// =====================================================================
// Block 15: Utility Functions
// =====================================================================
// Escapes HTML to prevent Cross-Site Scripting (XSS) in Popups and Lists
function escapeHtml(text) {
if (!text) return '';
const div = document.createElement('div');
div.appendChild(document.createTextNode(text));
return div.innerHTML;
}
// Returns a colored Font Awesome Icon HTML String for a Category
function categoryIcon(cat) {
return '  + ')
' +
'