fix: tile rendering, right-click zoom-to-extent, status bar layout, CSP broadened

Author: GeoCodeCrafter

index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; img-src 'self' data: blob: https://*.tile.openstreetmap.org https://*.basemaps.cartocdn.com; connect-src 'self' https://*.tile.openstreetmap.org https://*.basemaps.cartocdn.com https://epsg.io" />
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline' https:; font-src https: data:; img-src 'self' data: blob: https:; connect-src 'self' https:;" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

src/components/map/LayerPanel.tsx

@@ -1,11 +1,21 @@
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import {
   Eye, EyeOff, GripVertical, Trash2,
-  ChevronDown, ChevronRight,
+  ChevronDown, ChevronRight, ZoomIn, Copy,
 } from 'lucide-react';
+import { transformExtent } from 'ol/proj';
+import VectorSource from 'ol/source/Vector';
+import OlVectorLayer from 'ol/layer/Vector';
 import { useProjectStore } from '@/stores/projectStore';
+import { mapRegistry } from '@/services/map/mapRegistry';
 import type { Layer } from '@/types/layers';
 
+interface ContextMenuState {
+  x: number;
+  y: number;
+  layerId: string;
+}
+
 export function LayerPanel() {
   const layers = useProjectStore((s) => s.project?.layers ?? []);
   const toggleVisibility = useProjectStore((s) => s.toggleLayerVisibility);
@@ -14,21 +24,85 @@ export function LayerPanel() {
   const reorderLayers = useProjectStore((s) => s.reorderLayers);
   const [expandedId, setExpandedId] = useState<string | null>(null);
   const [dragIndex, setDragIndex] = useState<number | null>(null);
+  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
 
   const sortedLayers = [...layers].sort((a, b) => b.zIndex - a.zIndex);
 
   const handleDragStart = (idx: number) => setDragIndex(idx);
-
   const handleDragOver = (e: React.DragEvent, idx: number) => {
     e.preventDefault();
     if (dragIndex !== null && dragIndex !== idx) {
       reorderLayers(dragIndex, idx);
       setDragIndex(idx);
     }
   };
-
   const handleDragEnd = () => setDragIndex(null);
 
+  const handleContextMenu = (e: React.MouseEvent, _layer: Layer) => {
+    e.preventDefault();
+    setContextMenu({ x: e.clientX, y: e.clientY, layerId: _layer.id });
+  };
+
+  const closeMenu = () => setContextMenu(null);
+
+  // Close context menu on outside click
+  useEffect(() => {
+    if (!contextMenu) return;
+    const handler = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) closeMenu();
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [contextMenu]);
+
+  const handleZoomToExtent = (layerId: string) => {
+    const map = mapRegistry.get();
+    if (!map) { closeMenu(); return; }
+
+    const worldExtent: [number, number, number, number] = [-20037508.34, -20037508.34, 20037508.34, 20037508.34];
+
+    // Try to find the OL layer and fit to its source extent
+    const olLayer = map.getLayers().getArray().find((l) => l.get('projectLayerId') === layerId);
+    if (olLayer instanceof OlVectorLayer) {
+      const source = olLayer.getSource() as VectorSource;
+      if (source) {
+        // Wait for features to be loaded if needed
+        const tryFit = () => {
+          const ext = source.getExtent();
+          if (ext && ext[0] !== Infinity) {
+            map.getView().fit(ext, { duration: 600, padding: [40, 40, 40, 40] });
+          } else {
+            map.getView().fit(worldExtent, { duration: 600 });
+          }
+        };
+        if (source.getState() === 'ready') {
+          tryFit();
+        } else {
+          source.once('change', tryFit);
+        }
+        closeMenu();
+        return;
+      }
+    }
+
+    // For tile layers or fallback: check if project layer has an extent
+    const projectLayer = layers.find((l) => l.id === layerId);
+    if (projectLayer?.extent) {
+      const ext = transformExtent(projectLayer.extent, 'EPSG:4326', 'EPSG:3857');
+      map.getView().fit(ext, { duration: 600, padding: [40, 40, 40, 40] });
+    } else {
+      map.getView().fit(worldExtent, { duration: 600 });
+    }
+    closeMenu();
+  };
+
+  const handleCopyUrl = (layerId: string) => {
+    const layer = layers.find((l) => l.id === layerId);
+    if (layer?.source.uri) navigator.clipboard.writeText(layer.source.uri).catch(() => {});
+    closeMenu();
+  };
+
   if (layers.length === 0) {
     return (
       <div className="p-4 text-center">
@@ -39,23 +113,58 @@ export function LayerPanel() {
   }
 
   return (
-    <div className="flex flex-col">
-      {sortedLayers.map((layer, idx) => (
-        <LayerItem
-          key={layer.id}
-          layer={layer}
-          isExpanded={expandedId === layer.id}
-          onToggleExpand={() => setExpandedId(expandedId === layer.id ? null : layer.id)}
-          onToggleVisibility={() => toggleVisibility(layer.id)}
-          onOpacityChange={(opacity) => setOpacity(layer.id, opacity)}
-          onRemove={() => removeLayer(layer.id)}
-          onDragStart={() => handleDragStart(idx)}
-          onDragOver={(e) => handleDragOver(e, idx)}
-          onDragEnd={handleDragEnd}
-          isDragging={dragIndex === idx}
-        />
-      ))}
-    </div>
+    <>
+      <div className="flex flex-col">
+        {sortedLayers.map((layer, idx) => (
+          <LayerItem
+            key={layer.id}
+            layer={layer}
+            isExpanded={expandedId === layer.id}
+            onToggleExpand={() => setExpandedId(expandedId === layer.id ? null : layer.id)}
+            onToggleVisibility={() => toggleVisibility(layer.id)}
+            onOpacityChange={(opacity) => setOpacity(layer.id, opacity)}
+            onRemove={() => removeLayer(layer.id)}
+            onDragStart={() => handleDragStart(idx)}
+            onDragOver={(e) => handleDragOver(e, idx)}
+            onDragEnd={handleDragEnd}
+            isDragging={dragIndex === idx}
+            onContextMenu={(e) => handleContextMenu(e, layer)}
+          />
+        ))}
+      </div>
+
+      {/* Context menu */}
+      {contextMenu && (
+        <div
+          ref={menuRef}
+          className="fixed z-50 min-w-[160px] bg-gis-surface border border-gis-border rounded-lg shadow-xl py-1 text-sm"
+          style={{ left: contextMenu.x, top: contextMenu.y }}
+        >
+          <button
+            onClick={() => handleZoomToExtent(contextMenu.layerId)}
+            className="w-full flex items-center gap-2.5 px-3 py-1.5 hover:bg-gis-deep-blue/50 text-white/80 hover:text-white transition-colors text-left"
+          >
+            <ZoomIn size={13} className="text-gis-teal shrink-0" />
+            Zoom to Extent
+          </button>
+          <button
+            onClick={() => handleCopyUrl(contextMenu.layerId)}
+            className="w-full flex items-center gap-2.5 px-3 py-1.5 hover:bg-gis-deep-blue/50 text-white/80 hover:text-white transition-colors text-left"
+          >
+            <Copy size={13} className="text-white/40 shrink-0" />
+            Copy Source URL
+          </button>
+          <div className="border-t border-gis-border my-1" />
+          <button
+            onClick={() => { removeLayer(contextMenu.layerId); closeMenu(); }}
+            className="w-full flex items-center gap-2.5 px-3 py-1.5 hover:bg-red-500/10 text-red-400/80 hover:text-red-400 transition-colors text-left"
+          >
+            <Trash2 size={13} className="shrink-0" />
+            Remove Layer
+          </button>
+        </div>
+      )}
+    </>
   );
 }
 
@@ -70,6 +179,7 @@ function LayerItem({
   onDragOver,
   onDragEnd,
   isDragging,
+  onContextMenu,
 }: {
   layer: Layer;
   isExpanded: boolean;
@@ -81,6 +191,7 @@ function LayerItem({
   onDragOver: (e: React.DragEvent) => void;
   onDragEnd: () => void;
   isDragging: boolean;
+  onContextMenu: (e: React.MouseEvent) => void;
 }) {
   const typeColors: Record<string, string> = {
     raster: 'bg-amber-500/20 text-amber-400',
@@ -96,8 +207,9 @@ function LayerItem({
       onDragStart={onDragStart}
       onDragOver={onDragOver}
       onDragEnd={onDragEnd}
+      onContextMenu={onContextMenu}
     >
-      <div className="flex items-center gap-1 px-2 py-1.5 hover:bg-gis-deep-blue/20 transition-colors">
+      <div className="group flex items-center gap-1 px-2 py-1.5 hover:bg-gis-deep-blue/20 transition-colors">
         <div className="cursor-grab text-white/20 hover:text-white/40">
           <GripVertical size={12} />
         </div>

src/components/map/MapViewer.tsx

@@ -2,12 +2,22 @@ import { useRef, useEffect, useCallback } from 'react';
 import OlMap from 'ol/Map';
 import View from 'ol/View';
 import TileLayer from 'ol/layer/Tile';
+import OlVectorLayer from 'ol/layer/Vector';
 import XYZ from 'ol/source/XYZ';
-import { defaults as defaultControls, ScaleLine, ZoomSlider } from 'ol/control';
+import VectorSource from 'ol/source/Vector';
+import GeoJSON from 'ol/format/GeoJSON';
+import Style from 'ol/style/Style';
+import Fill from 'ol/style/Fill';
+import Stroke from 'ol/style/Stroke';
+import CircleStyle from 'ol/style/Circle';
+import type BaseLayer from 'ol/layer/Base';
+import { defaults as defaultControls, ScaleLine } from 'ol/control';
 import { defaults as defaultInteractions } from 'ol/interaction';
 import { fromLonLat, toLonLat } from 'ol/proj';
 import { useProjectStore } from '@/stores/projectStore';
 import { useAppStore } from '@/stores/appStore';
+import { mapRegistry } from '@/services/map/mapRegistry';
+import type { Layer } from '@/types/layers';
 import 'ol/ol.css';
 
 interface MapViewerProps {
@@ -21,25 +31,22 @@ export function MapViewer({ className = '', onMapReady, onCoordinateChange }: Ma
   const mapInstance = useRef<OlMap | null>(null);
   const setViewState = useProjectStore((s) => s.setViewState);
   const viewState = useProjectStore((s) => s.project?.viewState);
+  const layers = useProjectStore((s) => s.project?.layers ?? []);
   const showScaleBar = useAppStore((s) => s.showScaleBar);
 
   const initMap = useCallback(() => {
     if (!mapRef.current || mapInstance.current) return;
 
     const controls = defaultControls({ zoom: true, attribution: true, rotate: false }).extend([
-      new ScaleLine({
-        units: 'metric',
-        bar: false,
-        minWidth: 100,
-      }),
-      new ZoomSlider(),
+      new ScaleLine({ units: 'metric', bar: false, minWidth: 100 }),
     ]);
 
     const basemap = new TileLayer({
       source: new XYZ({
         url: 'https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
         attributions: '© CARTO, © OpenStreetMap contributors',
         maxZoom: 20,
+        crossOrigin: 'anonymous',
       }),
       properties: { name: 'basemap', isBasemap: true },
     });
@@ -61,27 +68,22 @@ export function MapViewer({ className = '', onMapReady, onCoordinateChange }: Ma
       }),
     });
 
-    // Track view changes
     map.getView().on('change', () => {
       const view = map.getView();
       const center = toLonLat(view.getCenter() ?? [0, 0]);
       const zoom = view.getZoom() ?? 2;
-      setViewState({
-        center: center as [number, number],
-        zoom,
-        rotation: view.getRotation(),
-      });
+      setViewState({ center: center as [number, number], zoom, rotation: view.getRotation() });
       onCoordinateChange?.(center as [number, number], zoom);
     });
 
-    // Track pointer position
     map.on('pointermove', (evt) => {
       if (evt.dragging) return;
       const coord = toLonLat(evt.coordinate);
       onCoordinateChange?.(coord as [number, number], map.getView().getZoom() ?? 2);
     });
 
     mapInstance.current = map;
+    mapRegistry.set(map);
     onMapReady?.(map);
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -90,21 +92,82 @@ export function MapViewer({ className = '', onMapReady, onCoordinateChange }: Ma
     return () => {
       mapInstance.current?.setTarget(undefined);
       mapInstance.current = null;
+      mapRegistry.set(null);
     };
   }, [initMap]);
 
-  // Toggle scale bar visibility
+  // Sync project layers → OL layers
   useEffect(() => {
-    if (!mapInstance.current) return;
-    const controls = mapInstance.current.getControls();
-    controls.forEach((control) => {
-      if (control instanceof ScaleLine) {
-        control.setMap(showScaleBar ? mapInstance.current : null);
+    const map = mapInstance.current;
+    if (!map) return;
+
+    const allOlLayers = map.getLayers().getArray();
+    const projectOlLayers = allOlLayers.filter((l) => l.get('projectLayerId'));
+    const desiredIds = new Set(layers.map((l) => l.id));
+
+    // Remove deleted layers
+    projectOlLayers.forEach((l) => {
+      if (!desiredIds.has(l.get('projectLayerId') as string)) map.removeLayer(l);
+    });
+
+    // Add new / update existing
+    layers.forEach((layer) => {
+      const existing = allOlLayers.find((l) => l.get('projectLayerId') === layer.id);
+      if (existing) {
+        existing.setVisible(layer.visible);
+        existing.setOpacity(layer.opacity);
+        existing.setZIndex(layer.zIndex + 1);
+      } else {
+        const olLayer = buildOlLayer(layer);
+        if (olLayer) map.addLayer(olLayer);
       }
     });
+  }, [layers]);
+
+  // Toggle scale bar
+  useEffect(() => {
+    if (!mapInstance.current) return;
+    mapInstance.current.getControls().forEach((ctrl) => {
+      if (ctrl instanceof ScaleLine) ctrl.setMap(showScaleBar ? mapInstance.current : null);
+    });
   }, [showScaleBar]);
 
-  return (
-    <div ref={mapRef} className={`w-full h-full ${className}`} />
-  );
+  return <div ref={mapRef} className={`w-full h-full ${className}`} />;
+}
+
+const defaultVectorStyle = new Style({
+  fill: new Fill({ color: 'rgba(32, 201, 151, 0.15)' }),
+  stroke: new Stroke({ color: '#20c997', width: 1.5 }),
+  image: new CircleStyle({
+    radius: 5,
+    fill: new Fill({ color: '#20c997' }),
+    stroke: new Stroke({ color: '#fff', width: 1 }),
+  }),
+});
+
+function buildOlLayer(layer: Layer): BaseLayer | null {
+  if (layer.type === 'tile') {
+    const tl = new TileLayer({
+      source: new XYZ({ url: layer.source.uri, crossOrigin: 'anonymous', maxZoom: 22 }),
+      visible: layer.visible,
+      opacity: layer.opacity,
+      zIndex: layer.zIndex + 1,
+    });
+    tl.set('projectLayerId', layer.id);
+    return tl;
+  }
+
+  if (layer.type === 'vector') {
+    const vl = new OlVectorLayer({
+      source: new VectorSource({ url: layer.source.uri, format: new GeoJSON() }),
+      style: defaultVectorStyle,
+      visible: layer.visible,
+      opacity: layer.opacity,
+      zIndex: layer.zIndex + 1,
+    });
+    vl.set('projectLayerId', layer.id);
+    return vl;
+  }
+
+  return null;
 }