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);
  const [online, setOnline] = useState(navigator.onLine);
  const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png";
  const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";

  let initialMap = [];

  // Funktionen zur Überwachung der Internetverbindung
  const checkInternet = () => {
    console.log("Checking internet connectivity...");
    fetch("https://tile.openstreetmap.org/1/1/1.png", { method: "HEAD" })
      .then((response) => setOnline(response.ok))
      .catch(() => setOnline(false));
  };
  // Initialisiere die Karte
  useEffect(() => {
    if (mapRef.current && !map) {
      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 },
        ],
      });
      L.tileLayer(online ? onlineTileLayer : offlineTileLayer, {
        attribution:
          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      }).addTo(initialMap);

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

  console.log(map);
  //-----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) => {
    initialMap.flyTo(e.latlng, 12);
  };

  const zoomOut = (e) => {
    fly();
  };
  const centerHere = (e) => {
    initialMap.panTo(e.latlng);
  };

  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, map) => {
    const popupContent = `
      <form id="addStationForm" class="m-0 p-2 w-full">
      <div class="flex items-center mb-4">      
        <label for="name" class="block mr-2 flex-none">Name:</label>
        <input
          type="text"
          id="name"
          name="name"
          placeholder="Name der Station"
          class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
        />
      </div>
      
      <div class="flex items-center mb-4">   
        <label for="type" class="block mr-3 flex-none">Type:</label>
        <input
          type="text"
          id="type"
          name="type"
          placeholder="Typ der Station"
          class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
        />
      </div>
      
      <div class="flex items-center mb-4">
        <label for="lat" class="block mr-2 flex-none">Breitengrad:</label>
        <input
          type="text"
          id="lat"
          name="lat"
          value="${e.latlng.lat.toFixed(5)}"
          readonly
          class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
        />
      </div>
       
      <div class="flex items-center mb-4">   
        <label for="lng" class="block mr-2 flex-none">Längengrad:</label>
        <input
          type="text"
          id="lng"
          name="lng"
          value="${e.latlng.lng.toFixed(5)}"
          readonly
          class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
        />
      </div>
      
      <button
        type="submit"
        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full"
      >
        Station hinzufügen
      </button>
    </form>
    `;
    console.log("intialMap in  hinzufügen: ", initialMap);
    L.popup().setLatLng(e.latlng).setContent(popupContent).openOn(initialMap);
  };

  function fly(stationValue) {
    var x = 51.41321407879154;
    var y = 7.739617925303934;
    var zoom = 7;

    /*  for (var i = 0; i < dataStaticlength; i++) {
      var gisStatics = dataStatic[i];
      if (stationValue === gisStatics.Area_Name) {
        //console.log(gisStatics.X+","+gisStatics.Y);
        x = gisStatics.X;
        y = gisStatics.Y;
      }
    }
    if (y === 7.739617925303934) {
      zoom = 8;
    } */
    initialMap.flyTo([x, y], zoom);

    /* var popup = new L.Popup();
    oms.addListener("click", function (marker) {
      popup.setContent(marker.desc);
      popup.setLatLng(marker.getLatLng());
      map.openPopup(popup);
    });

    for (var i = 0; i < window.mapData.length; i++) {
      var datum = window.mapData[i];
      var loc = new L.LatLng(datum.lat, datum.lon);
      var marker = new L.Marker(loc);
      marker.desc = datum.d;
      map.addLayer(marker);
      //oms.addMarker(marker);  // <-- here
    } */
  }

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

export default MapComponent;