Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Station hinzufügen in Popup implementieren

Browse Source
This commit is contained in:
ISA
2024-04-15 13:11:09 +02:00
parent a6d8c72d17
commit 834b2c7796
33 changed files with 98 additions and 360 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
components/MapComponent.js
View File

@@ -6,12 +6,22 @@ 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) {
// Initialisiere die Karte ohne die Standard-Zoomsteuerung
initialMap = L.map(mapRef.current, {
center: [53.111111, 8.4625],
zoom: 10,
@@ -40,8 +50,7 @@ const MapComponent = () => {
{ text: "Hier zentrieren", callback: centerHere },
],
});
console.log(initialMap);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
L.tileLayer(online ? onlineTileLayer : offlineTileLayer, {
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(initialMap);
@@ -111,26 +120,65 @@ const MapComponent = () => {
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>
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>
`;
L.popup()
.setLatLng(e.latlng)
.setContent(popupContent)
.openOn(e.relatedTarget);
console.log("intialMap in hinzufügen: ", initialMap);
L.popup().setLatLng(e.latlng).setContent(popupContent).openOn(initialMap);
};
function fly(stationValue) {