RKWojs
f83cc8e564
- Introduced ImprovedPolishOrthophotoMap component for displaying Polish orthophoto layers using WMTS. - Implemented custom WMTSLayer for handling tile requests. - Added Google Satellite and OpenStreetMap layers for comparison. - Included debug information for network requests to Geoportal. - Enhanced LeafletMap to support WMS overlays and improved layer control. - Created PolishGeoLayers module for easy access to various Polish geospatial layers. - Added TransparencyDemoMap for adjustable layer opacity controls. - Updated mapLayers configuration to include new Polish orthophoto layers and WMS overlays. - Refactored wmtsCapabilities to use updated URLs and parameters for better compatibility.
101 lines
2.9 KiB
JavaScript
101 lines
2.9 KiB
JavaScript
"use client";
|
|
|
|
import { MapContainer, TileLayer, WMSTileLayer, Marker, Popup, LayersControl } from 'react-leaflet';
|
|
import 'leaflet/dist/leaflet.css';
|
|
import { useEffect } from 'react';
|
|
import { mapLayers } from './mapLayers';
|
|
|
|
// Fix for default markers in react-leaflet
|
|
const fixLeafletIcons = () => {
|
|
if (typeof window !== 'undefined') {
|
|
const L = require('leaflet');
|
|
|
|
delete L.Icon.Default.prototype._getIconUrl;
|
|
L.Icon.Default.mergeOptions({
|
|
iconRetinaUrl: '/leaflet/marker-icon-2x.png',
|
|
iconUrl: '/leaflet/marker-icon.png',
|
|
shadowUrl: '/leaflet/marker-shadow.png',
|
|
});
|
|
}
|
|
};
|
|
|
|
export default function EnhancedLeafletMap({
|
|
center,
|
|
zoom = 13,
|
|
markers = [],
|
|
showLayerControl = true,
|
|
defaultLayer = 'OpenStreetMap'
|
|
}) {
|
|
useEffect(() => {
|
|
fixLeafletIcons();
|
|
}, []);
|
|
const { BaseLayer, Overlay } = LayersControl;
|
|
|
|
return (
|
|
<MapContainer
|
|
center={center}
|
|
zoom={zoom}
|
|
style={{ height: '100%', width: '100%' }}
|
|
scrollWheelZoom={true}
|
|
>
|
|
{showLayerControl ? (
|
|
<LayersControl position="topright">
|
|
{/* Base Layers */}
|
|
{mapLayers.base.map((layer, index) => (
|
|
<BaseLayer
|
|
key={index}
|
|
checked={layer.checked || layer.name === defaultLayer}
|
|
name={layer.name}
|
|
>
|
|
<TileLayer
|
|
attribution={layer.attribution}
|
|
url={layer.url}
|
|
maxZoom={layer.maxZoom}
|
|
tileSize={layer.tileSize || 256}
|
|
/>
|
|
</BaseLayer>
|
|
))}
|
|
{/* Overlay Layers */}
|
|
{mapLayers.overlays && mapLayers.overlays.map((layer, index) => (
|
|
<Overlay
|
|
key={`overlay-${index}`}
|
|
checked={layer.checked}
|
|
name={layer.name}
|
|
>
|
|
{layer.type === "wms" ? (
|
|
<WMSTileLayer
|
|
attribution={layer.attribution}
|
|
url={layer.url}
|
|
params={layer.params}
|
|
format={layer.params.format}
|
|
transparent={layer.params.transparent}
|
|
opacity={layer.opacity}
|
|
/>
|
|
) : (
|
|
<TileLayer
|
|
attribution={layer.attribution}
|
|
url={layer.url}
|
|
maxZoom={layer.maxZoom}
|
|
opacity={layer.opacity}
|
|
/>
|
|
)}
|
|
</Overlay>
|
|
))}
|
|
</LayersControl>
|
|
) : (
|
|
// Default layer when no layer control
|
|
<TileLayer
|
|
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
/>
|
|
)}
|
|
|
|
{markers.map((marker, index) => (
|
|
<Marker key={index} position={marker.position}>
|
|
{marker.popup && <Popup>{marker.popup}</Popup>}
|
|
</Marker>
|
|
))}
|
|
</MapContainer>
|
|
);
|
|
}
|