npm Pakete overlapping-marker-spiderfier-leaflet und leaflet.smooth_marker_bouncing benutzt

pages/_app.js

@@ -14,3 +14,20 @@ export default function MyApp({ Component, pageProps }) {
     </>
   );
 }
+
+// Bibliotheken, die in der _app.js-Datei importiert werden, werden auf jeder Seite geladen.
+/* import Script from 'next/script';
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <Script 
+        src="/js/OverlappingMarkerSpiderfier.js" 
+        strategy="beforeInteractive"
+      />
+      <Component {...pageProps} />
+    </>
+  );
+}
+
+export default MyApp; */

pages/api/[...path].js

@@ -3,6 +3,7 @@ import { createProxyMiddleware } from "http-proxy-middleware";
 
 export default createProxyMiddleware({
   target: "http://10.10.0.13", // Ziel-URL des Proxys
+  //target: "http://192.168.10.52:3000", // Ziel-URL des Proxys
   changeOrigin: true,
   pathRewrite: {
     "^/api": "/", // Optional: Entfernt /api aus dem Pfad, wenn das Backend dies nicht erfordert

pages/index.js

@@ -1,17 +1,14 @@
 // pages/index.js
 import { useEffect, useState } from "react";
 import dynamic from "next/dynamic";
-
-
 const MapComponentWithNoSSR = dynamic(
   () => import("../components/MapComponent"),
   { ssr: false }
 );
 
 export default function Home() {
-
-  const [mParam,setMParam] = useState([""]);
-  const [uParam,setUParam] = useState([""]);
+  const [mParam, setMParam] = useState([""]);
+  const [uParam, setUParam] = useState([""]);
 
   const [locations, setLocations] = useState([]);
   const [formData, setFormData] = useState({
@@ -28,19 +25,19 @@ export default function Home() {
   };
 
   useEffect(() => {
-       // Funktion, um URL-Parameter zu holen
-       function getURLParameter(name) {
-        // Nutze URLSearchParams, eine Web API für die Arbeit mit Query-Strings
-        const params = new URLSearchParams(window.location.search);
-        return params.get(name); // Holt den Wert des Parameternamens
-      }
-  
-      // Hole die Parameter 'm' und 'u'
-      setMParam(getURLParameter('m'));
-      setUParam(getURLParameter('u'));
-  
-      // Logge die Werte in der Konsole
-      console.log(`Parameter m: ${mParam}, Parameter u: ${uParam}`);
+    // Funktion, um URL-Parameter zu holen
+    function getURLParameter(name) {
+      // Nutze URLSearchParams, eine Web API für die Arbeit mit Query-Strings
+      const params = new URLSearchParams(window.location.search);
+      return params.get(name); // Holt den Wert des Parameternamens
+    }
+
+    // Hole die Parameter 'm' und 'u'
+    setMParam(getURLParameter("m"));
+    setUParam(getURLParameter("u"));
+
+    // Logge die Werte in der Konsole
+    console.log(`Parameter m: ${mParam}, Parameter u: ${uParam}`);
     loadData();
   }, []);
   const handleAddLocation = async (name, type, lat, lng) => {
@@ -91,7 +88,7 @@ export default function Home() {
           return {
             ...location,
             // Hier musst du ggf. die Formatierung anpassen, je nachdem wie du die Koordinaten speicherst
-            position: `POINT(${newLongitude} ${newLatitude})`
+            position: `POINT(${newLongitude} ${newLatitude})`,
           };
         }
         return location;
@@ -105,7 +102,7 @@ export default function Home() {
         locations={locations}
         onAddLocation={handleAddLocation}
         onLocationUpdate={handleLocationUpdate}
-      />     
+      />
     </div>
   );
-}
+}