diff --git a/docs/MAP_LAYERS.md b/docs/MAP_LAYERS.md new file mode 100644 index 0000000..8bca3a2 --- /dev/null +++ b/docs/MAP_LAYERS.md @@ -0,0 +1,197 @@ +# Map Layers Configuration + +This document explains how to add and configure map layers using proper WMTS GetCapabilities discovery. + +## Current Implementation + +The map system supports multiple base layers using Leaflet and React-Leaflet with proper WMTS service discovery via GetCapabilities requests. + +### File Structure +- **`ProjectMap.js`**: Main map component used in the project pages +- **`LeafletMap.js`**: Core Leaflet map component with layer support +- **`mapLayers.js`**: Configuration file for all available layers +- **`wmtsCapabilities.js`**: WMTS service discovery and configuration utilities + +## Using GetCapabilities for WMTS Services + +Instead of hardcoding WMTS URLs, we use the standard OGC approach: + +### 1. Query Service Capabilities +```javascript +// Get capabilities for Polish Geoportal Orthophoto +const capabilitiesUrl = "https://mapy.geoportal.gov.pl/wss/service/PZGIK/ORTO/WMTS/StandardResolution?Service=WMTS&Request=GetCapabilities"; +``` + +### 2. Parse Available Layers +The GetCapabilities response provides: +- Available layers and their identifiers +- Supported coordinate reference systems (TileMatrixSets) +- Available formats (image/png, image/jpeg, etc.) +- Supported styles +- Zoom level ranges +- Service metadata + +### 3. Build Proper WMTS URLs +```javascript +// Standard WMTS RESTful URL pattern +const tileUrl = `${baseUrl}/tile/{version}/{layer}/{style}/{tilematrixSet}/{z}/{y}/{x}.{format}`; +``` + +### Base Layers (Mutually Exclusive) +- **OpenStreetMap**: Standard street map +- **Polish Geoportal Orthophoto**: Aerial imagery from Polish national geoportal +- **Polish Land Records Integration**: Land records and cadastral data from GUGiK +- **Satellite (Esri)**: High-resolution satellite imagery +- **Topographic**: Topographic style map + +### Layer Control +Users can switch between layers using the layer control widget (📚 icon) in the top-right corner of the map. + +## Adding New Layers + +### 1. Standard Tile Layers (XYZ) + +To add a new tile layer, edit `src/components/ui/mapLayers.js`: + +```javascript +// Add to the base array +{ + name: "Your Layer Name", + attribution: '© Provider', + url: "https://example.com/{z}/{x}/{y}.png", + maxZoom: 19 +} +``` + +### 2. WMTS Layers + +For WMTS (Web Map Tile Service) layers like the Polish Geoportal: + +```javascript +{ + name: "WMTS Layer", + attribution: '© Provider', + url: "https://provider.com/wmts/service/Layer/{z}/{y}/{x}.jpg", + maxZoom: 19, + tileSize: 256 +} +``` + +### 3. WMS Overlay Layers + +For WMS (Web Map Service) overlay layers: + +```javascript +// Add to the overlay array in mapLayers.js +{ + name: "Overlay Layer", + attribution: '© Provider', + url: "https://provider.com/wms", + format: "image/png", + transparent: true, + layers: "layer_name" +} +``` + +## Discovering New WMTS Services + +### Step 1: Find the GetCapabilities URL +``` +https://your-wmts-service.com/wmts?Service=WMTS&Request=GetCapabilities +``` + +### Step 2: Analyze the Response +Look for these key elements in the XML: +- `` elements with their `` +- `` supported coordinate systems +- `` supported image formats +- `