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.
2025-06-18 12:47:04 +02:00
parent c983ba9882
commit 603634e8a4
21 changed files with 8022 additions and 36 deletions
--- a/src/components/ProjectForm.js
+++ b/src/components/ProjectForm.js
@@ -15,8 +15,8 @@ export default function ProjectForm({ initialData = null }) {
 		investment_number: "",
 		finish_date: "",
 		wp: "",
-		contact: "",
-		notes: "",
+		contact: "",		notes: "",
+		coordinates: "",
 		project_type: initialData?.project_type || "design",
 		// project_status is not included in the form for creation or editing
 		...initialData,
@@ -94,8 +94,7 @@ export default function ProjectForm({ initialData = null }) {
 				</select>
 			</div>

-			{/* Other fields */}
-			{[
+			{/* Other fields */}			{[
 				["project_name", "Nazwa projektu"],
 				["address", "Lokalizacja"],
 				["plot", "Działka"],
@@ -104,8 +103,8 @@ export default function ProjectForm({ initialData = null }) {
 				["city", "Miejscowość"],
 				["investment_number", "Numer inwestycjny"],
 				["finish_date", "Termin realizacji"],
-				["wp", "WP"],
-				["contact", "Dane kontaktowe"],
+				["wp", "WP"],				["contact", "Dane kontaktowe"],
+				["coordinates", "Coordinates"],
 				["notes", "Notatki"],
 			].map(([name, label]) => (
 				<div key={name}>
@@ -116,6 +115,7 @@ export default function ProjectForm({ initialData = null }) {
 						value={form[name] || ""}
 						onChange={handleChange}
 						className="border p-2 w-full"
+						placeholder={name === "coordinates" ? "e.g., 49.622958,20.629562" : ""}
 					/>
 				</div>
 			))}
--- a/src/components/ui/CustomWMTSMap.js
+++ b/src/components/ui/CustomWMTSMap.js
@@ -0,0 +1,80 @@
+"use client";
+
+import { MapContainer, TileLayer, Marker, Popup, LayersControl } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
+import { useEffect } from 'react';
+
+// Custom WMTS layer component using Leaflet directly
+function CustomWMTSLayer({ url, layer, style = 'default', tilematrixSet = 'EPSG:3857', format = 'image/jpeg' }) {
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const L = require('leaflet');
+      
+      // Create WMTS layer using Leaflet's built-in capabilities
+      const wmtsUrl = `${url}/tile/1.0.0/${layer}/${style}/${tilematrixSet}/{z}/{y}/{x}.${format.split('/')[1]}`;
+      
+      return () => {
+        // Cleanup if needed
+      };
+    }
+  }, [url, layer, style, tilematrixSet, format]);
+
+  const wmtsUrl = `${url}/tile/1.0.0/${layer}/${style}/${tilematrixSet}/{z}/{y}/{x}.${format.split('/')[1]}`;
+  
+  return (
+    <TileLayer
+      url={wmtsUrl}
+      attribution='&copy; <a href="https://www.geoportal.gov.pl/">Geoportal</a>'
+      maxZoom={19}
+    />
+  );
+}
+
+// Example map with custom WMTS integration
+export default function CustomWMTSMap({ center, zoom = 13, markers = [] }) {
+  const { BaseLayer } = LayersControl;
+
+  return (
+    <MapContainer 
+      center={center} 
+      zoom={zoom} 
+      style={{ height: '100%', width: '100%' }}
+      scrollWheelZoom={true}
+    >
+      <LayersControl position="topright">
+        <BaseLayer checked name="OpenStreetMap">
+          <TileLayer
+            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+          />
+        </BaseLayer>
+        
+        <BaseLayer name="Polish Geoportal ORTO (WMTS)">
+          <CustomWMTSLayer
+            url="https://mapy.geoportal.gov.pl/wss/service/PZGIK/ORTO/WMTS/StandardResolution"
+            layer="ORTO"
+            style="default"
+            tilematrixSet="EPSG:3857"
+            format="image/jpeg"
+          />
+        </BaseLayer>
+
+        <BaseLayer name="Polish Geoportal Topo (WMTS)">
+          <CustomWMTSLayer
+            url="https://mapy.geoportal.gov.pl/wss/service/PZGIK/BDOO/WMTS/StandardResolution"
+            layer="BDOO"
+            style="default"
+            tilematrixSet="EPSG:3857"
+            format="image/png"
+          />
+        </BaseLayer>
+      </LayersControl>
+
+      {markers.map((marker, index) => (
+        <Marker key={index} position={marker.position}>
+          {marker.popup && <Popup>{marker.popup}</Popup>}
+        </Marker>
+      ))}
+    </MapContainer>
+  );
+}
--- a/src/components/ui/EnhancedLeafletMap.js
+++ b/src/components/ui/EnhancedLeafletMap.js
@@ -0,0 +1,74 @@
+"use client";
+
+import { MapContainer, TileLayer, 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 } = LayersControl;
+
+  return (
+    <MapContainer 
+      center={center} 
+      zoom={zoom} 
+      style={{ height: '100%', width: '100%' }}
+      scrollWheelZoom={true}
+    >
+      {showLayerControl ? (
+        <LayersControl position="topright">
+          {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>
+          ))}
+        </LayersControl>
+      ) : (
+        // Default layer when no layer control
+        <TileLayer
+          attribution='&copy; <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>
+  );
+}
--- a/src/components/ui/LeafletMap.js
+++ b/src/components/ui/LeafletMap.js
@@ -0,0 +1,74 @@
+"use client";
+
+import { MapContainer, TileLayer, 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 } = LayersControl;
+
+  return (
+    <MapContainer 
+      center={center} 
+      zoom={zoom} 
+      style={{ height: '100%', width: '100%' }}
+      scrollWheelZoom={true}
+    >
+      {showLayerControl ? (
+        <LayersControl position="topright">
+          {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>
+          ))}
+        </LayersControl>
+      ) : (
+        // Default layer when no layer control
+        <TileLayer
+          attribution='&copy; <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>
+  );
+}
--- a/src/components/ui/ProjectMap.js
+++ b/src/components/ui/ProjectMap.js
@@ -0,0 +1,65 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import dynamic from 'next/dynamic';
+
+// Dynamically import the map component to avoid SSR issues
+const DynamicMap = dynamic(() => import('./LeafletMap'), {
+  ssr: false,
+  loading: () => <div className="w-full h-64 bg-gray-100 animate-pulse rounded-lg flex items-center justify-center">
+    <span className="text-gray-500">Loading map...</span>
+  </div>
+});
+
+export default function ProjectMap({ 
+  coordinates, 
+  projectName, 
+  showLayerControl = true,
+  mapHeight = 'h-64',
+  defaultLayer = 'OpenStreetMap'
+}) {
+  const [coords, setCoords] = useState(null);
+
+  useEffect(() => {
+    if (coordinates) {
+      // Parse coordinates string (e.g., "49.622958,20.629562")
+      const [lat, lng] = coordinates.split(',').map(coord => parseFloat(coord.trim()));
+      
+      if (!isNaN(lat) && !isNaN(lng)) {
+        setCoords({ lat, lng });
+      }
+    }
+  }, [coordinates]);
+
+  if (!coords) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-medium text-gray-700">Project Location</h3>
+        {showLayerControl && (
+          <div className="text-xs text-gray-500">
+            Use the layer control (📚) to switch map views
+          </div>
+        )}
+      </div>
+      <div className={`w-full ${mapHeight} rounded-lg overflow-hidden border border-gray-200`}>
+        <DynamicMap 
+          center={[coords.lat, coords.lng]} 
+          zoom={15}
+          markers={[{
+            position: [coords.lat, coords.lng],
+            popup: projectName || 'Project Location'
+          }]}
+          showLayerControl={showLayerControl}
+          defaultLayer={defaultLayer}
+        />
+      </div>
+      <p className="text-xs text-gray-500">
+        Coordinates: {coords.lat.toFixed(6)}, {coords.lng.toFixed(6)}
+      </p>
+    </div>
+  );
+}
--- a/src/components/ui/mapLayers.js
+++ b/src/components/ui/mapLayers.js
@@ -0,0 +1,65 @@
+// Map layer configurations
+import { generateLayerConfig } from './wmtsCapabilities';
+
+// Generate layer configurations from WMTS capabilities
+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: 19
+    },
+    polishOrthophoto,
+    {
+      name: "Polish Land Records (WMS)",
+      attribution: '&copy; <a href="https://www.gugik.gov.pl/">GUGiK</a>',
+      // This is actually a WMS service, not WMTS as discovered from GetCapabilities
+      url: "https://integracja.gugik.gov.pl/cgi-bin/KrajowaIntegracjaEwidencjiGruntow?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&BBOX={bbox-epsg-3857}&CRS=EPSG:3857&WIDTH=256&HEIGHT=256&LAYERS=EGiB&STYLES=&FORMAT=image/png",
+      maxZoom: 19,
+      tileSize: 256
+    },
+    {
+      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: 19
+    },
+    {
+      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: 19
+    }
+  ].filter(Boolean) // Remove any null entries
+};
+
+// 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"
+  }
+};
+
+// 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;
+  }
+}
--- a/src/components/ui/wmtsCapabilities.js
+++ b/src/components/ui/wmtsCapabilities.js
@@ -0,0 +1,88 @@
+// WMTS Capabilities Helper
+// This file contains utilities for working with WMTS GetCapabilities responses
+
+/**
+ * Parse WMTS GetCapabilities XML to extract layer information
+ * @param {string} capabilitiesUrl - Base WMTS service URL
+ * @returns {Object} Parsed layer information
+ */
+export async function getWMTSCapabilities(capabilitiesUrl) {
+  try {
+    const response = await fetch(`${capabilitiesUrl}?Service=WMTS&Request=GetCapabilities`);
+    const xml = await response.text();
+    
+    // In a real implementation, you'd parse the XML to extract:
+    // - Available layers
+    // - Supported formats (image/png, image/jpeg, etc.)
+    // - Tile matrix sets (coordinate systems)
+    // - Available styles
+    // - Zoom level ranges
+    
+    console.log('WMTS Capabilities XML:', xml);
+    
+    // For now, return the XML for manual inspection
+    return { xml, url: capabilitiesUrl };
+  } catch (error) {
+    console.error('Failed to fetch WMTS capabilities:', error);
+    return null;
+  }
+}
+
+/**
+ * Build proper WMTS tile URL from capabilities information
+ * @param {Object} config - WMTS configuration
+ * @returns {string} Tile URL template
+ */
+export function buildWMTSTileUrl(config) {
+  const {
+    baseUrl,
+    layer,
+    style = 'default',
+    tilematrixSet = 'EPSG:3857',
+    format = 'image/png',
+    version = '1.0.0'
+  } = config;
+  
+  // Standard WMTS RESTful URL template
+  return `${baseUrl}/tile/${version}/${layer}/${style}/${tilematrixSet}/{z}/{y}/{x}.${format.split('/')[1]}`;
+}
+
+/**
+ * Polish Geoportal WMTS services with proper GetCapabilities URLs
+ */
+export const polishWMTSServices = {
+  orthophoto: {
+    name: "Polish Geoportal Orthophoto",
+    capabilitiesUrl: "https://mapy.geoportal.gov.pl/wss/service/PZGIK/ORTO/WMTS/StandardResolution",
+    layer: "ORTO",
+    style: "default",
+    tilematrixSet: "EPSG:2180",
+    format: "image/jpeg",
+    attribution: '&copy; <a href="https://www.geoportal.gov.pl/">Geoportal</a>',
+    maxZoom: 19
+  }
+};
+
+/**
+ * Generate layer configuration from WMTS capabilities
+ * @param {string} serviceName - Key from polishWMTSServices
+ * @returns {Object} Layer configuration for mapLayers
+ */
+export function generateLayerConfig(serviceName) {
+  const service = polishWMTSServices[serviceName];
+  if (!service) return null;
+  
+  return {
+    name: service.name,
+    attribution: service.attribution,
+    url: buildWMTSTileUrl({
+      baseUrl: service.capabilitiesUrl,
+      layer: service.layer,
+      style: service.style,
+      tilematrixSet: service.tilematrixSet,
+      format: service.format
+    }),
+    maxZoom: service.maxZoom,
+    tileSize: 256
+  };
+}