(null);
useEffect(() => {
const canvas = canvasRef.current;
if (!canvas) return;
const ctx = canvas.getContext('2d');
if (ctx) {
ctx.fillStyle = 'rgba(0, 100, 255, 0.5)';
ctx.fillRect(0, 0, 256, 256);
ctx.fillStyle = 'rgba(255, 0, 0, 0.8)';
ctx.beginPath();
ctx.arc(128, 128, 50, 0, 2 * Math.PI);
ctx.fill();
}
setCanvasEl(canvas);
}, []);
return (
)}
);
}
```
---
## Layer Events
The Layer component supports interactive mouse events:
Available Events
#### Example
```tsx
import { Map, Source, Layer } from 'react-bkoi-gl';
import "react-bkoi-gl/styles";
import { useState } from 'react';
function InteractiveLayerExample() {
const [hoveredFeature, setHoveredFeature] = useState(null);
const geojsonData = {
type: 'FeatureCollection',
features: [
{ type: 'Feature', properties: { name: 'Dhaka' }, geometry: { type: 'Point', coordinates: [90.3938, 23.8216] } }
]
};
return (
{
console.log('Clicked:', e.features[0].properties.name);
}}
onMouseEnter={(e) => {
setHoveredFeature(e.features[0]);
}}
onMouseLeave={() => {
setHoveredFeature(null);
}}
/>
);
}
```
---
## Hooks
### useMap Hook
Access map instances from any component within the MapProvider.
#### Example
```tsx
import { Map, useMap, MapProvider } from 'react-bkoi-gl';
import "react-bkoi-gl/styles";
function MapButtons() {
const { current: map } = useMap();
const zoomIn = () => {
map?.zoomIn();
};
const zoomOut = () => {
map?.zoomOut();
};
const flyTo = () => {
map?.flyTo({
center: [90.40, 23.83],
zoom: 15,
duration: 2000
});
};
return (
Zoom In
Zoom Out
Fly to Location
);
}
function App() {
return (
);
}
```
---
### useControl Hook
Create custom map controls.
#### Example
```tsx
import { Map, useControl } from 'react-bkoi-gl';
import { useControl as useMapControl } from 'react-bkoi-gl';
import "react-bkoi-gl/styles";
class CustomControl {
onAdd(map) {
this.map = map;
this.container = document.createElement('div');
this.container.className = 'custom-control';
this.container.textContent = 'Custom Control';
this.container.style.cssText = `
background: white;
padding: 10px;
border-radius: 4px;
box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
`;
return this.container;
}
onRemove() {
this.container.remove();
}
}
function CustomControlComponent() {
useControl(() => new CustomControl(), { position: 'top-left' });
return null;
}
function App() {
return (
);
}
```
---
## Events
The Map component supports various event callbacks:
Available Events
### Event Example
```tsx
import { Map, Marker } from 'react-bkoi-gl';
import "react-bkoi-gl/styles";
import { useState } from 'react';
function EventExample() {
const [center, setCenter] = useState({ lng: 90.3938, lat: 23.8216 });
const onClick = (e) => {
console.log('Clicked at:', e.lngLat);
setCenter({ lng: e.lngLat.lng, lat: e.lngLat.lat });
};
const onMoveEnd = (e) => {
console.log('Move ended, viewState:', e.viewState);
};
const onLoad = (e) => {
console.log('Map loaded!');
};
return (
);
}
```
---
## MapRef Methods
Access the underlying map instance through the ref:
Available Methods (null);
// Get the underlying MapLibre instance
const map = mapRef.current?.getMap();
// Common methods:
map.getCenter() // Get map center
map.getZoom() // Get zoom level
map.getBearing() // Get bearing
map.getPitch() // Get pitch
map.getBounds() // Get bounds
map.setCenter([lng, lat]) // Set center
map.setZoom(zoom) // Set zoom
map.setBearing(bearing) // Set bearing
map.setPitch(pitch) // Set pitch
map.flyTo(options) // Fly to location
map.jumpTo(options) // Jump to location
map.easeTo(options) // Ease to location
map.zoomIn() // Zoom in
map.zoomOut() // Zoom out
map.resize() // Resize map
map.remove() // Remove map
```
---
## Styling
The library uses MapLibre GL JS styles. Import the styles in your application:
```tsx
import "react-bkoi-gl/styles";
```
### Available Map Styles
- `osm-liberty` - Default street style
- `osm_barikoi_v2` - Barikoi street style
```tsx
const mapStyle = `https://map.barikoi.com/styles/osm-liberty/style.json?key=${API_KEY}`;
const mapStyle = `https://map.barikoi.com/styles/osm_barikoi_v2/style.json?key=${API_KEY}`;
```
---
## TypeScript
Full TypeScript support is included. All types are exported:
```tsx
import type {
MapProps,
MapRef,
MarkerProps,
PopupProps,
SourceProps,
CanvasSourceProps,
LayerProps,
MapLayerMouseEvent,
ViewStateChangeEvent,
DrawControlProps,
GlobeControlProps,
MinimapControlOptions
} from 'react-bkoi-gl';
```
---
## Documentation & Resources
- [Barikoi API Documentation](https://docs.barikoi.com/docs/maps-api)
- [Barikoi Business API](https://docs.barikoi.com/api)
- [MapLibre GL JS Docs](https://maplibre.org/maplibre-native/ios/latest/documentation/maplibre/)
- [Interactive Examples](https://docs.barikoi.com/examples)
---
## License
This library is licensed under the MIT License. See the [LICENSE](https://github.com/barikoi/react-bkoi-gl/blob/master/LICENSE) file for details.
## Support
For issues or questions, contact [support@barikoi.com](mailto:support@barikoi.com).
