Function Map

example/src/pages/Main/Map.jsx:38–106

({ className, isBboxDrawEnabled, handleDrawComplete, items })

};

function Map({ className, isBboxDrawEnabled, handleDrawComplete, items }) {
  const mapContainerRef = useRef();
  const drawControleRef = useRef();
  const [map, setMap] = useState();

  useEffect(() => {
    const m = new mapbox.Map({
      container: mapContainerRef.current,
      style: 'mapbox://styles/mapbox/dark-v10',
      center: [-99.31640625, 40.04443758460856],
      zoom: 3,
      dragRotate: false,
      touchZoomRotate: false,
      attributionControl: true,
    });

    const onLoad = () => {
      setMap(m);
      m.addSource('items', {
        type: 'geojson',
        data: { type: 'FeatureCollection', features: [] },
      });

      m.addLayer({
        id: 'items',
        type: 'line',
        source: 'items',
        layout: {},
        paint: {
          'line-color': '#0080ff',
          'line-width': 1,
        },
      });
    };
    m.on('load', onLoad);
    drawControleRef.current = addDrawControl(m, handleDrawComplete);

    return () => {
      m.off('load', onLoad);
      if (map) {
        map.remove();
      }
    };
  }, []);

  useEffect(() => {
    if (isBboxDrawEnabled) {
      drawControleRef.current.deleteAll();
      drawControleRef.current.changeMode('draw_rectangle');
      map.getCanvas().style.cursor = 'crosshair';
    }
  }, [isBboxDrawEnabled, map]);

  useEffect(() => {
    if (map) {
      if (items) {
        map.getSource('items').setData(items);
      } else {