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.

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}
 									/>
 								);