Hamza/maps-saas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement geometry snapping logic for manual road insertion and approved roads topology

Browse Source
This commit is contained in:
Hamza-Ayed
2026-08-16 17:34:06 +03:00
parent b3ffa7c71d
commit 03cdc6fe9c
12 changed files with 1431 additions and 453 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/pages/CompareView.tsx
+139 -8
View File
@@ -1,8 +1,18 @@
import React, { useEffect, useRef, useState } from 'react';
import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
import mlcontour from 'maplibre-contour';
import { attachIconLoader } from '../utils/mapIcons';
// Initialize DEM source for on-the-fly global contours (Jordan, Syria, Iraq, Egypt, etc.)
const demSource = new mlcontour.DemSource({
url: 'https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png',
encoding: 'terrarium',
maxzoom: 14,
worker: true,
});
demSource.setupMaplibre(maplibregl);
/**
* CompareView — side-by-side, pan/zoom-synced map comparison.
*
@@ -91,9 +101,79 @@ const CompareView: React.FC = () => {
}
lMap.on('load', () => {
lMap.addSource('approved', { type: 'vector', tiles: [`${TILES}/approved_roads/{z}/{x}/{y}`], minzoom: 8, maxzoom: 18 });
lMap.addLayer({ id: 'approved-casing', type: 'line', source: 'approved', 'source-layer': 'approved_roads', paint: { 'line-color': '#d4d4d4', 'line-width': ['interpolate', ['linear'], ['zoom'], 13, 1, 16, 8] } });
lMap.addLayer({ id: 'approved', type: 'line', source: 'approved', 'source-layer': 'approved_roads', paint: { 'line-color': '#ffffff', 'line-width': ['interpolate', ['linear'], ['zoom'], 13, 0.5, 16, 6] } });
// Dynamic On-the-Fly Contours from Elevation DEM
const contourUrl = demSource.contourProtocolUrl({
thresholds: {
10: [100, 500],
11: [50, 250],
12: [25, 100],
13: [20, 100],
14: [10, 50],
15: [10, 50],
16: [10, 50],
17: [10, 50],
18: [10, 50],
},
elevationKey: 'ele',
levelKey: 'level',
contourLayer: 'contours',
});
if (!lMap.getSource('contour-source')) {
lMap.addSource('contour-source', {
type: 'vector',
tiles: [contourUrl],
maxzoom: 18,
});
lMap.addLayer({
id: 'contour-lines-minor',
type: 'line',
source: 'contour-source',
'source-layer': 'contours',
minzoom: 10,
filter: ['==', ['get', 'level'], 0],
paint: {
'line-color': '#a86324',
'line-width': 1.1,
'line-opacity': 0.9,
},
});
lMap.addLayer({
id: 'contour-lines-major',
type: 'line',
source: 'contour-source',
'source-layer': 'contours',
minzoom: 9,
filter: ['>', ['get', 'level'], 0],
paint: {
'line-color': '#703800',
'line-width': 2.0,
'line-opacity': 1.0,
},
});
lMap.addLayer({
id: 'contour-labels',
type: 'symbol',
source: 'contour-source',
'source-layer': 'contours',
minzoom: 12,
filter: ['>', ['get', 'level'], 0],
layout: {
'symbol-placement': 'line',
'text-field': ['concat', ['to-string', ['get', 'ele']], ' m'],
'text-size': 10,
'text-font': ['Noto Sans Bold', 'Open Sans Bold'],
},
paint: {
'text-color': '#5c2d00',
'text-halo-color': 'rgba(255, 255, 255, 0.95)',
'text-halo-width': 2,
},
});
}
});
// Keep the two views locked together. The guard stops the move→jumpTo→move loop.
@@ -122,18 +202,69 @@ const CompareView: React.FC = () => {
m.once('styledata', () => m.jumpTo({ center: c, zoom: z, bearing: b, pitch: p }));
}, [refKey]);
const [showTerrain, setShowTerrain] = useState(true);
const [showContours, setShowContours] = useState(true);
const [showAdmin, setShowAdmin] = useState(true);
const [show3D, setShow3D] = useState(false);
// Sync toggles with leftMap layers
useEffect(() => {
const m = leftMap.current;
if (!m) return;
// Wait if style is not loaded yet
const applyToggles = () => {
if (m.getLayer('hillshading')) {
m.setLayoutProperty('hillshading', 'visibility', showTerrain ? 'visible' : 'none');
}
['contour-lines-minor', 'contour-lines-major', 'contour-labels'].forEach(l => {
if (m.getLayer(l)) m.setLayoutProperty(l, 'visibility', showContours ? 'visible' : 'none');
});
['admin-boundary-national', 'admin-boundary-governorate-poly', 'admin-boundary-governorate', 'admin-boundary-district-poly', 'admin-boundary-district'].forEach(l => {
if (m.getLayer(l)) m.setLayoutProperty(l, 'visibility', showAdmin ? 'visible' : 'none');
});
['building-3d', 'building-3d-osm'].forEach(l => {
if (m.getLayer(l)) m.setLayoutProperty(l, 'visibility', show3D ? 'visible' : 'none');
});
// Tilt camera for 3D perspective
m.easeTo({ pitch: show3D ? 55 : 0, duration: 600 });
};
if (m.isStyleLoaded()) {
applyToggles();
} else {
m.once('styledata', applyToggles);
}
}, [showTerrain, showContours, showAdmin, show3D]);
const fmt = (n: number) => n.toFixed(6);
const z = Math.round(center.zoom);
const btn: React.CSSProperties = { background: '#1e293b', border: '1px solid #334155', color: '#cbd5e1', padding: '6px 10px', borderRadius: '8px', cursor: 'pointer', fontSize: '0.75rem', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: '5px' };
const btn: React.CSSProperties = { background: '#1e293b', border: '1px solid #334155', color: '#cbd5e1', padding: '5px 8px', borderRadius: '8px', cursor: 'pointer', fontSize: '0.72rem', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: '4px' };
const toggleBtn = (active: boolean): React.CSSProperties => ({
...btn,
borderColor: active ? '#10b981' : '#334155',
background: active ? 'rgba(16,185,129,0.2)' : '#1e293b',
color: active ? '#34d399' : '#94a3b8',
fontWeight: active ? 600 : 400
});
return (
<div style={{ display: 'flex', flexDirection: 'column', height: '100vh', background: '#0f172a', color: '#e2e8f0', fontFamily: 'Inter, system-ui, sans-serif' }}>
{/* Toolbar */}
<div style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '10px 16px', paddingRight: '280px', borderBottom: '1px solid #1e293b', background: '#0f172a' }}>
<strong style={{ fontSize: '0.9rem', whiteSpace: 'nowrap' }}>⚖️ Compare</strong>
<span style={{ color: '#64748b', fontSize: '0.78rem', whiteSpace: 'nowrap' }}>Our map ⟷ reference — synced</span>
<div style={{ display: 'flex', alignItems: 'center', gap: '10px', padding: '8px 14px', paddingRight: '280px', borderBottom: '1px solid #1e293b', background: '#0f172a', flexWrap: 'wrap' }}>
<strong style={{ fontSize: '0.85rem', whiteSpace: 'nowrap' }}>⚖️ Compare</strong>
{/* Left Map Layer Toggles */}
<div style={{ display: 'flex', gap: '5px', alignItems: 'center', background: 'rgba(30,41,59,0.7)', padding: '2px 6px', borderRadius: '8px', border: '1px solid #334155' }}>
<span style={{ fontSize: '0.68rem', color: '#94a3b8' }}>Our Map:</span>
<button onClick={() => setShowTerrain(!showTerrain)} style={toggleBtn(showTerrain)}>🏔️ Relief</button>
<button onClick={() => setShowContours(!showContours)} style={toggleBtn(showContours)}>〰️ Contours</button>
<button onClick={() => setShowAdmin(!showAdmin)} style={toggleBtn(showAdmin)}>🏛️ Admin</button>
<button onClick={() => setShow3D(!show3D)} style={toggleBtn(show3D)}>🏢 3D</button>
</div>
<div style={{ display: 'flex', gap: '6px', marginInlineStart: 'auto', overflowX: 'auto', paddingBottom: '2px' }}>
<div style={{ display: 'flex', gap: '5px', marginInlineStart: 'auto', overflowX: 'auto', paddingBottom: '2px' }}>
{(Object.keys(REFS) as RefKey[]).map(k => (
<button key={k} onClick={() => setRefKey(k)}
style={{ ...btn, whiteSpace: 'nowrap', flexShrink: 0, ...(refKey === k ? { borderColor: '#6366f1', color: '#fff', background: 'rgba(99,102,241,0.35)', fontWeight: 600 } : {}) }}>
apps/web/src/pages/IntelligenceDashboard.tsx
+142 -41
View File
@@ -51,6 +51,7 @@ const IntelligenceDashboard: React.FC = () => {
const [loading, setLoading] = useState(true);
const [apiKey, setApiKey] = useState(localStorage.getItem('map_admin_key') || '');
const [needsAuth, setNeedsAuth] = useState(!localStorage.getItem('map_admin_key'));
const [sel, setSel] = useState<string | null>(null);
// Right Map State
const [refKey, setRefKey] = useState<RefKey>('google-hybrid');
@@ -76,6 +77,70 @@ const IntelligenceDashboard: React.FC = () => {
if (rightMapRef.current) rightMapRef.current.getCanvas().style.cursor = drawing ? 'crosshair' : '';
}, [drawing]);
// Helper: Find closest point on line segment
const getClosestPointOnSegment = (p: [number, number], a: [number, number], b: [number, number]): [number, number] => {
const dx = b[0] - a[0];
const dy = b[1] - a[1];
if (dx === 0 && dy === 0) return a;
const t = Math.max(0, Math.min(1, ((p[0] - a[0]) * dx + (p[1] - a[1]) * dy) / (dx * dx + dy * dy)));
return [a[0] + t * dx, a[1] + t * dy];
};
// Helper: Snap to nearest road feature on map
const getSnappedLngLat = (map: maplibregl.Map, point: { x: number; y: number }, rawLngLat: [number, number]): [number, number] => {
const radius = 28; // 28px magnet radius
const bbox: [maplibregl.PointLike, maplibregl.PointLike] = [
[point.x - radius, point.y - radius],
[point.x + radius, point.y + radius]
];
try {
const features = map.queryRenderedFeatures(bbox).filter(f => {
const id = f.layer?.id || '';
return id.startsWith('road-') || id.startsWith('approved-') || id === 'cp' || id === 'ca' || id === 'cp-overture';
});
let bestPoint: [number, number] = rawLngLat;
let minDistancePx = radius;
for (const f of features) {
const geom = f.geometry;
if (!geom) continue;
const lines: [number, number][][] = geom.type === 'LineString'
? [geom.coordinates as [number, number][]]
: geom.type === 'MultiLineString'
? (geom.coordinates as [number, number][][])
: [];
for (const line of lines) {
for (let i = 0; i < line.length - 1; i++) {
const p1 = map.project(line[i] as any);
const p2 = map.project(line[i + 1] as any);
const dx = p2.x - p1.x;
const dy = p2.y - p1.y;
const lenSq = dx * dx + dy * dy;
if (lenSq === 0) continue;
const t = Math.max(0, Math.min(1, ((point.x - p1.x) * dx + (point.y - p1.y) * dy) / lenSq));
const closePx = { x: p1.x + t * dx, y: p1.y + t * dy };
const distPx = Math.hypot(point.x - closePx.x, point.y - closePx.y);
if (distPx < minDistancePx) {
minDistancePx = distPx;
const unprojected = map.unproject(closePx);
bestPoint = [unprojected.lng, unprojected.lat];
}
}
}
}
return bestPoint;
} catch {
return rawLngLat;
}
};
const redrawDrawing = () => {
const lMap = leftMapRef.current; const rMap = rightMapRef.current;
if (!lMap || !rMap) return;
@@ -91,6 +156,15 @@ const IntelligenceDashboard: React.FC = () => {
(rMap.getSource('draw') as maplibregl.GeoJSONSource)?.setData(data as any);
};
const updateSnapGuide = (map: maplibregl.Map, coords: [number, number] | null) => {
const src = map.getSource('snap-guide') as maplibregl.GeoJSONSource;
if (!src) return;
src.setData({
type: 'FeatureCollection',
features: coords ? [{ type: 'Feature', geometry: { type: 'Point', coordinates: coords }, properties: {} }] : []
});
};
const pushMapData = () => {
const m = leftMapRef.current;
if (!m || !m.isStyleLoaded()) return;
@@ -209,14 +283,8 @@ const IntelligenceDashboard: React.FC = () => {
lMap.addSource('closures', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } } as any);
lMap.addSource('hl', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } } as any);
// approved_roads is served by Martin on the tile host — NOT the app host. An
// empty default made this resolve to /approved_roads on the app host (404), so
// approved roads never drew. Point it at the real Martin host.
const TILES = (import.meta as any).env.VITE_TILES_URL || 'https://tiles.intaleqapp.com';
lMap.addSource('approved', { type: 'vector', tiles: [`${TILES}/approved_roads/{z}/{x}/{y}`], minzoom: 8, maxzoom: 18 });
lMap.addLayer({ id: 'approved-casing', type: 'line', source: 'approved', 'source-layer': 'approved_roads', paint: { 'line-color': '#d4d4d4', 'line-width': ['interpolate', ['linear'], ['zoom'], 13, 1, 16, 8] } });
lMap.addLayer({ id: 'approved', type: 'line', source: 'approved', 'source-layer': 'approved_roads', paint: { 'line-color': '#ffffff', 'line-width': ['interpolate', ['linear'], ['zoom'], 13, 0.5, 16, 6] } });
lMap.addSource('draw', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } } as any);
lMap.addSource('snap-guide', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } } as any);
lMap.addLayer({ id: 'cl', type: 'line', source: 'closures', paint: { 'line-color': '#ef4444', 'line-width': 4, 'line-dasharray': [3, 2] } });
lMap.addLayer({ id: 'cp', type: 'line', source: 'cands', filter: ['all', ['==', ['get', 'status'], 'pending'], ['!=', ['get', 'source'], 'overture']] as any, paint: { 'line-color': ['interpolate', ['linear'], ['get', 'confidence'], 0, '#f97316', 0.6, '#eab308', 0.8, '#22c55e'] as any, 'line-width': 4, 'line-dasharray': [4, 3] } });
@@ -225,56 +293,78 @@ const IntelligenceDashboard: React.FC = () => {
lMap.addLayer({ id: 'hl', type: 'line', source: 'hl', paint: { 'line-color': '#60a5fa', 'line-width': 6, 'line-blur': 1 } });
lMap.addLayer({ id: 'draw-line', type: 'line', source: 'draw', paint: { 'line-color': '#3b82f6', 'line-width': 4, 'line-dasharray': [2, 2] } });
lMap.addLayer({ id: 'draw-pts', type: 'circle', source: 'draw', paint: { 'circle-radius': 5, 'circle-color': '#ffffff', 'circle-stroke-width': 2, 'circle-stroke-color': '#3b82f6' } });
lMap.addLayer({ id: 'snap-guide-pulse', type: 'circle', source: 'snap-guide', paint: { 'circle-radius': 8, 'circle-color': 'rgba(16, 185, 129, 0.4)', 'circle-stroke-width': 2, 'circle-stroke-color': '#10b981' } });
lMap.addLayer({ id: 'snap-guide-dot', type: 'circle', source: 'snap-guide', paint: { 'circle-radius': 4, 'circle-color': '#10b981' } });
const onCandidateClick = (e: any) => {
const p = e.features?.[0]?.properties as any; if (!p) return;
const l = e.features?.[0]?.layer?.id;
setSel(p.id);
const isOvt = p.source === 'overture';
const isAppr = l === 'ca' || p.status === 'approved';
const title = isAppr ? '✅ Approved Road' : isOvt ? '🗺️ Overture road (missing)' : '🛣️ Driver-traced road';
const nameLine = p.name ? `<b>${p.name}</b><br/>` : '';
const evidence = isOvt ? `${p.uniqueDriverCount ?? 0} trace pts corroborate` : `${p.uniqueDriverCount || 1} drivers`;
if (popupRef.current) popupRef.current.remove();
const popupDiv = document.createElement('div');
popupDiv.style.font = '12px sans-serif';
popupDiv.style.color = '#1e293b';
popupDiv.style.lineHeight = '1.6';
popupDiv.innerHTML = `${nameLine}<b>${title}</b><br/>Conf: <b style="color:${cc(p.confidence)}">${Math.round(p.confidence * 100)}%</b><br/>${Math.round(p.lengthMeters || 0)}m | ${evidence}
<br/><button id="btn-del-${p.id}" style="margin-top:8px;background:#ef4444;color:white;border:none;border-radius:4px;padding:4px 8px;cursor:pointer;">🗑️ Delete Road</button>`;
popupDiv.querySelector(`#btn-del-${p.id}`)?.addEventListener('click', () => {
deleteRoad(p.id, isAppr ? 'approved' : 'candidate');
popupRef.current?.remove();
});
popupRef.current = new maplibregl.Popup({ offset: 12 }).setLngLat(e.lngLat).setDOMContent(popupDiv).addTo(lMap);
};
['cp', 'cp-overture', 'ca'].forEach(layer => {
try {
lMap.on('click', layer, onCandidateClick);
lMap.on('mouseenter', layer, () => { lMap.getCanvas().style.cursor = 'pointer'; });
lMap.on('mouseleave', layer, () => { lMap.getCanvas().style.cursor = ''; });
} catch (err) {
console.warn(`Layer event registration skipped for ${layer}:`, err);
}
});
pushMapData();
});
rMap.on('load', () => {
rMap.addSource('draw', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } } as any);
rMap.addSource('snap-guide', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } } as any);
rMap.addLayer({ id: 'draw-line', type: 'line', source: 'draw', paint: { 'line-color': '#3b82f6', 'line-width': 4, 'line-dasharray': [2, 2] } });
rMap.addLayer({ id: 'draw-pts', type: 'circle', source: 'draw', paint: { 'circle-radius': 5, 'circle-color': '#ffffff', 'circle-stroke-width': 2, 'circle-stroke-color': '#3b82f6' } });
rMap.addLayer({ id: 'snap-guide-pulse', type: 'circle', source: 'snap-guide', paint: { 'circle-radius': 8, 'circle-color': 'rgba(16, 185, 129, 0.4)', 'circle-stroke-width': 2, 'circle-stroke-color': '#10b981' } });
rMap.addLayer({ id: 'snap-guide-dot', type: 'circle', source: 'snap-guide', paint: { 'circle-radius': 4, 'circle-color': '#10b981' } });
});
const onClickDraw = (e: any) => {
if (!drawingRef.current) return;
pointsRef.current.push([e.lngLat.lng, e.lngLat.lat]);
const targetMap = e.target as maplibregl.Map;
const snapped = getSnappedLngLat(targetMap, e.point, [e.lngLat.lng, e.lngLat.lat]);
pointsRef.current.push(snapped);
redrawDrawing();
updateSnapGuide(targetMap, snapped);
};
const onMouseMoveDraw = (e: any) => {
if (!drawingRef.current) return;
const targetMap = e.target as maplibregl.Map;
const snapped = getSnappedLngLat(targetMap, e.point, [e.lngLat.lng, e.lngLat.lat]);
const isSnapped = Math.hypot(snapped[0] - e.lngLat.lng, snapped[1] - e.lngLat.lat) > 0.000001;
updateSnapGuide(targetMap, isSnapped ? snapped : null);
};
lMap.on('click', onClickDraw);
rMap.on('click', onClickDraw);
const onCandidateClick = (e: any) => {
const p = e.features?.[0]?.properties as any; if (!p) return;
const l = e.features?.[0]?.layer?.id;
setSel(p.id);
const isOvt = p.source === 'overture';
const isAppr = l === 'approved';
const title = isAppr ? '✅ Approved Road' : isOvt ? '🗺️ Overture road (missing)' : '🛣️ Driver-traced road';
const nameLine = p.name ? `<b>${p.name}</b><br/>` : '';
const evidence = isOvt ? `${p.uniqueDriverCount ?? 0} trace pts corroborate` : `${p.uniqueDriverCount || 1} drivers`;
if (popupRef.current) popupRef.current.remove();
const popupDiv = document.createElement('div');
popupDiv.style.font = '12px sans-serif';
popupDiv.style.color = '#1e293b';
popupDiv.style.lineHeight = '1.6';
popupDiv.innerHTML = `${nameLine}<b>${title}</b><br/>Conf: <b style="color:${cc(p.confidence)}">${Math.round(p.confidence * 100)}%</b><br/>${Math.round(p.lengthMeters || 0)}m | ${evidence}
<br/><button id="btn-del-${p.id}" style="margin-top:8px;background:#ef4444;color:white;border:none;border-radius:4px;padding:4px 8px;cursor:pointer;">🗑️ Delete Road</button>`;
popupDiv.querySelector(`#btn-del-${p.id}`)?.addEventListener('click', () => {
deleteRoad(p.id, isAppr ? 'approved' : 'candidate');
popupRef.current?.remove();
});
popupRef.current = new maplibregl.Popup({ offset: 12 }).setLngLat(e.lngLat).setDOMContent(popupDiv).addTo(lMap);
};
['cp', 'cp-overture', 'approved'].forEach(layer => {
lMap.on('click', layer, onCandidateClick);
lMap.on('mouseenter', layer, () => { lMap.getCanvas().style.cursor = 'pointer'; });
lMap.on('mouseleave', layer, () => { lMap.getCanvas().style.cursor = ''; });
});
lMap.on('mousemove', onMouseMoveDraw);
rMap.on('mousemove', onMouseMoveDraw);
leftMapRef.current = lMap;
rightMapRef.current = rMap;
@@ -282,8 +372,13 @@ const IntelligenceDashboard: React.FC = () => {
return () => { lMap.remove(); rMap.remove(); leftMapRef.current = null; rightMapRef.current = null; };
}, []);
const mountedRef = useRef(false);
// Update right map when reference layer changes
useEffect(() => {
if (!mountedRef.current) {
mountedRef.current = true;
return;
}
const m = rightMapRef.current;
if (!m) return;
const c = m.getCenter(); const z = m.getZoom(); const b = m.getBearing(); const p = m.getPitch();
@@ -404,7 +499,13 @@ const IntelligenceDashboard: React.FC = () => {
setTimeout(() => setMsg(''), 5000);
};
const cancelDrawing = () => { pointsRef.current = []; redrawDrawing(); setDrawing(false); };
const cancelDrawing = () => {
pointsRef.current = [];
redrawDrawing();
if (leftMapRef.current) updateSnapGuide(leftMapRef.current, null);
if (rightMapRef.current) updateSnapGuide(rightMapRef.current, null);
setDrawing(false);
};
if (needsAuth) {
return (