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
108 lines
4.2 KiB
JavaScript
108 lines
4.2 KiB
JavaScript
"use client";
|
|
|
|
import dynamic from 'next/dynamic';
|
|
|
|
const ImprovedPolishOrthophotoMap = dynamic(
|
|
() => import('../../components/ui/ImprovedPolishOrthophotoMap'),
|
|
{
|
|
ssr: false,
|
|
loading: () => <div className="flex items-center justify-center h-96">Loading map...</div>
|
|
}
|
|
);
|
|
|
|
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>
|
|
);
|
|
}
|