update tile endpoints to the Martin host, refine map styling and snapping logic, and add geolocation-based map centering.

2026-07-15 21:56:41 +03:00
parent 7a64be5833
commit 78fe6c48cc
9 changed files with 544 additions and 89 deletions
@@ -54,7 +54,7 @@ const MapComponent: React.FC<MapComponentProps> = ({
    const tilesUrl = (import.meta as any).env.VITE_TILES_URL || 'https://tiles.intaleqapp.com';

    try {
-      map.current = new maplibregl.Map({
+      const initialMap = new maplibregl.Map({
        container: mapContainer.current,
        style: {
          version: 8,
@@ -75,6 +75,12 @@ const MapComponent: React.FC<MapComponentProps> = ({
              type: 'vector',
              tiles: [`${tilesUrl}/planet_osm_point/{z}/{x}/{y}`],
              maxzoom: 14
+            },
+            'approved_roads': {
+              type: 'vector',
+              tiles: [`${tilesUrl}/approved_roads/{z}/{x}/{y}`],
+              minzoom: 8,
+              maxzoom: 18
            }
          },
          layers: [
@@ -145,6 +151,26 @@ const MapComponent: React.FC<MapComponentProps> = ({
                'line-width': ['interpolate', ['linear'], ['zoom'], 13, 1, 16, 8] as any
              }
            },
+            {
+              id: 'approved-casing',
+              type: 'line',
+              source: 'approved_roads',
+              'source-layer': 'approved_roads',
+              paint: {
+                'line-color': '#d4d4d4',
+                'line-width': ['interpolate', ['linear'], ['zoom'], 13, 1, 16, 8] as any
+              }
+            },
+            {
+              id: 'approved-core',
+              type: 'line',
+              source: 'approved_roads',
+              'source-layer': 'approved_roads',
+              paint: {
+                'line-color': '#ffffff',
+                'line-width': ['interpolate', ['linear'], ['zoom'], 13, 0.5, 16, 6] as any
+              }
+            },
            {
              id: 'road-core-minor',
              type: 'line',
@@ -352,19 +378,37 @@ const MapComponent: React.FC<MapComponentProps> = ({
                'text-anchor': 'top',
                'visibility': showPOIs ? 'visible' : 'none'
              },
-              paint: { 
-                'text-color': '#222', 
-                'text-halo-color': 'rgba(255, 255, 255, 0.9)', 
+              paint: {
+                'text-color': '#222',
+                'text-halo-color': 'rgba(255, 255, 255, 0.9)',
                'text-halo-width': 2
              }
            }
          ]
        },
        center: [35.9106, 31.9539],
-        zoom: 12,
      });

-      map.current.on('load', () => {
+      map.current = initialMap;
+
+      // Request User Location
+      if ('geolocation' in navigator) {
+        navigator.geolocation.getCurrentPosition(
+          (position) => {
+            if (initialMap) {
+              initialMap.flyTo({
+                center: [position.coords.longitude, position.coords.latitude],
+                zoom: 14,
+                essential: true
+              });
+            }
+          },
+          (error) => console.warn('Geolocation denied or failed', error),
+          { timeout: 5000 }
+        );
+      }
+
+      initialMap.on('load', () => {
        console.log("MapComponent: Map Loaded Successfully");
        onMapLoad(map.current!);
      });
@@ -394,13 +438,13 @@ const MapComponent: React.FC<MapComponentProps> = ({
  return (
    <div ref={mapContainer} style={{ width: '100%', height: '100%', position: 'relative' }}>
      {/* Intaleq Premium Branding Watermark */}
-      <div 
-        style={{ 
-          position: 'absolute', 
-          bottom: '10px', 
-          left: '10px', 
-          zIndex: 10, 
-          display: 'flex', 
+      <div
+        style={{
+          position: 'absolute',
+          bottom: '10px',
+          left: '10px',
+          zIndex: 10,
+          display: 'flex',
          alignItems: 'center',
          background: 'rgba(255, 255, 255, 0.85)',
          backdropFilter: 'blur(12px) saturate(180%)',
@@ -414,16 +458,16 @@ const MapComponent: React.FC<MapComponentProps> = ({
          border: '1px solid rgba(255,255,255,0.35)'
        }}
      >
-        <img 
-          src="/intaleq-logo.png" 
-          alt="Intaleq" 
-          style={{ height: '18px', filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.1))' }} 
+        <img
+          src="/intaleq-logo.png"
+          alt="Intaleq"
+          style={{ height: '18px', filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.1))' }}
        />
-        <span 
-          style={{ 
-            fontSize: '10px', 
-            fontWeight: 800, 
-            color: '#c0a048', 
+        <span
+          style={{
+            fontSize: '10px',
+            fontWeight: 800,
+            color: '#c0a048',
            letterSpacing: '0.8px',
            textTransform: 'uppercase'
          }}
@@ -15,7 +15,10 @@ import 'maplibre-gl/dist/maplibre-gl.css';
 * Purpose: visually confirm whether a street/place exists before adding or approving it.
 */

-const TILES = (import.meta as any).env.VITE_TILES_URL || 'https://tiles.intaleqapp.com';
+// Martin vector-tile host (serves planet_osm_*, approved_roads, …). This is a
+// DIFFERENT host from where the app + its style.json are served, so it must be
+// absolute — an empty default resolved to the app host, which serves no tiles.
+const TILES = (import.meta as any).env.VITE_TILES_URL || 'http://188.68.36.205:3202';

 type RefKey = 'google-sat' | 'esri-sat' | 'esri-streets' | 'osm';
 const REFS: Record<RefKey, { label: string; tiles: string; attribution: string; maxzoom: number }> = {
@@ -48,14 +51,27 @@ const CompareView: React.FC = () => {
    const start: [number, number] = [35.91, 31.95];
    const startZoom = 15;

-    const lMap = new maplibregl.Map({ container: leftDiv.current, style: TILES + '/style.json', center: start, zoom: startZoom, attributionControl: false });
+    // Base style is served by the APP host as a static file (its internal sources
+    // already point at the absolute Martin host), so load it relatively — never
+    // prefixed with the tile host, which does not serve /style.json.
+    const lMap = new maplibregl.Map({ container: leftDiv.current, style: '/style.json', center: start, zoom: startZoom, attributionControl: false });
    const rMap = new maplibregl.Map({ container: rightDiv.current, style: rasterStyle(REFS['esri-sat']), center: start, zoom: startZoom, attributionControl: false });
    lMap.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-left');
    rMap.addControl(new maplibregl.AttributionControl({ compact: true }), 'bottom-right');

+    if ('geolocation' in navigator) {
+      navigator.geolocation.getCurrentPosition((pos) => {
+        const coords: [number, number] = [pos.coords.longitude, pos.coords.latitude];
+        lMap.flyTo({ center: coords, zoom: 14, essential: true });
+        rMap.flyTo({ center: coords, zoom: 14, essential: true });
+        setCenter({ lng: coords[0], lat: coords[1], zoom: 14 });
+      });
+    }
+
    lMap.on('load', () => {
      lMap.addSource('approved', { type: 'vector', tiles: [`${TILES}/approved_roads/{z}/{x}/{y}`], minzoom: 8, maxzoom: 18 });
-      lMap.addLayer({ id: 'approved', type: 'line', source: 'approved', 'source-layer': 'approved_roads', paint: { 'line-color': '#22c55e', 'line-width': ['interpolate', ['linear'], ['zoom'], 10, 1.5, 16, 8] } });
+      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] } });
    });

    // Keep the two views locked together. The guard stops the move→jumpTo→move loop.
@@ -59,15 +59,18 @@ const IntelligenceDashboard: React.FC = () => {
  }, [drawing]);

  const redrawDrawing = () => {
-    const lm = leftMapRef.current;
-    const rm = rightMapRef.current;
+    const lMap = leftMapRef.current; const rMap = rightMapRef.current;
+    if (!lMap || !rMap) return;
    const pts = pointsRef.current;
-    const feats: any[] = [];
-    pts.forEach(p => feats.push({ type: 'Feature', geometry: { type: 'Point', coordinates: p } }));
-    if (pts.length > 1) feats.push({ type: 'Feature', geometry: { type: 'LineString', coordinates: pts } });
-    const col = { type: 'FeatureCollection', features: feats };
-    if (lm && lm.isStyleLoaded()) (lm.getSource('draw') as maplibregl.GeoJSONSource)?.setData(col as any);
-    if (rm && rm.isStyleLoaded()) (rm.getSource('draw') as maplibregl.GeoJSONSource)?.setData(col as any);
+    const data = {
+      type: 'FeatureCollection',
+      features: [
+        ...(pts.length >= 2 ? [{ type: 'Feature' as const, geometry: { type: 'LineString' as const, coordinates: pts }, properties: {} }] : []),
+        ...pts.map(p => ({ type: 'Feature' as const, geometry: { type: 'Point' as const, coordinates: p }, properties: {} }))
+      ]
+    };
+    (lMap.getSource('draw') as maplibregl.GeoJSONSource)?.setData(data as any);
+    (rMap.getSource('draw') as maplibregl.GeoJSONSource)?.setData(data as any);
  };

  const pushMapData = () => {
@@ -163,6 +166,15 @@ const IntelligenceDashboard: React.FC = () => {
    });

    lMap.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-left');
+    rMap.addControl(new maplibregl.AttributionControl({ compact: true }), 'bottom-right');
+
+    if ('geolocation' in navigator) {
+      navigator.geolocation.getCurrentPosition((pos) => {
+        const coords: [number, number] = [pos.coords.longitude, pos.coords.latitude];
+        lMap.flyTo({ center: coords, zoom: 14, essential: true });
+        rMap.flyTo({ center: coords, zoom: 14, essential: true });
+      });
+    }

    // Sync logic
    const link = (from: maplibregl.Map, to: maplibregl.Map) => {
@@ -178,6 +190,14 @@ const IntelligenceDashboard: React.FC = () => {
      lMap.addSource('cands', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } } as any);
      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.addLayer({ id: 'cl', type: 'line', source: 'closures', paint: { 'line-color': '#ef4444', 'line-width': 4, 'line-dasharray': [3, 2] } });
@@ -208,18 +228,31 @@ const IntelligenceDashboard: React.FC = () => {

    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 title = isOvt ? '🗺️ Overture road (missing)' : '🛣️ Driver-traced road';
+      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} drivers`;
+      const evidence = isOvt ? `${p.uniqueDriverCount ?? 0} trace pts corroborate` : `${p.uniqueDriverCount || 1} drivers`;
      if (popupRef.current) popupRef.current.remove();
-      popupRef.current = new maplibregl.Popup({ offset: 12 }).setLngLat(e.lngLat)
-        .setHTML(`<div style="font:12px sans-serif;color:#1e293b;line-height:1.6">${nameLine}<b>${title}</b><br/>Conf: <b style="color:${cc(p.confidence)}">${Math.round(p.confidence * 100)}%</b><br/>${Math.round(p.lengthMeters)}m | ${evidence}</div>`)
-        .addTo(lMap);
+      
+      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'].forEach(layer => {
+    ['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 = ''; });
@@ -278,6 +311,25 @@ const IntelligenceDashboard: React.FC = () => {
    setTimeout(() => setMsg(''), 5000);
  };

+  const deleteRoad = async (id: string, type: 'approved' | 'candidate') => {
+    try {
+      const res = await fetch(`${API}/map-refinement/roads/${type}/${id}`, {
+        method: 'DELETE',
+        headers: { 'x-api-key': apiKey }
+      });
+      if (!res.ok) throw new Error('Failed to delete');
+      setMsg(`🗑️ Deleted ${type} road successfully.`);
+      setSel(null);
+      (leftMapRef.current?.getSource('hl') as maplibregl.GeoJSONSource)?.setData({ type: 'FeatureCollection', features: [] });
+      load();
+      // Force MapLibre to drop cached vector tiles completely for approved roads
+      if (type === 'approved') {
+        setTimeout(() => window.location.reload(), 1500);
+      }
+    } catch { setMsg('Delete failed.'); }
+    setTimeout(() => setMsg(''), 5000);
+  };
+
  const runAI = async () => {
    setMsg('🧠 Deep analysis started...');
    try {
@@ -298,18 +350,18 @@ const IntelligenceDashboard: React.FC = () => {
    setTimeout(() => setMsg(''), 6000);
  };

-  const submitDrawing = async () => {
+  const submitRoad = async () => {
    if (pointsRef.current.length < 2) return setMsg('Draw at least 2 points!');
-    
    const roadName = window.prompt('Enter a name for this new road:', 'Unnamed Road');
-    if (roadName === null) return; // User cancelled
-
+    if (roadName === null) return;
+    const highway = window.prompt('Enter road category (primary, secondary, residential, unclassified, service):', 'unclassified');
+    if (highway === null) return;
    try {
      const geojson = { type: 'LineString', coordinates: pointsRef.current };
      const res = await fetch(`${API}/map-refinement/roads/candidates/manual`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'x-api-key': apiKey },
-        body: JSON.stringify({ geojson, name: roadName }),
+        body: JSON.stringify({ geojson, name: roadName, highway }),
      });
      if (!res.ok) throw new Error('Failed to submit road');
      setMsg('Road submitted for intelligence analysis!');
@@ -400,7 +452,7 @@ const IntelligenceDashboard: React.FC = () => {
            <div style={{ background: '#1e3a8a30', border: '1px solid #3b82f6', padding: '10px', borderRadius: '8px', fontSize: '0.75rem', color: '#bfdbfe' }}>
              Click on <b>either map</b> to trace the street.<br />
              <div style={{ display: 'flex', gap: '8px', marginTop: '8px' }}>
-                <button onClick={submitDrawing} style={{ flex: 1, background: '#3b82f6', color: 'white', border: 'none', padding: '6px', borderRadius: '6px', cursor: 'pointer', fontWeight: 600 }}>Submit Road</button>
+                <button onClick={submitRoad} style={{ flex: 1, background: '#3b82f6', color: 'white', border: 'none', padding: '6px', borderRadius: '6px', cursor: 'pointer', fontWeight: 600 }}>Submit Road</button>
                <button onClick={() => { pointsRef.current = []; redrawDrawing(); }} style={{ flex: 1, background: 'transparent', color: '#94a3b8', border: '1px solid #334155', padding: '6px', borderRadius: '6px', cursor: 'pointer', fontWeight: 600 }}>Clear</button>
              </div>
            </div>