feat: Add Improved Polish Orthophoto Map component with WMTS support
- 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.
This commit is contained in:
347
src/app/comprehensive-polish-map/page.js
Normal file
347
src/app/comprehensive-polish-map/page.js
Normal file
@@ -0,0 +1,347 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from 'react';
|
||||
import ComprehensivePolishMap from '../../components/ui/ComprehensivePolishMap';
|
||||
|
||||
export default function ComprehensivePolishMapPage() {
|
||||
const [selectedLocation, setSelectedLocation] = useState('krakow');
|
||||
|
||||
// Different locations to test the layers
|
||||
const locations = {
|
||||
krakow: {
|
||||
center: [50.0647, 19.9450],
|
||||
zoom: 14,
|
||||
name: "Kraków",
|
||||
description: "Historic city center with good cadastral data coverage"
|
||||
},
|
||||
warsaw: {
|
||||
center: [52.2297, 21.0122],
|
||||
zoom: 14,
|
||||
name: "Warszawa",
|
||||
description: "Capital city with extensive planning data"
|
||||
},
|
||||
gdansk: {
|
||||
center: [54.3520, 18.6466],
|
||||
zoom: 14,
|
||||
name: "Gdańsk",
|
||||
description: "Port city with detailed property boundaries"
|
||||
},
|
||||
wroclaw: {
|
||||
center: [51.1079, 17.0385],
|
||||
zoom: 14,
|
||||
name: "Wrocław",
|
||||
description: "University city with good orthophoto coverage"
|
||||
},
|
||||
poznan: {
|
||||
center: [52.4064, 16.9252],
|
||||
zoom: 14,
|
||||
name: "Poznań",
|
||||
description: "Industrial center with road network data"
|
||||
}
|
||||
};
|
||||
|
||||
const currentLocation = locations[selectedLocation];
|
||||
|
||||
// Test markers for selected location
|
||||
const testMarkers = [
|
||||
{
|
||||
position: currentLocation.center,
|
||||
popup: `${currentLocation.name} - ${currentLocation.description}`
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-100">
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<h1 className="text-4xl font-bold text-gray-800 mb-6">
|
||||
🇵🇱 Comprehensive Polish Geospatial Data Platform
|
||||
</h1>
|
||||
|
||||
<div className="bg-green-50 border border-green-200 rounded-lg p-6 mb-6">
|
||||
<h2 className="text-xl font-semibold text-green-800 mb-3">
|
||||
All Polish Layers Implementation Complete! 🎉
|
||||
</h2>
|
||||
<p className="text-green-700 mb-4">
|
||||
This comprehensive map includes all layers from your OpenLayers implementation,
|
||||
converted to work seamlessly with your Leaflet-based React/Next.js project.
|
||||
</p>
|
||||
<div className="grid md:grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<strong className="text-green-800">Base Layers:</strong>
|
||||
<ul className="mt-1 text-green-700">
|
||||
<li>• Polish Orthophoto (Standard & High Resolution)</li>
|
||||
<li>• OpenStreetMap, Google Maps, Esri Satellite</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<strong className="text-green-800">Overlay Layers:</strong>
|
||||
<ul className="mt-1 text-green-700">
|
||||
<li>• Cadastral Data, Spatial Planning</li>
|
||||
<li>• LP-Portal Roads, Street Names, Parcels, Surveys</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Location Selector */}
|
||||
<div className="bg-white rounded-lg shadow-lg p-4 mb-6">
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-3">
|
||||
🎯 Select Test Location:
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-2">
|
||||
{Object.entries(locations).map(([key, location]) => (
|
||||
<button
|
||||
key={key}
|
||||
onClick={() => setSelectedLocation(key)}
|
||||
className={`px-3 py-2 rounded-lg text-sm transition-colors ${
|
||||
selectedLocation === key
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
||||
}`}
|
||||
>
|
||||
{location.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 mt-2">
|
||||
<strong>Current:</strong> {currentLocation.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Map Container */}
|
||||
<div className="bg-white rounded-lg shadow-lg overflow-hidden">
|
||||
<div className="p-4 bg-blue-600 text-white">
|
||||
<h2 className="text-xl font-semibold">
|
||||
Interactive Map: {currentLocation.name}
|
||||
</h2>
|
||||
<p className="text-blue-100 mt-2">
|
||||
Use the layer control (top-right) to toggle between base layers and enable overlay layers.
|
||||
Combine orthophoto with cadastral data for detailed property analysis.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="h-96 md:h-[700px]">
|
||||
<ComprehensivePolishMap
|
||||
key={selectedLocation} // Force re-render when location changes
|
||||
center={currentLocation.center}
|
||||
zoom={currentLocation.zoom}
|
||||
markers={testMarkers}
|
||||
showLayerControl={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Layer Information */}
|
||||
<div className="mt-8 grid md:grid-cols-2 gap-6">
|
||||
{/* Base Layers */}
|
||||
<div className="bg-white rounded-lg shadow-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-4 flex items-center">
|
||||
🗺️ Base Layers
|
||||
</h3>
|
||||
<div className="space-y-3 text-sm">
|
||||
<div className="flex items-start">
|
||||
<span className="w-4 h-4 bg-green-500 rounded-full mr-3 mt-0.5 flex-shrink-0"></span>
|
||||
<div>
|
||||
<strong>Polish Orthophoto (Standard)</strong>
|
||||
<p className="text-gray-600 mt-1">High-quality aerial imagery from Polish Geoportal</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<span className="w-4 h-4 bg-emerald-500 rounded-full mr-3 mt-0.5 flex-shrink-0"></span>
|
||||
<div>
|
||||
<strong>Polish Orthophoto (High Resolution)</strong>
|
||||
<p className="text-gray-600 mt-1">Ultra-high resolution aerial imagery for detailed analysis</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<span className="w-4 h-4 bg-blue-500 rounded-full mr-3 mt-0.5 flex-shrink-0"></span>
|
||||
<div>
|
||||
<strong>OpenStreetMap</strong>
|
||||
<p className="text-gray-600 mt-1">Community-driven map data</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<span className="w-4 h-4 bg-red-500 rounded-full mr-3 mt-0.5 flex-shrink-0"></span>
|
||||
<div>
|
||||
<strong>Google Maps</strong>
|
||||
<p className="text-gray-600 mt-1">Satellite imagery and road overlay</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Overlay Layers */}
|
||||
<div className="bg-white rounded-lg shadow-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-4 flex items-center">
|
||||
📊 Overlay Layers
|
||||
</h3> <div className="space-y-3 text-sm">
|
||||
<div className="flex items-start">
|
||||
<span className="w-4 h-4 bg-orange-500 rounded-full mr-3 mt-0.5 flex-shrink-0"></span>
|
||||
<div>
|
||||
<strong>📋 Polish Cadastral Data</strong>
|
||||
<p className="text-gray-600 mt-1">Property boundaries, parcels, and building outlines</p>
|
||||
<p className="text-xs text-gray-500">Opacity: 80% - Semi-transparent overlay</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<span className="w-4 h-4 bg-purple-500 rounded-full mr-3 mt-0.5 flex-shrink-0"></span>
|
||||
<div>
|
||||
<strong>🏗️ Polish Spatial Planning</strong>
|
||||
<p className="text-gray-600 mt-1">Zoning data and urban planning information</p>
|
||||
<p className="text-xs text-gray-500">Opacity: 70% - Semi-transparent overlay</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<span className="w-4 h-4 bg-teal-500 rounded-full mr-3 mt-0.5 flex-shrink-0"></span>
|
||||
<div>
|
||||
<strong>🛣️ LP-Portal Roads</strong>
|
||||
<p className="text-gray-600 mt-1">Detailed road network data</p>
|
||||
<p className="text-xs text-gray-500">Opacity: 90% - Mostly opaque for visibility</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<span className="w-4 h-4 bg-indigo-500 rounded-full mr-3 mt-0.5 flex-shrink-0"></span>
|
||||
<div>
|
||||
<strong>🏷️ LP-Portal Street Names</strong>
|
||||
<p className="text-gray-600 mt-1">Street names and road descriptions</p>
|
||||
<p className="text-xs text-gray-500">Opacity: 100% - Fully opaque for readability</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<span className="w-4 h-4 bg-pink-500 rounded-full mr-3 mt-0.5 flex-shrink-0"></span>
|
||||
<div>
|
||||
<strong>📐 LP-Portal Parcels & Surveys</strong>
|
||||
<p className="text-gray-600 mt-1">Property parcels and survey markers</p>
|
||||
<p className="text-xs text-gray-500">Opacity: 60-80% - Variable transparency</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Transparency Information */}
|
||||
<div className="mt-8 bg-green-50 border border-green-200 rounded-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-green-800 mb-4">
|
||||
🎨 Layer Transparency Handling
|
||||
</h3>
|
||||
<div className="grid md:grid-cols-2 gap-6 text-sm">
|
||||
<div>
|
||||
<h4 className="font-semibold text-green-700 mb-3">Base Layers (Opaque):</h4>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span>Polish Orthophoto</span>
|
||||
<span className="bg-green-200 px-2 py-1 rounded text-xs">100% Opaque</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Google Satellite/Roads</span>
|
||||
<span className="bg-green-200 px-2 py-1 rounded text-xs">100% Opaque</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-semibold text-green-700 mb-3">Overlay Layers (Transparent):</h4>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span>📋 Cadastral Data</span>
|
||||
<span className="bg-yellow-200 px-2 py-1 rounded text-xs">80% Opacity</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>🏗️ Spatial Planning</span>
|
||||
<span className="bg-yellow-200 px-2 py-1 rounded text-xs">70% Opacity</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>🛣️ Roads</span>
|
||||
<span className="bg-blue-200 px-2 py-1 rounded text-xs">90% Opacity</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>🏷️ Street Names</span>
|
||||
<span className="bg-green-200 px-2 py-1 rounded text-xs">100% Opacity</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>📐 Parcels</span>
|
||||
<span className="bg-orange-200 px-2 py-1 rounded text-xs">60% Opacity</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>📍 Survey Markers</span>
|
||||
<span className="bg-yellow-200 px-2 py-1 rounded text-xs">80% Opacity</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 p-3 bg-green-100 rounded">
|
||||
<p className="text-green-800 text-sm">
|
||||
<strong>Smart Transparency:</strong> Each overlay layer has been optimized with appropriate transparency levels.
|
||||
Property boundaries are semi-transparent (60-80%) so you can see the underlying imagery,
|
||||
while text labels are fully opaque (100%) for maximum readability.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Usage Guide */}
|
||||
<div className="mt-8 bg-blue-50 border border-blue-200 rounded-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-blue-800 mb-4">
|
||||
📋 How to Use This Comprehensive Map
|
||||
</h3>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h4 className="font-semibold text-blue-700 mb-2">Basic Navigation:</h4>
|
||||
<ul className="text-blue-600 space-y-1 text-sm">
|
||||
<li>• Use mouse wheel to zoom in/out</li>
|
||||
<li>• Click and drag to pan around</li>
|
||||
<li>• Use layer control (top-right) to switch layers</li>
|
||||
<li>• Select different Polish cities above to test</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-blue-700 mb-2">Advanced Features:</h4>
|
||||
<ul className="text-blue-600 space-y-1 text-sm">
|
||||
<li>• Combine orthophoto with cadastral overlay</li>
|
||||
<li>• Enable multiple overlays simultaneously</li>
|
||||
<li>• Use high-resolution orthophoto for detail work</li>
|
||||
<li>• Compare with Google/OSM base layers</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Technical Implementation */}
|
||||
<div className="mt-8 bg-gray-50 border border-gray-200 rounded-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
⚙️ Technical Implementation Details
|
||||
</h3>
|
||||
<div className="grid md:grid-cols-3 gap-6 text-sm">
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-700 mb-2">WMTS Integration:</h4>
|
||||
<ul className="text-gray-600 space-y-1">
|
||||
<li>• Proper KVP URL construction</li>
|
||||
<li>• EPSG:3857 coordinate system</li>
|
||||
<li>• Standard and high-res orthophoto</li>
|
||||
<li>• Multiple format support (JPEG/PNG)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-700 mb-2">WMS Overlays:</h4>
|
||||
<ul className="text-gray-600 space-y-1">
|
||||
<li>• Polish government services</li>
|
||||
<li>• LP-Portal municipal data</li>
|
||||
<li>• Transparent overlay support</li>
|
||||
<li>• Multiple layer combinations</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-700 mb-2">React/Leaflet:</h4>
|
||||
<ul className="text-gray-600 space-y-1">
|
||||
<li>• React-Leaflet component integration</li>
|
||||
<li>• Dynamic layer switching</li>
|
||||
<li>• Responsive design</li>
|
||||
<li>• Performance optimized</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user