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.

src/app/comprehensive-polish-map/page.js

@@ -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>
+  );
+}

src/app/debug-polish-orthophoto/page.js

@@ -0,0 +1,103 @@
+"use client";
+
+import DebugPolishOrthophotoMap from '../../components/ui/DebugPolishOrthophotoMap';
+
+export default function DebugPolishOrthophotoPage() {
+  // Test marker in Poland
+  const testMarkers = [
+    {
+      position: [50.0647, 19.9450], // Krakow
+      popup: "Kraków - Test Location"
+    }
+  ];
+
+  return (
+    <div className="min-h-screen bg-gray-100">
+      <div className="container mx-auto px-4 py-8">
+        <h1 className="text-3xl font-bold text-gray-800 mb-6">
+          Debug Polish Geoportal Orthophoto
+        </h1>
+        
+        <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
+          <h2 className="text-lg font-semibold text-red-800 mb-2">
+            Debug Mode Active
+          </h2>
+          <p className="text-red-700">
+            This page tests multiple URL formats for Polish Geoportal orthophoto tiles.
+            Check the browser console and the debug panel on the map for network request information.
+          </p>
+        </div>
+
+        <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">Debug Map with Multiple Orthophoto Options</h2>
+            <p className="text-blue-100 mt-2">
+              Try switching between different Polish orthophoto options using the layer control.
+              Google layers are included as working references.
+            </p>
+          </div>
+          
+          <div className="h-96 md:h-[600px]">
+            <DebugPolishOrthophotoMap 
+              center={[50.0647, 19.9450]} // Centered on Krakow
+              zoom={12}
+              markers={testMarkers}
+            />
+          </div>
+        </div>
+
+        <div className="mt-8 bg-white rounded-lg shadow-lg p-6">
+          <h3 className="text-lg font-semibold text-gray-800 mb-4">
+            URL Formats Being Tested:
+          </h3>
+          <div className="space-y-4 text-sm">            <div className="bg-gray-50 p-3 rounded">
+              <strong>Option 1 (WMTS KVP EPSG:3857):</strong>
+              <code className="block mt-1 text-xs">
+                ?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTO&STYLE=default&TILEMATRIXSET=EPSG:3857&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=image/jpeg
+              </code>
+              <span className="text-gray-600">Standard Web Mercator projection</span>
+            </div>
+            
+            <div className="bg-gray-50 p-3 rounded">
+              <strong>Option 2 (WMTS KVP EPSG:2180):</strong>
+              <code className="block mt-1 text-xs">
+                ?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTO&STYLE=default&TILEMATRIXSET=EPSG:2180&TILEMATRIX=EPSG:2180:{z}&TILEROW={y}&TILECOL={x}&FORMAT=image/jpeg
+              </code>
+              <span className="text-gray-600">Polish coordinate system</span>
+            </div>
+            
+            <div className="bg-gray-50 p-3 rounded">
+              <strong>Option 3 (Alternative TILEMATRIXSET):</strong>
+              <code className="block mt-1 text-xs">
+                ?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTO&STYLE=default&TILEMATRIXSET=GoogleMapsCompatible&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=image/jpeg
+              </code>
+              <span className="text-gray-600">Google Maps compatible matrix</span>
+            </div>
+            
+            <div className="bg-gray-50 p-3 rounded">
+              <strong>Option 4 (PNG format):</strong>
+              <code className="block mt-1 text-xs">
+                ?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTO&STYLE=default&TILEMATRIXSET=EPSG:3857&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=image/png
+              </code>
+              <span className="text-gray-600">PNG format instead of JPEG</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-8 bg-yellow-50 border border-yellow-200 rounded-lg p-6">
+          <h3 className="text-lg font-semibold text-yellow-800 mb-2">
+            Debug Instructions:
+          </h3>
+          <ol className="text-yellow-700 space-y-2">
+            <li><strong>1.</strong> Open browser Developer Tools (F12) and go to Network tab</li>
+            <li><strong>2.</strong> Switch between different Polish orthophoto options in the layer control</li>
+            <li><strong>3.</strong> Look for requests to geoportal.gov.pl in the Network tab</li>
+            <li><strong>4.</strong> Check the debug panel on the map for request/response info</li>
+            <li><strong>5.</strong> Note which options return 200 OK vs 404/403 errors</li>
+            <li><strong>6.</strong> Compare with working Google layers</li>
+          </ol>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/test-improved-wmts/page.js

@@ -0,0 +1,99 @@
+"use client";
+
+import ImprovedPolishOrthophotoMap from '../../components/ui/ImprovedPolishOrthophotoMap';
+
+export default function ImprovedPolishOrthophotoPage() {
+  const testMarkers = [
+    {
+      position: [50.0647, 19.9450], // Krakow
+      popup: "Kraków - Testing WMTS"
+    }
+  ];
+
+  return (
+    <div className="min-h-screen bg-gray-100">
+      <div className="container mx-auto px-4 py-8">
+        <h1 className="text-3xl font-bold text-gray-800 mb-6">
+          Improved Polish WMTS Implementation
+        </h1>
+        
+        <div className="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
+          <h2 className="text-lg font-semibold text-green-800 mb-2">
+            Custom WMTS Layer Implementation
+          </h2>
+          <p className="text-green-700">
+            This version uses a custom WMTS layer that properly constructs KVP URLs based on the GetCapabilities response.
+            Check the debug panel on the map to see the actual requests being made.
+          </p>
+        </div>
+
+        <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">Custom WMTS Layer with Proper KVP URLs</h2>
+            <p className="text-blue-100 mt-2">
+              This implementation builds proper WMTS GetTile requests with all required parameters.
+              Monitor the debug panel and browser network tab for request details.
+            </p>
+          </div>
+          
+          <div className="h-96 md:h-[600px]">
+            <ImprovedPolishOrthophotoMap 
+              center={[50.0647, 19.9450]}
+              zoom={12}
+              markers={testMarkers}
+            />
+          </div>
+        </div>
+
+        <div className="mt-8 bg-white rounded-lg shadow-lg p-6">
+          <h3 className="text-lg font-semibold text-gray-800 mb-4">
+            WMTS Parameters Being Tested:
+          </h3>
+          <div className="grid md:grid-cols-2 gap-4 text-sm">
+            <div className="bg-gray-50 p-3 rounded">
+              <strong>Tile Matrix Sets Available:</strong>
+              <ul className="mt-2 space-y-1">
+                <li>• EPSG:3857 (Web Mercator)</li>
+                <li>• EPSG:4326 (WGS84)</li>
+                <li>• EPSG:2180 (Polish National Grid)</li>
+              </ul>
+            </div>
+            
+            <div className="bg-gray-50 p-3 rounded">
+              <strong>Formats Available:</strong>
+              <ul className="mt-2 space-y-1">
+                <li>• image/jpeg (default)</li>
+                <li>• image/png</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-6 bg-blue-50 border border-blue-200 rounded-lg p-6">
+          <h3 className="text-lg font-semibold text-blue-800 mb-2">
+            Testing Instructions:
+          </h3>
+          <ol className="text-blue-700 space-y-2">
+            <li><strong>1.</strong> Open Browser Developer Tools (F12) → Network tab</li>
+            <li><strong>2.</strong> Filter by "geoportal.gov.pl" to see WMTS requests</li>
+            <li><strong>3.</strong> Switch between different Polish WMTS options</li>
+            <li><strong>4.</strong> Check if requests return 200 OK or error codes</li>
+            <li><strong>5.</strong> Compare with Google Satellite (known working)</li>
+            <li><strong>6.</strong> Monitor the debug panel for request URLs</li>
+          </ol>
+        </div>
+
+        <div className="mt-6 bg-yellow-50 border border-yellow-200 rounded-lg p-6">
+          <h3 className="text-lg font-semibold text-yellow-800 mb-2">
+            Expected Behavior:
+          </h3>
+          <p className="text-yellow-700">
+            If the Polish orthophoto tiles appear, you should see aerial imagery of Poland. 
+            If they don't load, check the network requests - they should show proper WMTS GetTile URLs 
+            with all required parameters (SERVICE, REQUEST, LAYER, TILEMATRIXSET, etc.).
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/test-polish-map/page.js

@@ -0,0 +1,202 @@
+"use client";
+
+import { useState } from 'react';
+import PolishOrthophotoMap from '../../components/ui/PolishOrthophotoMap';
+import AdvancedPolishOrthophotoMap from '../../components/ui/AdvancedPolishOrthophotoMap';
+
+export default function PolishOrthophotoTestPage() {
+  const [activeMap, setActiveMap] = useState('basic');
+
+  // Test markers - various locations in Poland
+  const testMarkers = [
+    {
+      position: [50.0647, 19.9450], // Krakow
+      popup: "Kraków - Main Market Square"
+    },
+    {
+      position: [52.2297, 21.0122], // Warsaw
+      popup: "Warszawa - Palace of Culture and Science"
+    },
+    {
+      position: [54.3520, 18.6466], // Gdansk
+      popup: "Gdańsk - Old Town"
+    }
+  ];
+
+  return (
+    <div className="min-h-screen bg-gray-100">
+      <div className="container mx-auto px-4 py-8">
+        <h1 className="text-3xl font-bold text-gray-800 mb-6">
+          Polish Geoportal Orthophoto Integration
+        </h1>
+        
+        {/* Map Type Selector */}
+        <div className="mb-6 bg-white rounded-lg shadow-lg p-4">
+          <h2 className="text-lg font-semibold text-gray-800 mb-3">
+            Choose Map Implementation:
+          </h2>
+          <div className="flex space-x-4">
+            <button
+              onClick={() => setActiveMap('basic')}
+              className={`px-4 py-2 rounded-lg transition-colors ${
+                activeMap === 'basic'
+                  ? 'bg-blue-600 text-white'
+                  : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+              }`}
+            >
+              Basic Polish Orthophoto
+            </button>
+            <button
+              onClick={() => setActiveMap('advanced')}
+              className={`px-4 py-2 rounded-lg transition-colors ${
+                activeMap === 'advanced'
+                  ? 'bg-blue-600 text-white'
+                  : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+              }`}
+            >
+              Advanced with WMS Overlays
+            </button>
+          </div>
+        </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">
+              {activeMap === 'basic' 
+                ? 'Basic Polish Orthophoto Map' 
+                : 'Advanced Polish Orthophoto with WMS Overlays'
+              }
+            </h2>
+            <p className="text-blue-100 mt-2">
+              {activeMap === 'basic'
+                ? 'Demonstrates working Polish Geoportal orthophoto tiles with multiple base layer options.'
+                : 'Advanced version includes Polish cadastral data (działki) and spatial planning (MPZT) as overlay layers.'
+              }
+            </p>
+          </div>
+          
+          <div className="h-96 md:h-[600px]">
+            {activeMap === 'basic' ? (
+              <PolishOrthophotoMap 
+                center={[50.0647, 19.9450]} // Centered on Krakow
+                zoom={12}
+                markers={testMarkers}
+                showLayerControl={true}
+              />
+            ) : (
+              <AdvancedPolishOrthophotoMap 
+                center={[50.0647, 19.9450]} // Centered on Krakow
+                zoom={12}
+                markers={testMarkers}
+                showLayerControl={true}
+              />
+            )}
+          </div>
+        </div>
+
+        {/* Features Overview */}
+        <div className="mt-8 grid md:grid-cols-2 gap-6">
+          <div className="bg-white rounded-lg shadow-lg p-6">
+            <h3 className="text-lg font-semibold text-gray-800 mb-4">
+              Basic Map Features:
+            </h3>
+            <ul className="space-y-2 text-gray-600">
+              <li className="flex items-center">
+                <span className="w-3 h-3 bg-green-500 rounded-full mr-3"></span>
+                Polish Geoportal Orthophoto (Working)
+              </li>
+              <li className="flex items-center">
+                <span className="w-3 h-3 bg-blue-500 rounded-full mr-3"></span>
+                OpenStreetMap base layer
+              </li>
+              <li className="flex items-center">
+                <span className="w-3 h-3 bg-red-500 rounded-full mr-3"></span>
+                Google Satellite imagery
+              </li>
+              <li className="flex items-center">
+                <span className="w-3 h-3 bg-yellow-500 rounded-full mr-3"></span>
+                Google Roads overlay
+              </li>
+              <li className="flex items-center">
+                <span className="w-3 h-3 bg-purple-500 rounded-full mr-3"></span>
+                Esri World Imagery
+              </li>
+            </ul>
+          </div>
+
+          <div className="bg-white rounded-lg shadow-lg p-6">
+            <h3 className="text-lg font-semibold text-gray-800 mb-4">
+              Advanced Map Features:
+            </h3>
+            <ul className="space-y-2 text-gray-600">
+              <li className="flex items-center">
+                <span className="w-3 h-3 bg-green-500 rounded-full mr-3"></span>
+                Standard & High Resolution Orthophoto
+              </li>
+              <li className="flex items-center">
+                <span className="w-3 h-3 bg-orange-500 rounded-full mr-3"></span>
+                Polish Cadastral Data (WMS)
+              </li>
+              <li className="flex items-center">
+                <span className="w-3 h-3 bg-teal-500 rounded-full mr-3"></span>
+                Spatial Planning Data (MPZT)
+              </li>
+              <li className="flex items-center">
+                <span className="w-3 h-3 bg-indigo-500 rounded-full mr-3"></span>
+                Overlay layer support
+              </li>
+              <li className="flex items-center">
+                <span className="w-3 h-3 bg-pink-500 rounded-full mr-3"></span>
+                Multiple base layers
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        {/* Technical Implementation Details */}
+        <div className="mt-8 bg-white rounded-lg shadow-lg p-6">
+          <h3 className="text-lg font-semibold text-gray-800 mb-4">
+            Technical Implementation:
+          </h3>
+          <div className="grid md:grid-cols-2 gap-6">
+            <div>
+              <h4 className="font-semibold text-gray-700 mb-2">Key Improvements:</h4>
+              <ul className="text-sm text-gray-600 space-y-1">
+                <li>• Uses REST tile service instead of WMTS for better compatibility</li>
+                <li>• Proper tile size (512px) with zoomOffset=-1</li>
+                <li>• proj4 integration for EPSG:2180 coordinate system</li>
+                <li>• Multiple fallback layers for reliability</li>
+                <li>• WMS overlay support for cadastral data</li>
+              </ul>
+            </div>
+            <div>
+              <h4 className="font-semibold text-gray-700 mb-2">Based on OpenLayers Code:</h4>
+              <ul className="text-sm text-gray-600 space-y-1">
+                <li>• Converted from OpenLayers to Leaflet implementation</li>
+                <li>• Maintains same layer structure and URLs</li>
+                <li>• Includes Polish projection definitions</li>
+                <li>• Compatible with existing React/Next.js setup</li>
+                <li>• Extensible for additional WMS services</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        {/* Usage Instructions */}
+        <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-2">
+            How to Use:
+          </h3>
+          <div className="text-blue-700 space-y-2">
+            <p><strong>1.</strong> Use the layer control (top-right) to switch between base layers</p>
+            <p><strong>2.</strong> In advanced mode, enable overlay layers for cadastral/planning data</p>
+            <p><strong>3.</strong> Click on markers to see location information</p>
+            <p><strong>4.</strong> Zoom in to see high-resolution orthophoto details</p>
+            <p><strong>5.</strong> Combine orthophoto with cadastral overlay for property boundaries</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/test-polish-orthophoto/page.js

@@ -0,0 +1,98 @@
+"use client";
+
+import PolishOrthophotoMap from '../../components/ui/PolishOrthophotoMap';
+
+export default function TestPolishOrthophotoPage() {
+  // Test markers - various locations in Poland
+  const testMarkers = [
+    {
+      position: [50.0647, 19.9450], // Krakow
+      popup: "Kraków - Main Market Square"
+    },
+    {
+      position: [52.2297, 21.0122], // Warsaw
+      popup: "Warszawa - Palace of Culture and Science"
+    },
+    {
+      position: [54.3520, 18.6466], // Gdansk
+      popup: "Gdańsk - Old Town"
+    }
+  ];
+
+  return (
+    <div className="min-h-screen bg-gray-100">
+      <div className="container mx-auto px-4 py-8">
+        <h1 className="text-3xl font-bold text-gray-800 mb-6">
+          Polish Geoportal Orthophoto Map Test
+        </h1>
+        
+        <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 with Polish Orthophoto</h2>
+            <p className="text-blue-100 mt-2">
+              This map demonstrates working Polish Geoportal orthophoto tiles. 
+              Use the layer control (top-right) to switch between different map layers.
+            </p>
+          </div>
+          
+          <div className="h-96 md:h-[600px]">
+            <PolishOrthophotoMap 
+              center={[50.0647, 19.9450]} // Centered on Krakow
+              zoom={12}
+              markers={testMarkers}
+              showLayerControl={true}
+            />
+          </div>
+        </div>
+
+        <div className="mt-8 bg-white rounded-lg shadow-lg p-6">
+          <h3 className="text-lg font-semibold text-gray-800 mb-4">
+            Map Layers Available:
+          </h3>
+          <ul className="space-y-2 text-gray-600">
+            <li className="flex items-center">
+              <span className="w-3 h-3 bg-green-500 rounded-full mr-3"></span>
+              <strong>Polish Geoportal Orthophoto:</strong> High-resolution aerial imagery from Polish Geoportal
+            </li>
+            <li className="flex items-center">
+              <span className="w-3 h-3 bg-blue-500 rounded-full mr-3"></span>
+              <strong>OpenStreetMap:</strong> Standard OpenStreetMap tiles
+            </li>
+            <li className="flex items-center">
+              <span className="w-3 h-3 bg-red-500 rounded-full mr-3"></span>
+              <strong>Google Satellite:</strong> Google satellite imagery
+            </li>
+            <li className="flex items-center">
+              <span className="w-3 h-3 bg-yellow-500 rounded-full mr-3"></span>
+              <strong>Google Roads:</strong> Google road overlay
+            </li>
+            <li className="flex items-center">
+              <span className="w-3 h-3 bg-purple-500 rounded-full mr-3"></span>
+              <strong>Esri Satellite:</strong> Esri world imagery
+            </li>
+          </ul>
+        </div>
+
+        <div className="mt-8 bg-yellow-50 border border-yellow-200 rounded-lg p-6">
+          <h3 className="text-lg font-semibold text-yellow-800 mb-2">
+            Implementation Notes:
+          </h3>
+          <div className="text-yellow-700 space-y-2">
+            <p>
+              • The Polish Geoportal orthophoto uses REST tile service instead of WMTS for better compatibility
+            </p>
+            <p>
+              • Tile size is set to 512px with zoomOffset=-1 for proper tile alignment
+            </p>
+            <p>
+              • proj4 library is included for coordinate system transformations (EPSG:2180)
+            </p>
+            <p>
+              • Multiple fallback layers are provided for comparison and reliability
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}