From 5fe7522f5f60248af5f190a4687c9bea32959c3a Mon Sep 17 00:00:00 2001 From: patrickzerhusen Date: Tue, 21 Apr 2026 15:52:41 +0200 Subject: [PATCH 1/6] deactivated mouse position control and polyline measure plugin --- public/index.php | 4 ++-- public/js/app.js | 38 +++++++++++++++++++------------------- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/public/index.php b/public/index.php index 59e6c90..80caa64 100644 --- a/public/index.php +++ b/public/index.php @@ -54,7 +54,7 @@ if (!$municipality) { - + @@ -321,7 +321,7 @@ if (!$municipality) { - + diff --git a/public/js/app.js b/public/js/app.js index a1c1613..ee4cfd6 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -135,31 +135,31 @@ L.Control.geocoder({ }).addTo(map); // Polyline Measure Tool -L.control.polylineMeasure({ - position: 'topright', - unit: 'metres', - showBearings: false, - clearMeasurementsOnStop: false, - showClearControl: true -}).addTo(map); +// L.control.polylineMeasure({ +// position: 'topright', +// unit: 'metres', +// showBearings: false, +// clearMeasurementsOnStop: false, +// showClearControl: true +// }).addTo(map); // Mouse Position Display -var MousePositionControl = L.Control.extend({ - options: { position: 'bottomright' }, +// var MousePositionControl = L.Control.extend({ +// options: { position: 'bottomright' }, - onAdd: function () { - var container = L.DomUtil.create('div', 'mouse-position-display'); - container.innerHTML = 'Lat: , Lng: '; +// onAdd: function () { +// var container = L.DomUtil.create('div', 'mouse-position-display'); +// container.innerHTML = 'Lat: , Lng: '; - map.on('mousemove', function (e) { - container.innerHTML = 'Lat: ' + e.latlng.lat.toFixed(5) + ', Lng: ' + e.latlng.lng.toFixed(5); - }); +// map.on('mousemove', function (e) { +// container.innerHTML = 'Lat: ' + e.latlng.lat.toFixed(5) + ', Lng: ' + e.latlng.lng.toFixed(5); +// }); - return container; - } -}); +// return container; +// } +// }); -new MousePositionControl().addTo(map); +// new MousePositionControl().addTo(map); // GPS Location Button var GpsControl = L.Control.extend({ -- 2.49.1 From 2b3fcb6ebf1f41289d2d570d063b104e5ab02b9f Mon Sep 17 00:00:00 2001 From: patrickzerhusen Date: Tue, 21 Apr 2026 16:13:56 +0200 Subject: [PATCH 2/6] replaced category emojis with fontawesome icons --- public/js/app.js | 32 +++++++++++++++++++------------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/public/js/app.js b/public/js/app.js index ee4cfd6..6fc2aa0 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -21,13 +21,13 @@ var currentUser = sessionStorage.getItem('webgis_user') || ''; // Category Definitions with Labels, Icons, and Colors var CATEGORIES = { - mobility: { label: 'Mobilität', icon: '🚲', color: '#1565C0', faIcon: 'fa-bicycle' }, - building: { label: 'Bauen', icon: '🏗️', color: '#E65100', faIcon: 'fa-helmet-safety' }, - energy: { label: 'Energie', icon: '⚡', color: '#F9A825', faIcon: 'fa-bolt' }, - environment: { label: 'Umwelt', icon: '🌳', color: '#2E7D32', faIcon: 'fa-tree' }, - industry: { label: 'Industrie', icon: '🏭', color: '#6A1B9A', faIcon: 'fa-industry' }, - consumption: { label: 'Konsum', icon: '🛒', color: '#AD1457', faIcon: 'fa-cart-shopping' }, - other: { label: 'Sonstiges', icon: '📌', color: '#546E7A', faIcon: 'fa-map-pin' } + consumption: { label: 'Geschäfte', faIcon: 'fa-cart-shopping', color: '#C00000' }, + building: { label: 'Bauen', faIcon: 'fa-building', color: '#E65100' }, + energy: { label: 'Energie', faIcon: 'fa-bolt', color: '#FFC000' }, + environment: { label: 'Umwelt', faIcon: 'fa-seedling', color: '#92D050' }, + mobility: { label: 'Mobilität', faIcon: 'fa-bus', color: '#0070C0' }, + industry: { label: 'Industrie', faIcon: 'fa-industry', color: '#7030A0' }, + other: { label: 'Sonstiges', faIcon: 'fa-thumbtack', color: '#7F7F7F' } }; // Application State @@ -381,7 +381,7 @@ function bindFeaturePopup(feature, layer) { // Builds Popup on Click var html = '' + '
' + - '' + cat.icon + ' ' + cat.label + '' + + '' + categoryIcon(cat) + ' ' + cat.label + '' + '
' + escapeHtml(props.title) + '
' + (props.description ? '
' + escapeHtml(props.description) + '
' : '') + '
' + @@ -406,7 +406,7 @@ function bindFeaturePopup(feature, layer) { layer.bindPopup(html, { maxWidth: 320, minWidth: 240 }); // Builds Tooltip on Hover - layer.bindTooltip(cat.icon + ' ' + escapeHtml(props.title), { + layer.bindTooltip(categoryIcon(cat) + ' ' + escapeHtml(props.title), { direction: 'top', offset: [0, -10] }); @@ -657,7 +657,7 @@ function updateContributionsList() { html += '' + '
' + '
' + - '' + cat.icon + ' ' + cat.label + '' + + '' + categoryIcon(cat) + ' ' + cat.label + '' + '
' + '
' + escapeHtml(props.title) + '
' + '
' + @@ -720,7 +720,7 @@ function buildCategoryFilter() { ''; } @@ -782,7 +782,7 @@ function updateStatistics() { var count = counts[key] || 0; if (count > 0) { html += '
' + - '' + + categoryIcon(cat) + ' ' + cat.label + ': ' + count + '
'; } @@ -918,6 +918,11 @@ function escapeHtml(text) { return div.innerHTML; } +// Returns a colored Font Awesome Icon HTML String for a Category +function categoryIcon(cat) { + return ''; +} + // ===================================================================== // Block 16: Application Startup @@ -930,7 +935,8 @@ function buildCategoryDropdown() { var cat = CATEGORIES[key]; var option = document.createElement('option'); option.value = key; - option.textContent = cat.icon + ' ' + cat.label; + option.textContent = cat.label; + option.dataset.icon = cat.faIcon; select.appendChild(option); } } -- 2.49.1 From f810ed520ca82a2204ec4324d056bb2fa9d627d1 Mon Sep 17 00:00:00 2001 From: patrickzerhusen Date: Tue, 21 Apr 2026 16:35:35 +0200 Subject: [PATCH 3/6] removed circles in sidebar legend, added contribution icon in layer control --- public/js/app.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/public/js/app.js b/public/js/app.js index 6fc2aa0..2de4bce 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -324,8 +324,7 @@ function loadContributions() { onEachFeature: bindFeaturePopup }).addTo(map); - layerControl.addOverlay(contributionsLayer, 'Beiträge'); - + layerControl.addOverlay(contributionsLayer, ' Beiträge'); // Update Sidebar List and Statistics updateContributionsList(); updateStatistics(); @@ -719,7 +718,6 @@ function buildCategoryFilter() { html += '' + ''; } -- 2.49.1 From 78bdc227817056da197836635e6249357da4869e Mon Sep 17 00:00:00 2001 From: patrickzerhusen Date: Tue, 21 Apr 2026 16:44:46 +0200 Subject: [PATCH 4/6] added layer control icons --- public/js/app.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/public/js/app.js b/public/js/app.js index 2de4bce..c573179 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -83,9 +83,9 @@ basemapCartoDB.addTo(map); // Layer Control var basemaps = { - 'OpenStreetMap': basemapOSM, - 'CartoDB (hell)': basemapCartoDB, - 'Satellit (Esri)': basemapSatellite, + ' Hintergrundkarte (farbe)': basemapOSM, + ' Hintergrundkarte (grau)': basemapCartoDB, + ' Satellitenbild': basemapSatellite, }; var overlays = {}; // Populated later with Contribution Layers @@ -324,7 +324,7 @@ function loadContributions() { onEachFeature: bindFeaturePopup }).addTo(map); - layerControl.addOverlay(contributionsLayer, ' Beiträge'); + layerControl.addOverlay(contributionsLayer, ' Beiträge'); // Update Sidebar List and Statistics updateContributionsList(); updateStatistics(); -- 2.49.1 From a38cf999f20b6f716297b33e8fe3ce443c83e3db Mon Sep 17 00:00:00 2001 From: patrickzerhusen Date: Tue, 21 Apr 2026 16:49:44 +0200 Subject: [PATCH 5/6] adapted basemap attributions --- public/js/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/js/app.js b/public/js/app.js index c573179..f7c23f7 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -69,7 +69,7 @@ var basemapOSM = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png }); var basemapCartoDB = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', { - attribution: '© CARTO', + attribution: '© Carto', maxZoom: 20 }); -- 2.49.1 From 2c02a61791b203cb5c60beb408e9db612e4fc83a Mon Sep 17 00:00:00 2001 From: patrickzerhusen Date: Tue, 21 Apr 2026 17:02:35 +0200 Subject: [PATCH 6/6] refractored all var to const or let --- public/js/app.js | 164 +++++++++++++++++++++++------------------------ 1 file changed, 82 insertions(+), 82 deletions(-) diff --git a/public/js/app.js b/public/js/app.js index f7c23f7..a916029 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -14,13 +14,13 @@ // ===================================================================== // API Endpoint as relative Path -var API_URL = 'api/contributions.php'; +const API_URL = 'api/contributions.php'; // Current User Name, set via Login Modal, stored in sessionStorage -var currentUser = sessionStorage.getItem('webgis_user') || ''; +let currentUser = sessionStorage.getItem('webgis_user') || ''; // Category Definitions with Labels, Icons, and Colors -var CATEGORIES = { +const CATEGORIES = { consumption: { label: 'Geschäfte', faIcon: 'fa-cart-shopping', color: '#C00000' }, building: { label: 'Bauen', faIcon: 'fa-building', color: '#E65100' }, energy: { label: 'Energie', faIcon: 'fa-bolt', color: '#FFC000' }, @@ -31,14 +31,14 @@ var CATEGORIES = { }; // Application State -var map; // Leaflet Map Instance -var sidebar; // Sidebar Instance -var contributionsLayer; // GeoJSON Layer holding all Contributions -var contributionsData = []; // Raw Contribution Data Array -var activeFilters = Object.keys(CATEGORIES); // Active Category Filters -var drawnGeometry = null; // Temporary Storage for Geometry drawn with Geoman -var drawnGeomType = null; // Temporary Storage for Geometry Type -var userVotes = {}; // Tracks User Votes +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 @@ -63,17 +63,17 @@ map = L.map('map', { // ===================================================================== // Basemap Tile Layers -var basemapOSM = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { +const basemapOSM = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap', maxZoom: 20 }); -var basemapCartoDB = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', { +const basemapCartoDB = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', { attribution: '© Carto', maxZoom: 20 }); -var basemapSatellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { +const basemapSatellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { attribution: '© Esri', maxZoom: 20 }); @@ -82,15 +82,15 @@ var basemapSatellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/ basemapCartoDB.addTo(map); // Layer Control -var basemaps = { +const basemaps = { ' Hintergrundkarte (farbe)': basemapOSM, ' Hintergrundkarte (grau)': basemapCartoDB, ' Satellitenbild': basemapSatellite, }; -var overlays = {}; // Populated later with Contribution Layers +const overlays = {}; // Populated later with Contribution Layers -var layerControl = L.control.layers(basemaps, overlays, { +const layerControl = L.control.layers(basemaps, overlays, { position: 'topright', collapsed: true }).addTo(map); @@ -144,11 +144,11 @@ L.Control.geocoder({ // }).addTo(map); // Mouse Position Display -// var MousePositionControl = L.Control.extend({ +// const MousePositionControl = L.Control.extend({ // options: { position: 'bottomright' }, // onAdd: function () { -// var container = L.DomUtil.create('div', 'mouse-position-display'); +// const container = L.DomUtil.create('div', 'mouse-position-display'); // container.innerHTML = 'Lat: , Lng: '; // map.on('mousemove', function (e) { @@ -162,12 +162,12 @@ L.Control.geocoder({ // new MousePositionControl().addTo(map); // GPS Location Button -var GpsControl = L.Control.extend({ +const GpsControl = L.Control.extend({ options: { position: 'topright' }, onAdd: function () { - var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control'); - var button = L.DomUtil.create('a', 'gps-control-button', container); + const container = L.DomUtil.create('div', 'leaflet-bar leaflet-control'); + const button = L.DomUtil.create('a', 'gps-control-button', container); button.href = '#'; button.title = 'Mein Standort'; button.innerHTML = ''; @@ -184,7 +184,7 @@ var GpsControl = L.Control.extend({ new GpsControl().addTo(map); // GPS Location Found Handler -var gpsMarker = null; +let gpsMarker = null; map.on('locationfound', function (e) { if (gpsMarker) { @@ -240,7 +240,7 @@ map.pm.setLang('de'); // Captures drawn Geometry and opens the Create Modal map.on('pm:create', function (e) { - var geojson = e.layer.toGeoJSON().geometry; + const geojson = e.layer.toGeoJSON().geometry; // Determines drawn Geometry Type and normalizes to simple Types if (e.shape === 'Marker') { @@ -280,8 +280,8 @@ map.on('pm:create', function (e) { // Generic API Call Function function apiCall(data, callback) { - var formData = new FormData(); - for (var key in data) { + const formData = new FormData(); + for (const key in data) { formData.append(key, data[key]); } @@ -338,7 +338,7 @@ function loadContributions() { // Style for Point Features (CircleMarkers) function stylePoint(feature, latlng) { - var cat = CATEGORIES[feature.properties.category] || CATEGORIES.other; + const cat = CATEGORIES[feature.properties.category] || CATEGORIES.other; return L.circleMarker(latlng, { radius: 8, @@ -351,7 +351,7 @@ function stylePoint(feature, latlng) { // Style for Line and Polygon Features function styleLinePolygon(feature) { - var cat = CATEGORIES[feature.properties.category] || CATEGORIES.other; + const cat = CATEGORIES[feature.properties.category] || CATEGORIES.other; return { color: cat.color, @@ -368,17 +368,17 @@ function styleLinePolygon(feature) { // ===================================================================== function bindFeaturePopup(feature, layer) { - var props = feature.properties; - var cat = CATEGORIES[props.category] || CATEGORIES.other; + const props = feature.properties; + const cat = CATEGORIES[props.category] || CATEGORIES.other; // Formats Date - var date = new Date(props.created_at); - var dateStr = date.toLocaleDateString('de-DE', { + const date = new Date(props.created_at); + const dateStr = date.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' }); // Builds Popup on Click - var html = '' + + const html = '' + '
' + '' + categoryIcon(cat) + ' ' + cat.label + '' + '
' + escapeHtml(props.title) + '
' + @@ -418,11 +418,11 @@ function bindFeaturePopup(feature, layer) { // CREATE: Submits new Contributions from Modal function submitCreate() { - var category = document.getElementById('create-category').value; - var title = document.getElementById('create-title').value.trim(); - var description = document.getElementById('create-description').value.trim(); - var geom = document.getElementById('create-geom').value; - var geomType = document.getElementById('create-geom-type').value; + const category = document.getElementById('create-category').value; + const title = document.getElementById('create-title').value.trim(); + const description = document.getElementById('create-description').value.trim(); + const geom = document.getElementById('create-geom').value; + const geomType = document.getElementById('create-geom-type').value; // Validates if (!category) { @@ -478,13 +478,13 @@ function closeCreateModal() { // UPDATE: Edits existing Contributions function editContribution(contributionId) { // Finds Contribution in local Data - var contribution = contributionsData.find(function (f) { + const contribution = contributionsData.find(function (f) { return f.properties.contribution_id === contributionId; }); if (!contribution) return; - var props = contribution.properties; + const props = contribution.properties; Swal.fire({ title: 'Beitrag bearbeiten', @@ -570,10 +570,10 @@ function voteContribution(contributionId, voteType) { } // Updates local Vote State - var likeBtn = document.getElementById('vote-like-' + contributionId); - var dislikeBtn = document.getElementById('vote-dislike-' + contributionId); - var likesSpan = document.getElementById('likes-' + contributionId); - var dislikesSpan = document.getElementById('dislikes-' + contributionId); + const likeBtn = document.getElementById('vote-like-' + contributionId); + const dislikeBtn = document.getElementById('vote-dislike-' + contributionId); + const likesSpan = document.getElementById('likes-' + contributionId); + const dislikesSpan = document.getElementById('dislikes-' + contributionId); if (response.action === 'created') { // New Vote — Highlights Button and updates Count @@ -619,16 +619,16 @@ function voteContribution(contributionId, voteType) { // ===================================================================== function updateContributionsList() { - var container = document.getElementById('contributions-list'); - var searchInput = document.getElementById('list-search-input'); - var searchTerm = searchInput ? searchInput.value.toLowerCase() : ''; + const container = document.getElementById('contributions-list'); + const searchInput = document.getElementById('list-search-input'); + const searchTerm = searchInput ? searchInput.value.toLowerCase() : ''; // Filters by Categories and Search Term - var filtered = contributionsData.filter(function (f) { - var props = f.properties; - var matchesCategory = activeFilters.indexOf(props.category) !== -1; - var cat = CATEGORIES[props.category] || CATEGORIES.other; - var matchesSearch = !searchTerm || + const filtered = contributionsData.filter(function (f) { + const props = f.properties; + const matchesCategory = activeFilters.indexOf(props.category) !== -1; + const cat = CATEGORIES[props.category] || CATEGORIES.other; + const matchesSearch = !searchTerm || props.title.toLowerCase().indexOf(searchTerm) !== -1 || (props.description && props.description.toLowerCase().indexOf(searchTerm) !== -1) || props.author_name.toLowerCase().indexOf(searchTerm) !== -1 || @@ -647,11 +647,11 @@ function updateContributionsList() { return; } - var html = ''; + let html = ''; filtered.forEach(function (f) { - var props = f.properties; - var cat = CATEGORIES[props.category] || CATEGORIES.other; - var date = new Date(props.created_at).toLocaleDateString('de-DE'); + const props = f.properties; + const cat = CATEGORIES[props.category] || CATEGORIES.other; + const date = new Date(props.created_at).toLocaleDateString('de-DE'); html += '' + '
' + @@ -708,12 +708,12 @@ document.getElementById('list-search-input').addEventListener('input', function // Builds Category Filter Checkboxes function buildCategoryFilter() { - var container = document.getElementById('category-filter'); - var html = ''; + const container = document.getElementById('category-filter'); + let html = ''; - for (var key in CATEGORIES) { - var cat = CATEGORIES[key]; - var checked = activeFilters.indexOf(key) !== -1 ? 'checked' : ''; + for (const key in CATEGORIES) { + const cat = CATEGORIES[key]; + const checked = activeFilters.indexOf(key) !== -1 ? 'checked' : ''; html += '' + '