Example: Displaying a Map with Barikoi React GL

Here’s an example of how to use the react-bkoi-gl package in a React or Next.js component.

Example

"use client";
import { 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

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: 13,
    bearing: 0,
    pitch: 0,
    antialias: true,
  };

  return (
    <div ref={mapContainer} style={containerStyles}>
      <Map
        ref={mapRef}
        mapStyle={mapStyle}
        style={{ width: "100%", height: "100%" }}
        initialViewState={initialViewState}
        doubleClickZoom={false}
        dragRotate={false}
        attributionControl={false}
      ></Map>
    </div>
  );
};

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

export default App;