From 603634e8a47b9845c397bec4b0eebf92b954b414 Mon Sep 17 00:00:00 2001 From: RKWojs Date: Wed, 18 Jun 2025 12:47:04 +0200 Subject: [PATCH] feat: Add Leaflet map integration and project coordinates handling - Updated package.json to include dependencies for Leaflet and Playwright testing. - Added new images for Leaflet markers and layers. - Created scripts for generating test data with project coordinates. - Enhanced ProjectViewPage to display project coordinates and integrated ProjectMap component. - Modified ProjectForm to include coordinates input field. - Implemented CustomWMTSMap and EnhancedLeafletMap components for improved map functionality. - Created ProjectMap component to dynamically render project location on the map. - Added mapLayers configuration for various base layers including Polish Geoportal. - Implemented WMTS capabilities handling for dynamic layer loading. - Updated database initialization to include coordinates column in projects table. - Modified project creation and update functions to handle coordinates. - Added utility functions for formatting project status and deadlines. --- docs/MAP_LAYERS.md | 197 + package-lock.json | 7198 ++++++++++++++++++++++- package.json | 19 +- public/leaflet/layers-2x.png | Bin 0 -> 1259 bytes public/leaflet/layers.png | Bin 0 -> 696 bytes public/leaflet/marker-icon-2x.png | Bin 0 -> 2464 bytes public/leaflet/marker-icon.png | Bin 0 -> 1466 bytes public/leaflet/marker-shadow.png | Bin 0 -> 618 bytes scripts/create-additional-test-data.js | 21 + scripts/create-test-data.js | 32 + src/app/projects/[id]/page.js | 45 +- src/components/ProjectForm.js | 12 +- src/components/ui/CustomWMTSMap.js | 80 + src/components/ui/EnhancedLeafletMap.js | 74 + src/components/ui/LeafletMap.js | 74 + src/components/ui/ProjectMap.js | 65 + src/components/ui/mapLayers.js | 65 + src/components/ui/wmtsCapabilities.js | 88 + src/lib/init-db.js | 22 +- src/lib/queries/projects.js | 26 +- src/lib/utils.js | 40 + 21 files changed, 8022 insertions(+), 36 deletions(-) create mode 100644 docs/MAP_LAYERS.md create mode 100644 public/leaflet/layers-2x.png create mode 100644 public/leaflet/layers.png create mode 100644 public/leaflet/marker-icon-2x.png create mode 100644 public/leaflet/marker-icon.png create mode 100644 public/leaflet/marker-shadow.png create mode 100644 scripts/create-additional-test-data.js create mode 100644 scripts/create-test-data.js create mode 100644 src/components/ui/CustomWMTSMap.js create mode 100644 src/components/ui/EnhancedLeafletMap.js create mode 100644 src/components/ui/LeafletMap.js create mode 100644 src/components/ui/ProjectMap.js create mode 100644 src/components/ui/mapLayers.js create mode 100644 src/components/ui/wmtsCapabilities.js create mode 100644 src/lib/utils.js 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 +- `