react-bkoi-gl 1.0.7 → 2.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Barikoi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,5 +1,14 @@
 <h1 align="center">react-bkoi-gl | <a href="https://docs.barikoi.com/npm/npm-intro">Docs</a></h1>
 
+<p align="center">
+  <a href="https://www.npmjs.com/package/react-bkoi-gl"><img src="https://img.shields.io/npm/v/react-bkoi-gl.svg" alt="npm version"></a>
+  <a href="https://www.npmjs.com/package/react-bkoi-gl"><img src="https://img.shields.io/npm/dw/react-bkoi-gl" alt="npm downloads"></a>
+  <a href="https://bundlephobia.com/package/react-bkoi-gl"><img src="https://img.shields.io/bundlephobia/min/react-bkoi-gl" alt="Bundle Size"></a>
+  <a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-007ACC?logo=typescript&logoColor=white" alt="TypeScript"></a>
+  <a href="https://nodejs.org/"><img src="https://img.shields.io/node/v/react-bkoi-gl" alt="Node.js Version"></a>
+  <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="License: MIT"></a>
+</p>
+
 ## Description
 
 `react-bkoi-gl` is a suite of [React](http://facebook.github.io/react/) components designed to provide a API for [Barikoi Maps](https://docs.barikoi.com/docs/maps-api). More information in the online documentation.
@@ -17,35 +26,44 @@ Or via yarn:
 yarn add react-bkoi-gl
 ```
 
-### Example
+## Example
 
-```js
+### JavaScript (`js`) Example
+```jsx
 import { useRef } from 'react';
-import { Map, FullscreenControl, GeolocateControl, NavigationControl, ScaleControl } from 'react-bkoi-gl';
+import {
+  Map,
+  Marker,
+  Popup,
+  Layer,
+  Source,
+  NavigationControl,
+  FullscreenControl,
+  GeolocateControl,
+  ScaleControl,
+} from 'react-bkoi-gl';
 
 // Import Styles
-import "react-bkoi-gl/styles"
+import "react-bkoi-gl/styles";
 
 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 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,
+    maxZoom: 22,
     zoom: 13,
     bearing: 0,
     pitch: 0,
-    antialias: true
-  }
+    antialias: true,
+  };
 
   return (
-    <div
-      ref={mapContainer} style={containerStyles}
-    >
+    <div ref={mapContainer} style={containerStyles}>
       <Map
         ref={mapRef}
         mapStyle={mapStyle}
@@ -53,16 +71,39 @@ const App = () => {
         initialViewState={initialViewState}
         doubleClickZoom={false}
         dragRotate={false}
-        attributionControl={false}
       >
-        <GeolocateControl position="top-right" />
-        <FullscreenControl position="top-right" />
+        <Marker longitude={90.36402} latitude={23.823731} color="red" />
+        <Popup longitude={90.36402} latitude={23.823731}>
+          <div>Hello, Barikoi!</div>
+        </Popup>
+        <Source
+          id="points"
+          type="geojson"
+          data={{
+            type: 'FeatureCollection',
+            features: [
+              {
+                type: 'Feature',
+                properties: {},
+                geometry: { type: 'Point', coordinates: [90.36402, 23.823731] }
+              }
+            ]
+          }}
+        />
+        <Layer
+          id="points-layer"
+          type="circle"
+          source="points"
+          paint={{ 'circle-radius': 10, 'circle-color': '#ff0000' }}
+        />
         <NavigationControl position="top-right" />
+        <FullscreenControl position="top-right" />
+        <GeolocateControl position="top-right" />
         <ScaleControl position="bottom-right" />
       </Map>
     </div>
-  )
-}
+  );
+};
 
 // JSX Styles
 const containerStyles = {
@@ -70,11 +111,124 @@ const containerStyles = {
   height: "100vh",
   minHeight: "400px",
   overflow: "hidden",
+};
+
+export default App;
+```
+
+### TypeScript (`ts`) Example
+```tsx
+import { useRef } from 'react';
+import {
+  Map,
+  Marker,
+  Popup,
+  Layer,
+  Source,
+  NavigationControl,
+  FullscreenControl,
+  GeolocateControl,
+  ScaleControl,
+  MapRef
+} from 'react-bkoi-gl';
+
+// Import Styles
+import "react-bkoi-gl/styles";
+
+interface MapProps {
+  longitude: number;
+  latitude: number;
 }
 
-export default App
+const App: React.FC = () => {
+  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<HTMLDivElement>(null);
+  const mapRef = useRef<MapRef>(null);
+  const initialViewState = {
+    longitude: 90.36402,
+    latitude: 23.823731,
+    minZoom: 4,
+    maxZoom: 22,
+    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}
+      >
+        <Marker longitude={90.36402} latitude={23.823731} color="red" />
+        <Popup longitude={90.36402} latitude={23.823731}>
+          <div>Hello, Barikoi!</div>
+        </Popup>
+        <Source
+          id="points"
+          type="geojson"
+          data={{
+            type: 'FeatureCollection',
+            features: [
+              {
+                type: 'Feature',
+                properties: {},
+                geometry: { type: 'Point', coordinates: [90.36402, 23.823731] }
+              }
+            ]
+          }}
+        />
+        <Layer
+          id="points-layer"
+          type="circle"
+          source="points"
+          paint={{ 'circle-radius': 10, 'circle-color': '#ff0000' }}
+        />
+        <NavigationControl position="top-right" />
+        <FullscreenControl position="top-right" />
+        <GeolocateControl position="top-right" />
+        <ScaleControl position="bottom-right" />
+      </Map>
+    </div>
+  );
+};
+
+// JSX Styles
+const containerStyles: React.CSSProperties = {
+  width: "100%",
+  height: "100vh",
+  minHeight: "400px",
+  overflow: "hidden",
+};
+
+export default App;
 ```
 
+## Components
+
+Here is a list of all available components in `react-bkoi-gl`:
+
+| Component           | Description                                                                 |
+|---------------------|-----------------------------------------------------------------------------|
+| `Map`               | The core component for rendering a Barikoi map. Must be the parent of all other components. |
+| `Marker`            | Displays a marker on the map at specified coordinates.                      |
+| `Popup`             | Displays a popup with custom content at specified coordinates.              |
+| `Layer`             | Adds a custom layer to the map.                                             |
+| `Source`            | Defines a data source for the map.                                          |
+| `NavigationControl` | Adds zoom and rotation controls.                                            |
+| `FullscreenControl` | Adds a button to toggle fullscreen mode.                                    |
+| `GeolocateControl`  | Centers the map on the user's location.                                     |
+| `ScaleControl`      | Displays a scale bar.                                                       |
+| `TerrainControl`    | Adds terrain control to the map.                                            |
+| `useMap`            | Custom hook for managing the map instance.                                  |
+| `useControl`        | Custom hook for managing map controls.                                      |
+
 ## Get Barikoi API key
 
 To access Barikoi's API services, you need to: