faeb1ca80c
- Fix build issues with SSR and useSearchParams - Update README.md with comprehensive project documentation - Move debug pages to debug-disabled folder (temporary) - Fix authentication pages with Suspense boundaries - Add dynamic imports for map components - Ensure all pages build successfully This commit prepares the auth2 branch for merging into main by: 1. Resolving all build errors 2. Adding proper SSR handling for client-side components 3. Updating documentation to reflect current state 4. Moving debug/test pages out of production build
107 lines
3.8 KiB
JavaScript
107 lines
3.8 KiB
JavaScript
"use client";
|
|
|
|
import dynamic from 'next/dynamic';
|
|
|
|
const PolishOrthophotoMap = dynamic(
|
|
() => import('../../components/ui/PolishOrthophotoMap'),
|
|
{
|
|
ssr: false,
|
|
loading: () => <div className="flex items-center justify-center h-96">Loading map...</div>
|
|
}
|
|
);
|
|
|
|
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>
|
|
);
|
|
}
|