Example: Drawing a Polygon with Barikoi React GL using Mapbox Draw Tool

The Draw Polygon feature in the react-bkoi-gl package, powered by the Mapbox Draw tool, allows users to create and manipulate polygons directly on a Barikoi map. By integrating the DrawControl component, users can draw custom shapes by selecting the polygon tool, and they can easily update or delete them as needed.

This feature is ideal for use cases like defining custom regions, creating geofences, or marking specific boundaries on a map. With real-time feedback, users can interactively create precise polygonal areas, offering a hands-on, flexible approach for mapping and geospatial applications. The combination of react-bkoi-gl and Mapbox Draw makes it simple to implement advanced drawing functionality within a seamless mapping experience.

Example

import { useState, useCallback, useRef } from 'react';
import { Map } from 'react-bkoi-gl'; // Import the Barikoi React GL package
import "react-bkoi-gl/styles" // Import CSS for proper map styling
import DrawControl from './draw-control'; // Import the Draw Control Component

const App = () => {
  const BARIKOI_API_KEY = 'YOUR_BARIKOI_API_KEY_HERE'
  const mapStyle = `https://map.barikoi.com/styles/osm-liberty/style.json?key=${BARIKOI_API_KEY}`
  const mapContainer = useRef(null);
  const mapRef = useRef(null);
  const initialViewState = {
    longitude: 90.36402,
    latitude: 23.823731,
    minZoom: 4,
    maxZoom: 30,
    zoom: 11,
    bearing: 0,
    pitch: 0,
    antialias: true
  }
  // Stores all the drawn features
  const [features, setFeatures] = useState({});

  // On Update
  const onUpdate = useCallback(e => {
    setFeatures(currFeatures => {
      const newFeatures = { ...currFeatures };
      for (const f of e.features) {
        newFeatures[f.id] = f;
      }
      return newFeatures;
    });
  }, []);

  // On Delete
  const onDelete = useCallback(e => {
    setFeatures(currFeatures => {
      const newFeatures = { ...currFeatures };
      for (const f of e.features) {
        delete newFeatures[f.id];
      }
      return newFeatures;
    });
  }, []);

  return (
    <div
      ref={mapContainer} style={containerStyles}
    >
      <Map
        ref={mapRef}
        mapStyle={mapStyle}
        style={{ width: "100%", height: "100%" }}
        initialViewState={initialViewState}
        doubleClickZoom={false}
        dragRotate={false}
        attributionControl={false}
      >
        <DrawControl
          position="top-right"
          displayControlsDefault={false}
          controls={{
            polygon: true,
            trash: true
          }}
          defaultMode="draw_polygon"
          onCreate={onUpdate}
          onUpdate={onUpdate}
          onDelete={onDelete}
        />
      </Map>
    </div>
  )
}

// JSX Styles
const containerStyles = {
  width: "100%",
  height: "100vh",
  minHeight: "400px",
  overflow: "hidden",
}

export default App

import { useControl } from 'react-bkoi-gl'; // Import the Barikoi React GL package
import MapboxDraw from '@mapbox/mapbox-gl-draw'; // Import Mapbox Draw
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css' // Import Mapbox Draw CSS

export default function DrawControl(props) {
  useControl(
    () => new MapboxDraw(props),
    ({ map }) => {
      map.on('draw.create', props.onCreate);
      map.on('draw.update', props.onUpdate);
      map.on('draw.delete', props.onDelete);
    },
    ({ map }) => {
      map.off('draw.create', props.onCreate);
      map.off('draw.update', props.onUpdate);
      map.off('draw.delete', props.onDelete);
    },
    {
      position: props.position
    }
  );

  return null;
}

DrawControl.defaultProps = {
  onCreate: () => { },
  onUpdate: () => { },
  onDelete: () => { }
};