added Missing rescuetrack layerx
This commit is contained in:
PxlLoewe
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
import { usePannelStore } from "_store/pannelStore";
|
||||
import { Control, Icon, LatLngExpression } from "leaflet";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
LayerGroup,
|
||||
LayersControl,
|
||||
@@ -18,11 +18,13 @@ import {
|
||||
// @ts-ignore
|
||||
import type { FeatureCollection, Geometry } from "geojson";
|
||||
import L from "leaflet";
|
||||
import LEITSTELLENBERECHE from "./_geojson/Leitstellen_VAR.json";
|
||||
import LEITSTELLENBERECHE from "./_geojson/Leitstellen.json";
|
||||
import WINDFARMS from "./_geojson/Windfarms.json";
|
||||
import { createCustomMarker } from "_components/map/_components/createCustomMarker";
|
||||
import { Station } from "@repo/db";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { getStationsAPI } from "_querys/stations";
|
||||
import "./darkMapStyles.css";
|
||||
|
||||
const RadioAreaLayer = () => {
|
||||
const getColor = (randint: number) => {
|
||||
@@ -195,18 +197,12 @@ const StationsLayer = ({ attribution }: { attribution: Control.Attribution }) =>
|
||||
};
|
||||
|
||||
const EsriSatellite = ({ attribution }: { attribution: Control.Attribution }) => {
|
||||
const accessToken = process.env.NEXT_PUBLIC_ESRI_ACCESS_TOKEN || "";
|
||||
|
||||
const attributionText = "Sources: Esri, TomTom, Garmin, FAO, NOAA, USGS";
|
||||
|
||||
const accessToken = process.env.NEXT_PUBLIC_ESRI_ACCESS;
|
||||
return (
|
||||
<>
|
||||
{/* Satellite Imagery Layer; API KEY PROVIDED BY VAR0002 */}
|
||||
<TileLayer
|
||||
eventHandlers={{
|
||||
add: () => attribution.addAttribution(attributionText),
|
||||
remove: () => attribution.removeAttribution(attributionText),
|
||||
}}
|
||||
attribution="Sources: Esri, TomTom, Garmin, FAO, NOAA, USGS"
|
||||
url={`https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}?token=${accessToken}`}
|
||||
tileSize={256}
|
||||
/>
|
||||
@@ -226,39 +222,36 @@ const StrassentexteEsri = () => {
|
||||
|
||||
const OpenAIP = ({ attribution }: { attribution: Control.Attribution }) => {
|
||||
const accessToken = process.env.NEXT_PUBLIC_OPENAIP_ACCESS;
|
||||
const attributionText = '© <a href="https://www.openaip.net" target="_blank">OpenAIP</a>';
|
||||
const ref = useRef<L.TileLayer | null>(null);
|
||||
|
||||
return (
|
||||
<TileLayer
|
||||
eventHandlers={{
|
||||
add: () => attribution.addAttribution(attributionText),
|
||||
remove: () => attribution.removeAttribution(attributionText),
|
||||
add: () => {
|
||||
if (ref.current) {
|
||||
ref.current.bringToFront();
|
||||
}
|
||||
},
|
||||
}}
|
||||
url={`https://api.tiles.openaip.net/api/data/openaip/{z}/{x}/{y}.png?apiKey=${accessToken}`}
|
||||
ref={ref}
|
||||
attribution='© <a href="https://www.openaip.net" target="_blank">OpenAIP</a>'
|
||||
url={`https://api.tiles.openaip.net/api/data/openaip/{z}/{x}/{y}.png?apiKey=${process.env.NEXT_PUBLIC_OPENAIP_ACCESS}`}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const NiederschlagOverlay = ({ attribution }: { attribution: Control.Attribution }) => {
|
||||
let tileLayer: L.TileLayer | null = null;
|
||||
|
||||
useEffect(() => {
|
||||
if (tileLayer) {
|
||||
tileLayer.bringToFront();
|
||||
}
|
||||
}, [tileLayer]);
|
||||
const tileLayerRef = useRef<L.TileLayer.WMS | null>(null);
|
||||
|
||||
return (
|
||||
<WMSTileLayer
|
||||
ref={(layer) => {
|
||||
if (layer) {
|
||||
tileLayer = layer;
|
||||
}
|
||||
}}
|
||||
ref={tileLayerRef}
|
||||
eventHandlers={{
|
||||
add: () => attribution.addAttribution("Quelle: Deutscher Wetterdienst"),
|
||||
remove: () => attribution.removeAttribution("Quelle: Deutscher Wetterdienst"),
|
||||
add: () => {
|
||||
tileLayerRef.current?.bringToFront();
|
||||
},
|
||||
}}
|
||||
attribution="Quelle: Deutscher Wetterdienst"
|
||||
url="https://maps.dwd.de/geoserver/wms?"
|
||||
format="image/png"
|
||||
layers="dwd:Niederschlagsradar"
|
||||
@@ -268,6 +261,47 @@ const NiederschlagOverlay = ({ attribution }: { attribution: Control.Attribution
|
||||
);
|
||||
};
|
||||
|
||||
const WindfarmOutlineLayer = () => {
|
||||
const map = useMap();
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleZoom = () => {
|
||||
setIsVisible(map.getZoom() < 13);
|
||||
};
|
||||
|
||||
// Initial check and event listener
|
||||
handleZoom();
|
||||
map.on("zoomend", handleZoom);
|
||||
|
||||
// Cleanup on unmount
|
||||
return () => {
|
||||
map.off("zoomend", handleZoom);
|
||||
};
|
||||
}, [map]);
|
||||
|
||||
return isVisible ? (
|
||||
<GeoJSON
|
||||
data={WINDFARMS as FeatureCollection<Geometry>}
|
||||
style={() => ({
|
||||
color: "#233EE5",
|
||||
weight: 1.5,
|
||||
dashArray: "7, 10",
|
||||
className: "no-pointer",
|
||||
})}
|
||||
onEachFeature={(feature, layer) => {
|
||||
layer.bindTooltip(
|
||||
new L.Tooltip({
|
||||
content: feature.properties.Cluster_NR,
|
||||
direction: "top",
|
||||
sticky: true,
|
||||
}),
|
||||
);
|
||||
}}
|
||||
/>
|
||||
) : null;
|
||||
};
|
||||
|
||||
export const BaseMaps = () => {
|
||||
const map = useMap();
|
||||
const isPannelOpen = usePannelStore((state) => state.isOpen);
|
||||
@@ -287,23 +321,36 @@ export const BaseMaps = () => {
|
||||
<NiederschlagOverlay attribution={map.attributionControl} />
|
||||
</LayersControl.Overlay>
|
||||
|
||||
<LayersControl.Overlay name={"Windkraftanlagen offshore"}>
|
||||
<WindfarmOutlineLayer />
|
||||
</LayersControl.Overlay>
|
||||
|
||||
<LayersControl.Overlay name={"LRZs"}>
|
||||
<StationsLayer attribution={map.attributionControl} />
|
||||
</LayersControl.Overlay>
|
||||
<LayersControl.Overlay name={"OpenAIP"}>
|
||||
<OpenAIP attribution={map.attributionControl} />
|
||||
</LayersControl.Overlay>
|
||||
<LayersControl.BaseLayer name="OpenStreetMap" checked>
|
||||
|
||||
<LayersControl.BaseLayer name="OpenStreetMap Dark" checked>
|
||||
<TileLayer
|
||||
zIndex={-1}
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
className="invert-100 grayscale"
|
||||
/>
|
||||
</LayersControl.BaseLayer>
|
||||
<LayersControl.BaseLayer name="OpenStreetMap">
|
||||
<TileLayer
|
||||
zIndex={-1}
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
</LayersControl.BaseLayer>
|
||||
<LayersControl.BaseLayer name="OpenStreetMap Dark">
|
||||
<LayersControl.BaseLayer name="OpenTopoMap">
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
className="invert-100 grayscale"
|
||||
attribution='map data: © <a href="https://opentopomap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
|
||||
url="https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
</LayersControl.BaseLayer>
|
||||
<LayersControl.BaseLayer name="ESRI Satellite">
|
||||
|
||||
Reference in New Issue
Block a user