Function MapView

src/components/MapView.tsx:54–492

({ allFields, selectedFields, activeField, flyToField, onFlyToDone, onFieldClickOnMap, onAddField, editBoundaryFieldId, onUpdateField, onCancelEditBoundary }: MapViewProps)

  onUpdateField?: (field: Field) => void;
  onCancelEditBoundary?: () => void;
}

const MapView = ({ allFields, selectedFields, activeField, flyToField, onFlyToDone, onFieldClickOnMap, onAddField, editBoundaryFieldId, onUpdateField, onCancelEditBoundary }: MapViewProps) => {
  const isMobile = useIsMobile();
  const mapContainer = useRef<HTMLDivElement>(null);
  const mapRef = useRef<mapboxgl.Map | null>(null);
  const [mapToken, setMapToken] = useState("");
  const [mapLoaded, setMapLoaded] = useState(false);
  const [drawMode, setDrawMode] = useState(false);
  const [drawVertices, setDrawVertices] = useState<[number, number][]>([]);
  const [showNewFieldDialog, setShowNewFieldDialog] = useState(false);
  const [showFields, setShowFields] = useState(true);
  const [showNdvi, setShowNdvi] = useState(false);
  const [geeNdviTileUrl, setGeeNdviTileUrl] = useState<string | null>(null);
  const editMarkersRef = useRef<mapboxgl.Marker[]>([]);
  const drawModeRef = useRef(false);
  const editBoundaryFieldIdRef = useRef(editBoundaryFieldId);
  const allFieldsRef = useRef(allFields);
  const onFieldClickRef = useRef(onFieldClickOnMap);
  const onUpdateFieldRef = useRef(onUpdateField);

  useEffect(() => { drawModeRef.current = drawMode; }, [drawMode]);
  useEffect(() => { editBoundaryFieldIdRef.current = editBoundaryFieldId; }, [editBoundaryFieldId]);
  useEffect(() => { allFieldsRef.current = allFields; }, [allFields]);
  useEffect(() => { onFieldClickRef.current = onFieldClickOnMap; }, [onFieldClickOnMap]);
  useEffect(() => { onUpdateFieldRef.current = onUpdateField; }, [onUpdateField]);

  useEffect(() => {
    const fetchToken = async () => {
      try {
        const { data } = await callBackend("get-mapbox-token");
        if (data?.token) setMapToken(data.token);
      } catch (e) { console.error("Failed to fetch mapbox token", e); }
    };
    fetchToken();
  }, []);

  useEffect(() => {
    if (!flyToField || !mapRef.current) return;
    const coords = flyToField.coordinates[0];
    const lat = coords.reduce((sum, c) => sum + c[1], 0) / coords.length;
    const lng = coords.reduce((sum, c) => sum + c[0], 0) / coords.length;
    mapRef.current.flyTo({ center: [lng, lat], zoom: 16, duration: 1500 });
    onFlyToDone?.();
  }, [flyToField, onFlyToDone]);

  const refreshFieldLayers = useCallback((map: mapboxgl.Map, fields: Field[], selected: Field[]) => {
    if (!map.isStyleLoaded()) return;
    const style = map.getStyle();
    if (style?.layers) {
      style.layers.filter((l) => l.id.startsWith("field-fill-") || l.id.startsWith("field-line-")).forEach((l) => { try { map.removeLayer(l.id); } catch {} });
    }
    if (style?.sources) {
      Object.keys(style.sources).filter((s) => s.startsWith("field-")).forEach((s) => { try { map.removeSource(s); } catch {} });
    }
    fields.forEach((field) => {
      const sourceId = `field-${field.id}`;
      const isSelected = selected.some((f) => f.id === field.id);