eine Beispiel Marker einfügen und entferne Standard-Zoomsteuerung

.next/server/pages-manifest.json

@@ -1,7 +1,7 @@
 {
   "/_app": "pages/_app.js",
-  "/_document": "pages/_document.js",
   "/_error": "pages/_error.js",
+  "/_document": "pages/_document.js",
   "/": "pages/index.js",
   "/api/locations": "pages/api/locations.js"
 }

.next/static/chunks/webpack.js

@@ -153,7 +153,7 @@
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	!function() {
-/******/ 		__webpack_require__.h = function() { return "7f1801e1af722742"; }
+/******/ 		__webpack_require__.h = function() { return "0f7a0a107ffd3df9"; }
 /******/ 	}();
 /******/ 	
 /******/ 	/* webpack/runtime/global */

.next/static/webpack/50d24096472da196.webpack.hot-update.json

@@ -0,0 +1 @@
+{"c":["webpack","components_MapComponent_js"],"r":[],"m":[]}

.next/static/webpack/7dfe351ff7f53003.webpack.hot-update.json

@@ -1 +0,0 @@
-{"c":["webpack","components_MapComponent_js"],"r":[],"m":["./node_modules/leaflet-contextmenu/dist/leaflet.contextmenu.css","./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[6].oneOf[12].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[6].oneOf[12].use[2]!./node_modules/leaflet-contextmenu/dist/leaflet.contextmenu.css"]}

.next/static/webpack/d498b704493928ba.webpack.hot-update.json

@@ -0,0 +1 @@
+{"c":["webpack"],"r":[],"m":[]}

.next/static/webpack/webpack.0e74aa54b34d9d23.hot-update.js

@@ -11,7 +11,7 @@ self["webpackHotUpdate_N_E"]("webpack",{},
 /******/ function(__webpack_require__) { // webpackRuntimeModules
 /******/ /* webpack/runtime/getFullHash */
 /******/ !function() {
-/******/ 	__webpack_require__.h = function() { return "7dfe351ff7f53003"; }
+/******/ 	__webpack_require__.h = function() { return "0f7a0a107ffd3df9"; }
 /******/ }();
 /******/ 
 /******/ }

.next/static/webpack/webpack.50d24096472da196.hot-update.js

@@ -11,7 +11,7 @@ self["webpackHotUpdate_N_E"]("webpack",{},
 /******/ function(__webpack_require__) { // webpackRuntimeModules
 /******/ /* webpack/runtime/getFullHash */
 /******/ !function() {
-/******/ 	__webpack_require__.h = function() { return "7f1801e1af722742"; }
+/******/ 	__webpack_require__.h = function() { return "d498b704493928ba"; }
 /******/ }();
 /******/ 
 /******/ }

.next/static/webpack/webpack.d0630572fbbc1a10.hot-update.js

@@ -11,7 +11,7 @@ self["webpackHotUpdate_N_E"]("webpack",{},
 /******/ function(__webpack_require__) { // webpackRuntimeModules
 /******/ /* webpack/runtime/getFullHash */
 /******/ !function() {
-/******/ 	__webpack_require__.h = function() { return "42d50449cc334fe1"; }
+/******/ 	__webpack_require__.h = function() { return "0e74aa54b34d9d23"; }
 /******/ }();
 /******/ 
 /******/ }

.next/static/webpack/webpack.d498b704493928ba.hot-update.js

@@ -1,3 +1,4 @@
+"use strict";
 /*
  * ATTENTION: An "eval-source-map" devtool has been used.
  * This devtool is neither made for production nor for readable output files.
@@ -6,19 +7,12 @@
  * or disable the default devtool with "devtool: false".
  * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
  */
-exports.id = "vendor-chunks/leaflet-contextmenu";
-exports.ids = ["vendor-chunks/leaflet-contextmenu"];
-exports.modules = {
-
-/***/ "./node_modules/leaflet-contextmenu/dist/leaflet.contextmenu.css":
-/*!***********************************************************************!*\
-  !*** ./node_modules/leaflet-contextmenu/dist/leaflet.contextmenu.css ***!
-  \***********************************************************************/
-/***/ (() => {
-
-
-
-/***/ })
-
-};
-;
+self["webpackHotUpdate_N_E"]("webpack",{},
+/******/ function(__webpack_require__) { // webpackRuntimeModules
+/******/ /* webpack/runtime/getFullHash */
+/******/ !function() {
+/******/ 	__webpack_require__.h = function() { return "d0630572fbbc1a10"; }
+/******/ }();
+/******/ 
+/******/ }
+);

components/MapComponent.js

@@ -6,19 +6,23 @@ const MapComponent = () => {
   const mapRef = useRef(null);
   const [map, setMap] = useState(null);
 
+  function addMarker(map) {
+    const marker = L.marker([53.111111, 8.4625]).addTo(map);
+    marker.bindPopup("<b>Hallo Welt!</b><br>Ich bin ein Popup.").openPopup();
+  }
+
   useEffect(() => {
     if (mapRef.current && !map) {
       const initialMap = L.map(mapRef.current, {
         center: [53.111111, 8.4625],
         zoom: 10,
+        zoomControl: false, // Deaktiviere die Standard-Zoomsteuerung
       });
 
       initialMap.on("contextmenu", (event) => {
         L.popup()
           .setLatLng(event.latlng)
-          .setContent(
-            '<p>Right-click menu<br/><button onclick="zoomIn()">Zoom in</button></p>'
-          )
+          .setContent('<p><button onclick="zoomIn()">Zoom in</button></p>')
           .openOn(initialMap);
       });
 
@@ -30,6 +34,7 @@ const MapComponent = () => {
         attribution:
           '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
       }).addTo(initialMap);
+      addMarker(initialMap);
 
       setMap(initialMap);
     }