Update app.js

VBB-Live-Maps-BG/app.js

@@ -1,7 +1,6 @@
 // ====================
 // Leaflet-Karte Setup
 // ====================
-// const map = L.map('map').setView([52.52, 13.405], 13);
 const map = L.map('map', { zoomControl: false }).setView([52.52, 13.405], 13);
 
 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
@@ -9,6 +8,36 @@ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   attribution: '© OpenStreetMap contributors'
 }).addTo(map);
 
+// ====================
+// Custom Zoom Control
+// ====================
+const customZoom = L.Control.extend({
+  options: {
+    position: 'bottomright' // Ecke ändern: 'topleft', 'topright', 'bottomleft', 'bottomright'
+  },
+  onAdd: function (map) {
+    const container = L.DomUtil.create('div', 'custom-zoom');
+
+    const zoomInBtn = L.DomUtil.create('button', 'zoom-btn', container);
+    zoomInBtn.innerHTML = '+';
+    L.DomEvent.on(zoomInBtn, 'click', function (e) {
+      L.DomEvent.stopPropagation(e);
+      map.zoomIn();
+    });
+
+    const zoomOutBtn = L.DomUtil.create('button', 'zoom-btn', container);
+    zoomOutBtn.innerHTML = '−';
+    L.DomEvent.on(zoomOutBtn, 'click', function (e) {
+      L.DomEvent.stopPropagation(e);
+      map.zoomOut();
+    });
+
+    return container;
+  }
+});
+
+map.addControl(new customZoom());
+
 const vehiclesLayer = L.layerGroup().addTo(map);
 const vehicleMarkers = {};
 
@@ -218,3 +247,4 @@ setInterval(updateClock, 1000);
 
 
 
+