nodeMap/components/MapComponent.js

import React, { useEffect, useRef, useState } from "react";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
import "leaflet-contextmenu";
const MapComponent = () => {
  const mapRef = useRef(null);
  const [map, setMap] = useState(null);

  let initialMap = [];

  useEffect(() => {
    if (mapRef.current && !map) {
      // Initialisiere die Karte ohne die Standard-Zoomsteuerung
      initialMap = L.map(mapRef.current, {
        center: [53.111111, 8.4625],
        zoom: 10,
        zoomControl: false, // Deaktiviere die Standard-Zoomsteuerung
        contextmenu: true,
        contextmenuItems: [
          { text: "Station hinzufügen", callback: showAddStationPopup },
          {
            text: "Station öffnen (Tab)",
            icon: "img/screen_new.png",
            callback: newLink,
          },
          {
            text: "Station öffnen",
            icon: "img/screen_same.png",
            callback: sameLink,
          },
          {
            text: "Koordinaten",
            icon: "img/screen_same.png",
            callback: lata,
          },
          "-", // Divider
          { text: "Reinzoomen", callback: zoomIn },
          { text: "Rauszoomen", callback: zoomOut },
          { text: "Hier zentrieren", callback: centerHere },
        ],
      });

      initialMap.flyTo([53.34399291274182, 7.607860512806846], 12);
      console.log(initialMap);
      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution:
          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      }).addTo(initialMap);

      setMap(initialMap);
    }
  }, [mapRef, map]);

  console.log(map);
  if (map) {
    map.flyTo([53.34399291274182, 7.607860512806846], 18);
  }
  //-----Kontextmenu----------------
  const newLink = (e) => {
    try {
      if (!e.relatedTarget || !e.relatedTarget.options) {
        throw new Error("relatedTarget or options not defined");
      }
      alert("Neues Fenster: " + e.relatedTarget.options.test);
      window
        .open(`../devices/${e.relatedTarget.options.test}`, "_blank")
        .focus();
    } catch (error) {
      console.error("Failed in newLink function:", error);
    }
  };

  const sameLink = (e) => {
    alert(e.relatedTarget.options.test);
    window
      .open("../devices/" + e.relatedTarget.options.test, "_parent")
      .focus();
  };

  const lata = (e) => {
    alert("Breitengrad: " + e.latlng.lat);
  };

  const zoomIn = (e) => {
    console.log(e);
    console.log(initialMap);
    console.log("zoomIn");
    /* if (!map) {
      console.error("Karte ist noch nicht initialisiert in zoomIn.");
      return;
    } */

    initialMap.flyTo(
      {
        lat: 53.34399291274182,
        lng: 7.607860512806846,
      },
      12
    );
  };

  const zoomOut = (e) => {
    if (!map) {
      console.error("Karte ist noch nicht initialisiert in zoomOut.");
      return;
    }
    // Annahme: Du willst beim Rauszoomen die aktuelle Position halten
    // und nur den Zoom-Level ändern. Hier reduzieren wir den Zoom-Level um 1.
    const currentZoom = map.getZoom();
    map.flyTo(e.latlng, map.getZoom() - 1);
  };

  const showCoordinates = (e) => {
    alert("Breitengrad: " + e.latlng.lat + "\nLängengrad: " + e.latlng.lng);
  };
  const showData = (e) => {
    console.log(e);
  };
  const showTalas = (e) => {
    map.addLayer(TALAS);
    loadData();
  };
  const hideTalas = (e) => {
    map.removeLayer(TALAS);
    loadData();
  };
  const showGSM = (e) => {
    map.addLayer(GMA);
    loadData();
  };
  const hideGSM = (e) => {
    map.removeLayer(GMA);
    loadData();
  };
  //-----Kontextmenu----ende------------

  const showAddStationPopup = (e) => {
    const popupContent = L.DomUtil.create("form");
    popupContent.innerHTML = `
      <div style="margin: 0; padding: 0; width: 200px;">
        <label>Name:</label><input type="text" id="name" name="name" placeholder="Name der Station"><br>
        <label>Typ:</label><input type="text" id="type" name="type" placeholder="Typ der Station"><br>
        <label>Breitengrad:</label><input type="text" id="lat" name="lat" value="${e.latlng.lat.toFixed(
          5
        )}" readonly><br>
        <label>Längengrad:</label><input type="text" id="lng" name="lng" value="${e.latlng.lng.toFixed(
          5
        )}" readonly><br>
        <button type="submit">Station hinzufügen</button>
      </div>
    `;
    L.popup()
      .setLatLng(e.latlng)
      .setContent(popupContent)
      .openOn(e.relatedTarget);
  };

  const centerHere = (e) => {
    map.panTo(e.latlng);
  };

  return (
    <div
      id="map"
      ref={mapRef}
      style={{ height: "100vh", width: "100vw", overflow: "hidden" }}
    ></div>
  );
};

export default MapComponent;