Refactor LeafletMap to implement custom WMSLayer component and remove WMSTileLayer usage; update mapLayers configuration for improved readability and maintainability; delete obsolete page_backup.js file.

2025-06-24 22:46:53 +02:00
parent af133c1d5f
commit 74550be679
4 changed files with 395 additions and 340 deletions
--- a/src/components/ui/LeafletMap.js
+++ b/src/components/ui/LeafletMap.js
@@ -3,7 +3,6 @@
 import {
 	MapContainer,
 	TileLayer,
-	WMSTileLayer,
 	Marker,
 	Popup,
 	LayersControl,
@@ -15,6 +14,45 @@ import "leaflet/dist/leaflet.css";
 import { useEffect } from "react";
 import { mapLayers } from "./mapLayers";

+// Custom WMS Layer component using Leaflet's native WMS support
+function WMSLayer({ url, params, opacity = 1, attribution }) {
+	const map = useMap();
+	
+	useEffect(() => {
+		if (!map || !url) return;
+		
+		// Clean up params for L.tileLayer.wms
+		const wmsOptions = {
+			layers: params.layers,
+			styles: params.styles || '',
+			format: params.format || 'image/png',
+			transparent: params.transparent !== false,
+			version: params.version || '1.1.1',
+			attribution: attribution,
+			opacity: opacity
+		};
+		
+		// Add CRS/SRS parameter based on version
+		const version = parseFloat(params.version || '1.1.1');
+		if (version >= 1.3) {
+			wmsOptions.crs = L.CRS.EPSG3857;
+		} else {
+			wmsOptions.srs = 'EPSG:3857';
+		}
+		
+		// Create WMS layer using Leaflet's native support
+		const wmsLayer = L.tileLayer.wms(url, wmsOptions);
+		
+		wmsLayer.addTo(map);
+		
+		return () => {
+			map.removeLayer(wmsLayer);
+		};
+	}, [map, url, params, opacity, attribution]);
+	
+	return null;
+}
+
 // Fix for default markers in react-leaflet
 const fixLeafletIcons = () => {
 	if (typeof window !== "undefined") {
@@ -148,12 +186,10 @@ export default function EnhancedLeafletMap({
 							name={layer.name}
 						>
 							{layer.type === "wms" ? (
-								<WMSTileLayer
+								<WMSLayer
 									attribution={layer.attribution}
 									url={layer.url}
 									params={layer.params}
-									format={layer.params.format}
-									transparent={layer.params.transparent}
 									opacity={layer.opacity}
 								/>
 							) : (
@@ -188,13 +224,11 @@ export default function EnhancedLeafletMap({
 						.map((layer, index) => {
 							if (layer.type === "wms") {
 								return (
-									<WMSTileLayer
+									<WMSLayer
 										key={`custom-overlay-${index}`}
 										attribution={layer.attribution}
 										url={layer.url}
 										params={layer.params}
-										format={layer.params.format}
-										transparent={layer.params.transparent}
 										opacity={layer.opacity}
 									/>
 								);
--- a/src/components/ui/mapLayers.js
+++ b/src/components/ui/mapLayers.js
@@ -1,227 +1,244 @@
 // Map layer configurations
-import { generateLayerConfig } from './wmtsCapabilities';
+import { generateLayerConfig } from "./wmtsCapabilities";

 // Generate layer configurations from WMTS capabilities
-const polishOrthophoto = generateLayerConfig('orthophoto');
+const polishOrthophoto = generateLayerConfig("orthophoto");

 export const mapLayers = {
-  base: [
-    {
-      name: "OpenStreetMap",
-      checked: true,
-      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-      url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
-      maxZoom: 20
-    },
-    {
-      name: "🇵🇱 Polish Orthophoto (Standard)",
-      attribution: '&copy; <a href="https://www.geoportal.gov.pl/">Geoportal</a>',
-      url: "https://mapy.geoportal.gov.pl/wss/service/PZGIK/ORTO/WMTS/StandardResolution?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTO&STYLE=default&TILEMATRIXSET=EPSG:3857&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=image/jpeg",
-      maxZoom: 20,
-      checked: false
-    },
-    {
-      name: "🇵🇱 Polish Orthophoto (High Resolution)",
-      attribution: '&copy; <a href="https://www.geoportal.gov.pl/">Geoportal</a>',
-      url: "https://mapy.geoportal.gov.pl/wss/service/PZGIK/ORTO/WMTS/HighResolution?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTO&STYLE=default&TILEMATRIXSET=EPSG:3857&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=image/jpeg",
-      maxZoom: 20,
-      checked: false
-    },
-    {
-      name: "🌍 Google Satellite",
-      attribution: '&copy; Google',
-      url: "http://mt1.google.com/vt/lyrs=s&hl=pl&x={x}&y={y}&z={z}",
-      maxZoom: 20,
-      checked: false
-    },    {
-      name: "🌍 Google Hybrid",
-      attribution: '&copy; Google',
-      url: "http://mt1.google.com/vt/lyrs=y&hl=pl&x={x}&y={y}&z={z}",
-      maxZoom: 20,
-      checked: false
-    },
-    {
-      name: "Satellite (Esri)",
-      attribution: '&copy; <a href="https://www.esri.com/">Esri</a> &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
-      url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
-      maxZoom: 20
-    },
-    {
-      name: "Topographic",
-      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attributions">CARTO</a>',
-      url: "https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png",
-      maxZoom: 20
-    }
-  ].filter(Boolean), // Remove any null entries
-    overlays: [
-    {
-      name: "🌍 Google Roads",
-      type: "tile",
-      attribution: '&copy; Google',
-      url: "http://mt1.google.com/vt/lyrs=h&hl=pl&x={x}&y={y}&z={z}",
-      maxZoom: 20,
-      opacity: 1.0,
-      checked: false
-    },    {
-      name: "📋 Polish Cadastral Data (Działki) - Server 1",
-      type: "wms",
-      attribution: '&copy; <a href="https://www.gugik.gov.pl/">GUGiK</a> - Krajowa Integracja Ewidencji Gruntów',
-      url: "https://integracja01.gugik.gov.pl/cgi-bin/KrajowaIntegracjaEwidencjiGruntow",
-      params: {
-        service: 'WMS',
-        request: 'GetMap',
-        layers: 'powiaty,powiaty_obreby,zsin,obreby,dzialki,geoportal,numery_dzialek,budynki',
-        styles: ',,,,,,,',
-        format: 'image/png',
-        transparent: true,
-        version: '1.3.0',
-        srs: 'EPSG:3857',
-        exceptions: 'xml',
-        tiled: true
-      },
-      opacity: 0.8,
-      checked: false
-    },
-    {
-      name: "📋 Polish Cadastral Data (Działki) - Server 2",
-      type: "wms",
-      attribution: '&copy; <a href="https://www.gugik.gov.pl/">GUGiK</a> - Krajowa Integracja Ewidencji Gruntów',
-      url: "https://integracja.gugik.gov.pl/cgi-bin/KrajowaIntegracjaEwidencjiGruntow",
-      params: {
-        service: 'WMS',
-        request: 'GetMap',
-        layers: 'dzialki,obreby,numery_dzialek,budynki,kontury,uzytki',
-        styles: ',,,,,,',
-        format: 'image/png',
-        transparent: true,
-        version: '1.3.0',
-        srs: 'EPSG:3857',
-        tiled: true
-      },
-      opacity: 0.8,
-      checked: false
-    },
-    {
-      name: "🏗️ Polish Spatial Planning",
-      type: "wms",
-      attribution: '&copy; <a href="https://www.geoportal.gov.pl/">Geoportal</a>',
-      url: "https://mapy.geoportal.gov.pl/wss/ext/KrajowaIntegracjaMiejscowychPlanowZagospodarowaniaPrzestrzennego",
-      params: {
-        service: 'WMS',
-        request: 'GetMap',
-        layers: 'raster,wektor-str,wektor-lzb,wektor-pow,wektor-lin,wektor-pkt,granice',
-        styles: ',,,,,,',
-        format: 'image/png',
-        transparent: true,
-        version: '1.3.0',
-        srs: 'EPSG:3857',
-        tiled: true
-      },
-      opacity: 0.7,
-      checked: false
-    },
-    {
-      name: "🛣️ LP-Portal Roads",
-      type: "wms",
-      attribution: '&copy; <a href="https://lp-portal.pl/">LP-Portal</a>',
-      url: "https://geoserver.lp-portal.pl/geoserver/pzdnowysacz/wms",
-      params: {
-        service: 'WMS',
-        request: 'GetMap',
-        layers: '00_6_mapainteraktywna_drogi',
-        styles: '',
-        format: 'image/png8',
-        transparent: true,
-        version: '1.3.0',
-        srs: 'EPSG:3857',
-        tiled: true
-      },
-      opacity: 0.9,
-      checked: false
-    },
-    {
-      name: "🏷️ LP-Portal Street Names",
-      type: "wms",
-      attribution: '&copy; <a href="https://lp-portal.pl/">LP-Portal</a>',
-      url: "https://geoserver.lp-portal.pl/geoserver/pzdnowysacz/wms",
-      params: {
-        service: 'WMS',
-        request: 'GetMap',
-        layers: '00_5_mapainteraktywna_opisy_drog,00_3_mapainteraktywna_nazwy_ulic',
-        styles: '',
-        format: 'image/png8',
-        transparent: true,
-        version: '1.1.1',
-        srs: 'EPSG:3857',
-        tiled: true
-      },
-      opacity: 1.0,
-      checked: false
-    },
-    {
-      name: "📐 LP-Portal Parcels",
-      type: "wms",
-      attribution: '&copy; <a href="https://lp-portal.pl/">LP-Portal</a>',
-      url: "https://geoserver.lp-portal.pl/geoserver/pzdnowysacz/wms",
-      params: {
-        service: 'WMS',
-        request: 'GetMap',
-        layers: 'dzialki',
-        styles: '',
-        format: 'image/png',
-        transparent: true,
-        version: '1.1.1',
-        srs: 'EPSG:3857',
-        tiled: true
-      },
-      opacity: 0.6,
-      checked: false
-    },
-    {
-      name: "📍 LP-Portal Survey Markers",
-      type: "wms",
-      attribution: '&copy; <a href="https://lp-portal.pl/">LP-Portal</a>',
-      url: "https://geoserver.lp-portal.pl/geoserver/pzdnowysacz/wms",
-      params: {
-        service: 'WMS',
-        request: 'GetMap',
-        layers: '00_2_view_geop_odcinek_pikietaz_glob_multi',
-        styles: '',
-        format: 'image/png8',
-        transparent: true,
-        version: '1.1.1',
-        crs: 'EPSG:3857',
-        tiled: true
-      },
-      opacity: 0.8,
-      checked: false
-    }
-  ]
+	base: [
+		{
+			name: "OpenStreetMap",
+			checked: true,
+			attribution:
+				'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+			maxZoom: 20,
+		},
+		{
+			name: "🇵🇱 Polish Orthophoto (Standard)",
+			attribution:
+				'&copy; <a href="https://www.geoportal.gov.pl/">Geoportal</a>',
+			url: "https://mapy.geoportal.gov.pl/wss/service/PZGIK/ORTO/WMTS/StandardResolution?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTO&STYLE=default&TILEMATRIXSET=EPSG:3857&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=image/jpeg",
+			maxZoom: 20,
+			checked: false,
+		},
+		{
+			name: "🇵🇱 Polish Orthophoto (High Resolution)",
+			attribution:
+				'&copy; <a href="https://www.geoportal.gov.pl/">Geoportal</a>',
+			url: "https://mapy.geoportal.gov.pl/wss/service/PZGIK/ORTO/WMTS/HighResolution?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTO&STYLE=default&TILEMATRIXSET=EPSG:3857&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=image/jpeg",
+			maxZoom: 20,
+			checked: false,
+		},
+		{
+			name: "🌍 Google Satellite",
+			attribution: "&copy; Google",
+			url: "http://mt1.google.com/vt/lyrs=s&hl=pl&x={x}&y={y}&z={z}",
+			maxZoom: 20,
+			checked: false,
+		},
+		{
+			name: "🌍 Google Hybrid",
+			attribution: "&copy; Google",
+			url: "http://mt1.google.com/vt/lyrs=y&hl=pl&x={x}&y={y}&z={z}",
+			maxZoom: 20,
+			checked: false,
+		},
+		{
+			name: "Satellite (Esri)",
+			attribution:
+				'&copy; <a href="https://www.esri.com/">Esri</a> &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
+			url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
+			maxZoom: 20,
+		},
+		{
+			name: "Topographic",
+			attribution:
+				'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attributions">CARTO</a>',
+			url: "https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png",
+			maxZoom: 20,
+		},
+	].filter(Boolean), // Remove any null entries
+	overlays: [
+		{
+			name: "🌍 Google Roads",
+			type: "tile",
+			attribution: "&copy; Google",
+			url: "http://mt1.google.com/vt/lyrs=h&hl=pl&x={x}&y={y}&z={z}",
+			maxZoom: 20,
+			opacity: 1.0,
+			checked: false,
+		},
+		{
+			name: "📋 Polish Cadastral Data (Działki) - Server 1",
+			type: "wms",
+			attribution:
+				'&copy; <a href="https://www.gugik.gov.pl/">GUGiK</a> - Krajowa Integracja Ewidencji Gruntów',
+			url: "https://integracja01.gugik.gov.pl/cgi-bin/KrajowaIntegracjaEwidencjiGruntow",
+			params: {
+				service: "WMS",
+				request: "GetMap",
+				layers:
+					"powiaty,powiaty_obreby,zsin,obreby,dzialki,geoportal,numery_dzialek,budynki",
+				styles: ",,,,,,,",
+				format: "image/png",
+				transparent: true,
+				version: "1.3.0",
+				srs: "EPSG:3857",
+				exceptions: "xml",
+				tiled: true,
+			},
+			opacity: 0.8,
+			checked: false,
+		},
+		{
+			name: "📋 Polish Cadastral Data (Działki) - Server 2",
+			type: "wms",
+			attribution:
+				'&copy; <a href="https://www.gugik.gov.pl/">GUGiK</a> - Krajowa Integracja Ewidencji Gruntów',
+			url: "https://integracja.gugik.gov.pl/cgi-bin/KrajowaIntegracjaEwidencjiGruntow",
+			params: {
+				service: "WMS",
+				request: "GetMap",
+				layers: "dzialki,obreby,numery_dzialek,budynki,kontury,uzytki",
+				styles: ",,,,,,",
+				format: "image/png",
+				transparent: true,
+				version: "1.3.0",
+				srs: "EPSG:3857",
+				tiled: true,
+			},
+			opacity: 0.8,
+			checked: false,
+		},
+		{
+			name: "🏗️ Polish Spatial Planning",
+			type: "wms",
+			attribution:
+				'&copy; <a href="https://www.geoportal.gov.pl/">Geoportal</a>',
+			url: "https://mapy.geoportal.gov.pl/wss/ext/KrajowaIntegracjaMiejscowychPlanowZagospodarowaniaPrzestrzennego",
+			params: {
+				service: "WMS",
+				request: "GetMap",
+				layers:
+					"raster,wektor-str,wektor-lzb,wektor-pow,wektor-lin,wektor-pkt,granice",
+				styles: ",,,,,,",
+				format: "image/png",
+				transparent: true,
+				version: "1.3.0",
+				srs: "EPSG:3857",
+				tiled: true,
+			},
+			opacity: 0.7,
+			checked: false,
+		},
+		{
+			name: "🛣️ LP-Portal Roads",
+			type: "wms",
+			attribution: '&copy; <a href="https://lp-portal.pl/">LP-Portal</a>',
+			url: "https://geoserver.lp-portal.pl/geoserver/pzdnowysacz/wms",
+			params: {
+				service: "WMS",
+				request: "GetMap",
+				layers: "00_6_mapainteraktywna_drogi",
+				styles: "",
+				format: "image/png8",
+				transparent: true,
+				version: "1.3.0",
+				srs: "EPSG:3857",
+				tiled: true,
+			},
+			opacity: 0.9,
+			checked: false,
+		},
+		{
+			name: "🏷️ LP-Portal Street Names",
+			type: "wms",
+			attribution: '&copy; <a href="https://lp-portal.pl/">LP-Portal</a>',
+			url: "https://geoserver.lp-portal.pl/geoserver/pzdnowysacz/wms",
+			params: {
+				service: "WMS",
+				request: "GetMap",
+				layers:
+					"00_5_mapainteraktywna_opisy_drog,00_3_mapainteraktywna_nazwy_ulic",
+				styles: "",
+				format: "image/png8",
+				transparent: true,
+				version: "1.1.1",
+				srs: "EPSG:3857",
+				tiled: true,
+			},
+			opacity: 1.0,
+			checked: false,
+		},
+		{
+			name: "📐 LP-Portal Parcels",
+			type: "wms",
+			attribution: '&copy; <a href="https://lp-portal.pl/">LP-Portal</a>',
+			url: "https://geoserver.lp-portal.pl/geoserver/pzdnowysacz/wms",
+			params: {
+				service: "WMS",
+				request: "GetMap",
+				layers: "dzialki",
+				styles: "",
+				format: "image/png",
+				transparent: true,
+				version: "1.1.1",
+				srs: "EPSG:3857",
+				tiled: true,
+			},
+			opacity: 0.6,
+			checked: false,
+		},
+		{
+			name: "📍 LP-Portal Survey Markers",
+			type: "wms",
+			attribution: '&copy; <a href="https://lp-portal.pl/">LP-Portal</a>',
+			url: "https://geoserver.lp-portal.pl/geoserver/pzdnowysacz/wms",
+			params: {
+				service: "WMS",
+				request: "GetMap",
+				layers: "00_2_view_geop_odcinek_pikietaz_glob_multi",
+				styles: "",
+				format: "image/png8",
+				transparent: true,
+				version: "1.1.1",
+				srs: "EPSG:3857",
+				tiled: true,
+			},
+			opacity: 0.8,
+			checked: false,
+		},
+	],
 };

 // WMTS services configuration with GetCapabilities URLs
 export const wmtsServices = {
-  polishOrthophoto: {
-    capabilitiesUrl: "https://mapy.geoportal.gov.pl/wss/service/PZGIK/ORTO/WMTS/StandardResolution?Service=WMTS&Request=GetCapabilities",
-    layer: "ORTO",
-    style: "default",
-    tilematrixSet: "EPSG:2180",
-    format: "image/jpeg"
-  }
+	polishOrthophoto: {
+		capabilitiesUrl:
+			"https://mapy.geoportal.gov.pl/wss/service/PZGIK/ORTO/WMTS/StandardResolution?Service=WMTS&Request=GetCapabilities",
+		layer: "ORTO",
+		style: "default",
+		tilematrixSet: "EPSG:2180",
+		format: "image/jpeg",
+	},
 };

 // Helper function to check WMTS capabilities
 export async function checkWMTSCapabilities(serviceKey) {
-  const service = wmtsServices[serviceKey];
-  if (!service) return null;
-  
-  try {
-    const response = await fetch(service.capabilitiesUrl);
-    const xml = await response.text();
-    console.log(`WMTS Capabilities for ${serviceKey}:`, xml);
-    return xml;
-  } catch (error) {
-    console.error(`Failed to fetch WMTS capabilities for ${serviceKey}:`, error);
-    return null;
-  }
+	const service = wmtsServices[serviceKey];
+	if (!service) return null;
+
+	try {
+		const response = await fetch(service.capabilitiesUrl);
+		const xml = await response.text();
+		console.log(`WMTS Capabilities for ${serviceKey}:`, xml);
+		return xml;
+	} catch (error) {
+		console.error(
+			`Failed to fetch WMTS capabilities for ${serviceKey}:`,
+			error
+		);
+		return null;
+	}
 }