MapControls (Zoom, Nordpfeil, Standort zurück setzen) hinzugefügt

main.js

@@ -6,16 +6,25 @@ import {MapboxOverlay} from '@deck.gl/mapbox';
 import {COORDINATE_SYSTEM} from '@deck.gl/core';
 
 
+const center = [9.209116842757239, 52.26520546238239]
+
 const map = new maplibregl.Map({
     container: 'map',
     style: "https://tiles.openfreemap.org/styles/bright",
-    center: [9.209116842757239, 52.26520546238239],
+    center: center,
     zoom: 17
 });
 
+map.addControl(
+    new maplibregl.NavigationControl({
+        visualizePitch: true,
+        showZoom: true,
+        showCompass: true
+    })
+);
 
 const layer = new PointCloudLayer({
-  data: '/punktwolke subsample test.laz',
+  data: 'punktwolke subsample test.laz',
   loaders: [LASLoader],
 
     // 1. Set the coordinate system to meter offsets
@@ -32,8 +41,7 @@ const overlay = new MapboxOverlay({
   layers: [layer]
 });
 
-map.addControl(overlay);
-
+//map.addControl(overlay);
 
 
 // Hintergrundkarte ändern
@@ -160,6 +168,13 @@ function changeBaseMap(newMap){
   map.setStyle(basemapStyle);
 }
 
+
+// dargestellte Punktwolke verändern
+function changePointCloud(data){
+  layer.data = data;
+}
+
+
 // ausgewähltes Element im BaseMap DropDown Feld
 const selectElement = document.querySelector('select[name="basemap"]');
 selectElement.addEventListener('change', (event) => {
@@ -167,8 +182,14 @@ selectElement.addEventListener('change', (event) => {
 });
 
 
-// Karte auf Nord zurücksetzen
-document.getElementById("resetBtn").addEventListener("click", () => {
-  map.resetNorth();
+
+// ausgewähltes Element im Punktwolken DropDown Feld
+document.querySelector('select[name="pointcloud"]').addEventListener('change', (event) => {
+  changePointCloud(event.target.value);
 });
 
+
+// Auf Zentrum zurück zoomen
+document.getElementById("location").addEventListener("click", () => {
+ map.flyTo({center, zoom: 17 })
+});