feat: add Geoportal module with MapLibre GL JS + Martin vector tiles
Phase 1 of the geoportal implementation: Infrastructure: - Martin vector tile server in docker-compose (port 3010) - PostGIS setup SQL for GisUat: native geom column, Esri→PostGIS trigger, GiST index, gis_uats view for Martin auto-discovery Geoportal module (src/modules/geoportal/): - map-viewer.tsx: MapLibre GL JS canvas with OSM base, Martin MVT sources (gis_uats, gis_terenuri, gis_cladiri), click-to-inspect, zoom-level-aware layer visibility, layer styling - layer-panel.tsx: collapsible sidebar with layer toggles - geoportal-module.tsx: standalone page wrapper - Module registered in config/modules.ts, flags.ts, i18n ParcelSync integration: - 6th tab "Harta" with lazy-loaded MapViewer (ssr: false) - Centered on selected UAT Dependencies: maplibre-gl v5.21.0 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
AI Assistant
@@ -0,0 +1,410 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, useEffect, useState, useCallback, useImperativeHandle, forwardRef } from "react";
|
||||
import maplibregl from "maplibre-gl";
|
||||
import "maplibre-gl/dist/maplibre-gl.css";
|
||||
import { cn } from "@/shared/lib/utils";
|
||||
import type { ClickedFeature, LayerVisibility } from "../types";
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Constants */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
/**
|
||||
* Martin tile URL.
|
||||
* Env var NEXT_PUBLIC_MARTIN_URL should be set in docker-compose.yml:
|
||||
* - NEXT_PUBLIC_MARTIN_URL=http://10.10.10.166:3010
|
||||
* For production via Traefik, use https://tools.beletage.ro/tiles
|
||||
*/
|
||||
const DEFAULT_MARTIN_URL = process.env.NEXT_PUBLIC_MARTIN_URL ?? "http://10.10.10.166:3010";
|
||||
|
||||
/** Default center: Romania roughly centered */
|
||||
const DEFAULT_CENTER: [number, number] = [23.8, 46.1];
|
||||
const DEFAULT_ZOOM = 7;
|
||||
|
||||
/** Source/layer IDs used on the map */
|
||||
const SOURCES = {
|
||||
uats: "gis_uats",
|
||||
terenuri: "gis_terenuri",
|
||||
cladiri: "gis_cladiri",
|
||||
} as const;
|
||||
|
||||
/** Map layer IDs (prefixed to avoid collisions) */
|
||||
const LAYER_IDS = {
|
||||
uatsFill: "layer-uats-fill",
|
||||
uatsLine: "layer-uats-line",
|
||||
uatsLabel: "layer-uats-label",
|
||||
terenuriFill: "layer-terenuri-fill",
|
||||
terenuriLine: "layer-terenuri-line",
|
||||
cladiriFill: "layer-cladiri-fill",
|
||||
cladiriLine: "layer-cladiri-line",
|
||||
} as const;
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Props */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
export type MapViewerHandle = {
|
||||
getMap: () => maplibregl.Map | null;
|
||||
setLayerVisibility: (visibility: LayerVisibility) => void;
|
||||
flyTo: (center: [number, number], zoom?: number) => void;
|
||||
};
|
||||
|
||||
type MapViewerProps = {
|
||||
center?: [number, number];
|
||||
zoom?: number;
|
||||
martinUrl?: string;
|
||||
className?: string;
|
||||
onFeatureClick?: (feature: ClickedFeature) => void;
|
||||
/** External layer visibility control */
|
||||
layerVisibility?: LayerVisibility;
|
||||
};
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Helpers */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
function formatPopupContent(properties: Record<string, unknown>): string {
|
||||
const rows: string[] = [];
|
||||
for (const [key, value] of Object.entries(properties)) {
|
||||
if (value == null || value === "") continue;
|
||||
const displayKey = key.replace(/_/g, " ");
|
||||
rows.push(
|
||||
`<tr><td style="font-weight:600;padding:2px 8px 2px 0;vertical-align:top;white-space:nowrap;color:#64748b">${displayKey}</td><td style="padding:2px 0">${String(value)}</td></tr>`
|
||||
);
|
||||
}
|
||||
if (rows.length === 0) return "<p style='color:#94a3b8'>Fara atribute</p>";
|
||||
return `<table style="font-size:13px;line-height:1.4">${rows.join("")}</table>`;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Component */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
export const MapViewer = forwardRef<MapViewerHandle, MapViewerProps>(
|
||||
function MapViewer(
|
||||
{
|
||||
center,
|
||||
zoom,
|
||||
martinUrl,
|
||||
className,
|
||||
onFeatureClick,
|
||||
layerVisibility,
|
||||
},
|
||||
ref
|
||||
) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const mapRef = useRef<maplibregl.Map | null>(null);
|
||||
const popupRef = useRef<maplibregl.Popup | null>(null);
|
||||
const [mapReady, setMapReady] = useState(false);
|
||||
|
||||
const resolvedMartinUrl = martinUrl ?? DEFAULT_MARTIN_URL;
|
||||
|
||||
/* ---- Imperative handle ---- */
|
||||
useImperativeHandle(ref, () => ({
|
||||
getMap: () => mapRef.current,
|
||||
setLayerVisibility: (vis: LayerVisibility) => {
|
||||
applyLayerVisibility(vis);
|
||||
},
|
||||
flyTo: (c: [number, number], z?: number) => {
|
||||
mapRef.current?.flyTo({ center: c, zoom: z ?? 14, duration: 1500 });
|
||||
},
|
||||
}));
|
||||
|
||||
/* ---- Apply layer visibility ---- */
|
||||
const applyLayerVisibility = useCallback((vis: LayerVisibility) => {
|
||||
const map = mapRef.current;
|
||||
if (!map || !map.isStyleLoaded()) return;
|
||||
|
||||
const mapping: Record<string, string[]> = {
|
||||
uats: [LAYER_IDS.uatsFill, LAYER_IDS.uatsLine, LAYER_IDS.uatsLabel],
|
||||
terenuri: [LAYER_IDS.terenuriFill, LAYER_IDS.terenuriLine],
|
||||
cladiri: [LAYER_IDS.cladiriFill, LAYER_IDS.cladiriLine],
|
||||
};
|
||||
|
||||
for (const [group, layerIds] of Object.entries(mapping)) {
|
||||
const visible = vis[group] !== false; // default visible
|
||||
for (const lid of layerIds) {
|
||||
try {
|
||||
map.setLayoutProperty(lid, "visibility", visible ? "visible" : "none");
|
||||
} catch {
|
||||
// layer might not exist yet
|
||||
}
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
/* ---- Sync external visibility prop ---- */
|
||||
useEffect(() => {
|
||||
if (mapReady && layerVisibility) {
|
||||
applyLayerVisibility(layerVisibility);
|
||||
}
|
||||
}, [mapReady, layerVisibility, applyLayerVisibility]);
|
||||
|
||||
/* ---- Map initialization ---- */
|
||||
useEffect(() => {
|
||||
if (!containerRef.current) return;
|
||||
|
||||
const map = new maplibregl.Map({
|
||||
container: containerRef.current,
|
||||
style: {
|
||||
version: 8,
|
||||
sources: {
|
||||
osm: {
|
||||
type: "raster",
|
||||
tiles: [
|
||||
"https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||||
"https://b.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||||
"https://c.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||||
],
|
||||
tileSize: 256,
|
||||
attribution:
|
||||
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
|
||||
},
|
||||
},
|
||||
layers: [
|
||||
{
|
||||
id: "osm-tiles",
|
||||
type: "raster",
|
||||
source: "osm",
|
||||
minzoom: 0,
|
||||
maxzoom: 19,
|
||||
},
|
||||
],
|
||||
},
|
||||
center: center ?? DEFAULT_CENTER,
|
||||
zoom: zoom ?? DEFAULT_ZOOM,
|
||||
maxZoom: 20,
|
||||
});
|
||||
|
||||
mapRef.current = map;
|
||||
|
||||
/* ---- Controls ---- */
|
||||
map.addControl(new maplibregl.NavigationControl(), "top-right");
|
||||
map.addControl(new maplibregl.ScaleControl({ unit: "metric" }), "bottom-left");
|
||||
map.addControl(
|
||||
new maplibregl.GeolocateControl({
|
||||
positionOptions: { enableHighAccuracy: true },
|
||||
trackUserLocation: false,
|
||||
}),
|
||||
"top-right"
|
||||
);
|
||||
|
||||
/* ---- Add Martin sources + layers on load ---- */
|
||||
map.on("load", () => {
|
||||
// --- UAT boundaries ---
|
||||
map.addSource(SOURCES.uats, {
|
||||
type: "vector",
|
||||
tiles: [`${resolvedMartinUrl}/${SOURCES.uats}/{z}/{x}/{y}.pbf`],
|
||||
minzoom: 0,
|
||||
maxzoom: 16,
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
id: LAYER_IDS.uatsFill,
|
||||
type: "fill",
|
||||
source: SOURCES.uats,
|
||||
"source-layer": SOURCES.uats,
|
||||
paint: {
|
||||
"fill-color": "#8b5cf6",
|
||||
"fill-opacity": 0.05,
|
||||
},
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
id: LAYER_IDS.uatsLine,
|
||||
type: "line",
|
||||
source: SOURCES.uats,
|
||||
"source-layer": SOURCES.uats,
|
||||
paint: {
|
||||
"line-color": "#7c3aed",
|
||||
"line-width": 1.5,
|
||||
},
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
id: LAYER_IDS.uatsLabel,
|
||||
type: "symbol",
|
||||
source: SOURCES.uats,
|
||||
"source-layer": SOURCES.uats,
|
||||
layout: {
|
||||
"text-field": ["coalesce", ["get", "name"], ["get", "uat_name"], ""],
|
||||
"text-size": 12,
|
||||
"text-anchor": "center",
|
||||
"text-allow-overlap": false,
|
||||
},
|
||||
paint: {
|
||||
"text-color": "#5b21b6",
|
||||
"text-halo-color": "#ffffff",
|
||||
"text-halo-width": 1.5,
|
||||
},
|
||||
});
|
||||
|
||||
// --- Terenuri (parcels) ---
|
||||
map.addSource(SOURCES.terenuri, {
|
||||
type: "vector",
|
||||
tiles: [`${resolvedMartinUrl}/${SOURCES.terenuri}/{z}/{x}/{y}.pbf`],
|
||||
minzoom: 10,
|
||||
maxzoom: 18,
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
id: LAYER_IDS.terenuriFill,
|
||||
type: "fill",
|
||||
source: SOURCES.terenuri,
|
||||
"source-layer": SOURCES.terenuri,
|
||||
minzoom: 13,
|
||||
paint: {
|
||||
"fill-color": "#22c55e",
|
||||
"fill-opacity": 0.4,
|
||||
},
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
id: LAYER_IDS.terenuriLine,
|
||||
type: "line",
|
||||
source: SOURCES.terenuri,
|
||||
"source-layer": SOURCES.terenuri,
|
||||
minzoom: 13,
|
||||
paint: {
|
||||
"line-color": "#1a1a1a",
|
||||
"line-width": 0.8,
|
||||
},
|
||||
});
|
||||
|
||||
// --- Cladiri (buildings) ---
|
||||
map.addSource(SOURCES.cladiri, {
|
||||
type: "vector",
|
||||
tiles: [`${resolvedMartinUrl}/${SOURCES.cladiri}/{z}/{x}/{y}.pbf`],
|
||||
minzoom: 12,
|
||||
maxzoom: 18,
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
id: LAYER_IDS.cladiriFill,
|
||||
type: "fill",
|
||||
source: SOURCES.cladiri,
|
||||
"source-layer": SOURCES.cladiri,
|
||||
minzoom: 14,
|
||||
paint: {
|
||||
"fill-color": "#3b82f6",
|
||||
"fill-opacity": 0.5,
|
||||
},
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
id: LAYER_IDS.cladiriLine,
|
||||
type: "line",
|
||||
source: SOURCES.cladiri,
|
||||
"source-layer": SOURCES.cladiri,
|
||||
minzoom: 14,
|
||||
paint: {
|
||||
"line-color": "#1e3a5f",
|
||||
"line-width": 0.6,
|
||||
},
|
||||
});
|
||||
|
||||
// Apply initial visibility if provided
|
||||
if (layerVisibility) {
|
||||
applyLayerVisibility(layerVisibility);
|
||||
}
|
||||
|
||||
setMapReady(true);
|
||||
});
|
||||
|
||||
/* ---- Click handler ---- */
|
||||
const clickableLayers = [
|
||||
LAYER_IDS.terenuriFill,
|
||||
LAYER_IDS.cladiriFill,
|
||||
LAYER_IDS.uatsFill,
|
||||
];
|
||||
|
||||
map.on("click", (e) => {
|
||||
const features = map.queryRenderedFeatures(e.point, {
|
||||
layers: clickableLayers,
|
||||
});
|
||||
|
||||
// Close existing popup
|
||||
if (popupRef.current) {
|
||||
popupRef.current.remove();
|
||||
popupRef.current = null;
|
||||
}
|
||||
|
||||
if (features.length === 0) return;
|
||||
|
||||
const first = features[0];
|
||||
if (!first) return;
|
||||
|
||||
const props = (first.properties ?? {}) as Record<string, unknown>;
|
||||
const sourceLayer = first.sourceLayer ?? first.source ?? "";
|
||||
|
||||
// Notify parent
|
||||
if (onFeatureClick) {
|
||||
onFeatureClick({
|
||||
layerId: first.layer?.id ?? "",
|
||||
sourceLayer,
|
||||
properties: props,
|
||||
coordinates: [e.lngLat.lng, e.lngLat.lat],
|
||||
});
|
||||
}
|
||||
|
||||
// Show popup
|
||||
const popup = new maplibregl.Popup({
|
||||
maxWidth: "360px",
|
||||
closeButton: true,
|
||||
closeOnClick: true,
|
||||
})
|
||||
.setLngLat(e.lngLat)
|
||||
.setHTML(formatPopupContent(props))
|
||||
.addTo(map);
|
||||
|
||||
popupRef.current = popup;
|
||||
});
|
||||
|
||||
/* ---- Cursor change on hover ---- */
|
||||
for (const lid of clickableLayers) {
|
||||
map.on("mouseenter", lid, () => {
|
||||
map.getCanvas().style.cursor = "pointer";
|
||||
});
|
||||
map.on("mouseleave", lid, () => {
|
||||
map.getCanvas().style.cursor = "";
|
||||
});
|
||||
}
|
||||
|
||||
/* ---- Cleanup ---- */
|
||||
return () => {
|
||||
if (popupRef.current) {
|
||||
popupRef.current.remove();
|
||||
popupRef.current = null;
|
||||
}
|
||||
map.remove();
|
||||
mapRef.current = null;
|
||||
setMapReady(false);
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [resolvedMartinUrl]);
|
||||
|
||||
/* ---- Sync center/zoom prop changes ---- */
|
||||
useEffect(() => {
|
||||
if (!mapReady || !mapRef.current) return;
|
||||
if (center) {
|
||||
mapRef.current.flyTo({
|
||||
center,
|
||||
zoom: zoom ?? mapRef.current.getZoom(),
|
||||
duration: 1500,
|
||||
});
|
||||
}
|
||||
}, [center, zoom, mapReady]);
|
||||
|
||||
return (
|
||||
<div className={cn("relative w-full h-full min-h-[400px]", className)}>
|
||||
<div ref={containerRef} className="absolute inset-0" />
|
||||
{!mapReady && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-muted/50">
|
||||
<p className="text-sm text-muted-foreground">Se incarca harta...</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
Reference in New Issue
Block a user