From 9006bf982fd0d118fda48328f819e7a74688a947 Mon Sep 17 00:00:00 2001
From: Serverlele30 <46974281+Serverlele30@users.noreply.github.com>
Date: Thu, 21 Aug 2025 06:38:01 +0000
Subject: [PATCH] Update app.js

---
 VBB-Live-Maps-BG/app.js | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/VBB-Live-Maps-BG/app.js b/VBB-Live-Maps-BG/app.js
index db9c646..0d2b2e0 100644
--- a/VBB-Live-Maps-BG/app.js
+++ b/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);
 
 
 
+