feat(geoportal): add search, basemap switcher, feature info panel, selection + export
Major geoportal enhancements: - Basemap switcher (OSM/Satellite/Terrain) with ESRI + OpenTopoMap tiles - Search bar with debounced lookup (UATs by name, parcels by cadastral ref, owners by name) - Feature info panel showing enrichment data from ParcelSync (cadastru, proprietari, suprafata, folosinta) - Parcel selection mode with amber highlight + export (GeoJSON/DXF/GPKG via ogr2ogr) - Next.js /tiles rewrite proxying to Martin (fixes dev + avoids mixed content) - Fixed MapLibre web worker relative URL resolution (window.location.origin) API routes: /api/geoportal/search, /api/geoportal/feature, /api/geoportal/export Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
AI Assistant
@@ -0,0 +1,250 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
X,
|
||||
MapPin,
|
||||
User,
|
||||
Ruler,
|
||||
Building2,
|
||||
FileText,
|
||||
Loader2,
|
||||
TreePine,
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/shared/components/ui/button";
|
||||
import { Badge } from "@/shared/components/ui/badge";
|
||||
import { cn } from "@/shared/lib/utils";
|
||||
import type { ClickedFeature, FeatureDetail, FeatureEnrichmentData } from "../types";
|
||||
|
||||
type FeatureInfoPanelProps = {
|
||||
feature: ClickedFeature | null;
|
||||
onClose: () => void;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export function FeatureInfoPanel({
|
||||
feature,
|
||||
onClose,
|
||||
className,
|
||||
}: FeatureInfoPanelProps) {
|
||||
const [detail, setDetail] = useState<FeatureDetail | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!feature) {
|
||||
setDetail(null);
|
||||
return;
|
||||
}
|
||||
|
||||
// Try to load enrichment from API using the object_id from vector tile props
|
||||
const objectId = feature.properties.object_id ?? feature.properties.objectId;
|
||||
const siruta = feature.properties.siruta;
|
||||
if (!objectId || !siruta) {
|
||||
setDetail(null);
|
||||
return;
|
||||
}
|
||||
|
||||
let cancelled = false;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
fetch(`/api/geoportal/feature?objectId=${objectId}&siruta=${siruta}&sourceLayer=${feature.sourceLayer}`)
|
||||
.then((r) => {
|
||||
if (!r.ok) throw new Error(`${r.status}`);
|
||||
return r.json();
|
||||
})
|
||||
.then((data: { feature: FeatureDetail }) => {
|
||||
if (!cancelled) setDetail(data.feature);
|
||||
})
|
||||
.catch((err: unknown) => {
|
||||
if (!cancelled) setError(err instanceof Error ? err.message : "Eroare la incarcarea detaliilor");
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) setLoading(false);
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [feature]);
|
||||
|
||||
if (!feature) return null;
|
||||
|
||||
const enrichment = detail?.enrichment;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"bg-background/95 backdrop-blur-sm border rounded-lg shadow-lg w-80 max-h-[calc(100vh-16rem)] overflow-auto",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-3 border-b sticky top-0 bg-background/95 backdrop-blur-sm z-10">
|
||||
<h3 className="text-sm font-semibold truncate flex-1">
|
||||
{enrichment?.NR_CAD
|
||||
? `Parcela ${enrichment.NR_CAD}`
|
||||
: feature.sourceLayer === "gis_uats"
|
||||
? `UAT ${feature.properties.name ?? ""}`
|
||||
: `Obiect #${feature.properties.object_id ?? feature.properties.objectId ?? "?"}`}
|
||||
</h3>
|
||||
<Button variant="ghost" size="sm" className="h-6 w-6 p-0 ml-2" onClick={onClose}>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-3 space-y-3">
|
||||
{loading && (
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground py-4 justify-center">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
Se incarca...
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<p className="text-xs text-destructive">Nu s-au putut incarca detaliile ({error})</p>
|
||||
)}
|
||||
|
||||
{/* Basic props from vector tile */}
|
||||
{!loading && !enrichment && (
|
||||
<PropsTable properties={feature.properties} />
|
||||
)}
|
||||
|
||||
{/* Enrichment data */}
|
||||
{enrichment && <EnrichmentView data={enrichment} />}
|
||||
|
||||
{/* Coordinates */}
|
||||
<div className="text-xs text-muted-foreground pt-1 border-t">
|
||||
<MapPin className="h-3 w-3 inline mr-1" />
|
||||
{feature.coordinates[1].toFixed(5)}, {feature.coordinates[0].toFixed(5)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Enrichment view */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
function EnrichmentView({ data }: { data: FeatureEnrichmentData }) {
|
||||
return (
|
||||
<div className="space-y-2.5">
|
||||
{/* Cadastral info */}
|
||||
<Section icon={FileText} label="Cadastru">
|
||||
<Row label="Nr. cadastral" value={data.NR_CAD} />
|
||||
<Row label="Nr. CF" value={data.NR_CF} />
|
||||
{data.NR_CF_VECHI && data.NR_CF_VECHI !== "-" && (
|
||||
<Row label="CF vechi" value={data.NR_CF_VECHI} />
|
||||
)}
|
||||
{data.NR_TOPO && data.NR_TOPO !== "-" && (
|
||||
<Row label="Nr. topo" value={data.NR_TOPO} />
|
||||
)}
|
||||
</Section>
|
||||
|
||||
{/* Owners */}
|
||||
{data.PROPRIETARI && data.PROPRIETARI !== "-" && (
|
||||
<Section icon={User} label="Proprietari">
|
||||
<p className="text-xs leading-relaxed">{data.PROPRIETARI}</p>
|
||||
{data.PROPRIETARI_VECHI && data.PROPRIETARI_VECHI !== "-" && (
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Anterior: {data.PROPRIETARI_VECHI}
|
||||
</p>
|
||||
)}
|
||||
</Section>
|
||||
)}
|
||||
|
||||
{/* Area */}
|
||||
<Section icon={Ruler} label="Suprafata">
|
||||
<Row label="Masurata" value={formatArea(data.SUPRAFATA_2D)} />
|
||||
<Row label="Rotunjita" value={formatArea(data.SUPRAFATA_R)} />
|
||||
</Section>
|
||||
|
||||
{/* Land use */}
|
||||
<Section icon={TreePine} label="Folosinta">
|
||||
<Row label="Categorie" value={data.CATEGORIE_FOLOSINTA} />
|
||||
<Row
|
||||
label="Intravilan"
|
||||
value={
|
||||
<Badge variant={data.INTRAVILAN === "DA" ? "default" : "secondary"} className="text-xs h-5">
|
||||
{data.INTRAVILAN || "-"}
|
||||
</Badge>
|
||||
}
|
||||
/>
|
||||
</Section>
|
||||
|
||||
{/* Building */}
|
||||
{data.HAS_BUILDING === 1 && (
|
||||
<Section icon={Building2} label="Constructie">
|
||||
<Row label="Autorizata" value={data.BUILD_LEGAL ? "Da" : "Nu"} />
|
||||
</Section>
|
||||
)}
|
||||
|
||||
{/* Address */}
|
||||
{data.ADRESA && data.ADRESA !== "-" && (
|
||||
<Section icon={MapPin} label="Adresa">
|
||||
<p className="text-xs">{data.ADRESA}</p>
|
||||
</Section>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Helpers */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
function Section({
|
||||
icon: Icon,
|
||||
label,
|
||||
children,
|
||||
}: {
|
||||
icon: typeof FileText;
|
||||
label: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center gap-1.5 mb-1">
|
||||
<Icon className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
<span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
<div className="ml-5 space-y-0.5">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Row({ label, value }: { label: string; value: React.ReactNode }) {
|
||||
if (!value || value === "-" || value === "") return null;
|
||||
return (
|
||||
<div className="flex justify-between text-xs gap-2">
|
||||
<span className="text-muted-foreground shrink-0">{label}</span>
|
||||
<span className="text-right font-medium truncate">{typeof value === "string" ? value : value}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PropsTable({ properties }: { properties: Record<string, unknown> }) {
|
||||
const entries = Object.entries(properties).filter(
|
||||
([, v]) => v != null && v !== ""
|
||||
);
|
||||
if (entries.length === 0) return <p className="text-xs text-muted-foreground">Fara atribute</p>;
|
||||
return (
|
||||
<div className="space-y-0.5">
|
||||
{entries.map(([key, value]) => (
|
||||
<Row key={key} label={key.replace(/_/g, " ")} value={String(value)} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function formatArea(v: number | string): string {
|
||||
if (v === "" || v == null) return "-";
|
||||
const n = typeof v === "string" ? parseFloat(v) : v;
|
||||
if (isNaN(n)) return String(v);
|
||||
return `${n.toLocaleString("ro-RO")} mp`;
|
||||
}
|
||||
Reference in New Issue
Block a user