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

Example​

Example