### Install bkoi-gl-js dependencies Source: https://github.com/barikoi/bkoi-gl-js/blob/main/DEVELOPER_GUIDE.md Use npm to install the library and its dependencies. ```bash npm install ``` -------------------------------- ### Complete Vanilla JavaScript Example with Minimap Source: https://github.com/barikoi/bkoi-gl-js/blob/main/README.md A full HTML example showcasing map initialization with a minimap, including custom styling, toggle functionality, and interaction settings. Ensure you replace 'YOUR_BARIKOI_API_KEY' and 'YOUR_MAP_STYLE' with your actual credentials. ```html
``` -------------------------------- ### Run development and build commands Source: https://github.com/barikoi/bkoi-gl-js/blob/main/DEVELOPER_GUIDE.md Commands for starting the development server and building the project for production. ```bash # Start development server npm start # Build for production npm run build ``` -------------------------------- ### Install and Build After Dependency Update Source: https://github.com/barikoi/bkoi-gl-js/blob/main/DEVELOPER_GUIDE.md Install updated dependencies and rebuild the project to ensure compatibility after upgrading MapLibre GL or other dependencies. ```bash npm install && npm run build ``` -------------------------------- ### Install bkoi-gl package Source: https://github.com/barikoi/bkoi-gl-js/blob/main/README.md Use a package manager to add the library to your project dependencies. ```bash npm install bkoi-gl ``` ```bash yarn add bkoi-gl ``` -------------------------------- ### CDN Installation for Barikoi GL JS Source: https://context7.com/barikoi/bkoi-gl-js/llms.txt Include the Barikoi GL JS CSS and JavaScript files in your HTML using a CDN. This is useful for quick setup or projects not using a package manager. ```html ``` -------------------------------- ### Install Barikoi GL JS via CDN Source: https://github.com/barikoi/bkoi-gl-js/blob/main/README.md Include these links in the section of your HTML file to load the library and its styles. ```html ``` ```html ``` -------------------------------- ### NPM Installation for Barikoi GL JS Source: https://context7.com/barikoi/bkoi-gl-js/llms.txt Install Barikoi GL JS using npm or yarn for use in modern JavaScript projects. This method is recommended for managing dependencies. ```bash npm install bkoi-gl # or yarn add bkoi-gl ``` -------------------------------- ### Conventional Commits Example Source: https://github.com/barikoi/bkoi-gl-js/blob/main/DEVELOPER_GUIDE.md Examples of commit messages following the conventional commits specification, used for maintaining a clean and consistent commit history. ```bash [optional scope]: # Examples feat: add polygon drawing support feat(map): add new control types fix: resolve attribution positioning bug fix(draw): fix polygon deletion event docs: update API documentation docs(examples): add Next.js integration example refactor: simplify map initialization logic ``` -------------------------------- ### Install Tarball in Test Project Source: https://github.com/barikoi/bkoi-gl-js/blob/main/DEVELOPER_GUIDE.md Install the generated tarball into a separate test project using a relative or absolute path. This ensures accurate dependency resolution. ```bash # Option 1: Copy file to existing test project cp bkoi-gl-3.0.0.tgz ../test-project/ cd ../test-project npm install ./bkoi-gl-3.0.0.tgz ``` ```bash # Option 2: Install using relative path cd ../test-project npm install ../bkoi-gl-js/bkoi-gl-3.0.0.tgz ``` ```bash # Option 3: Install using absolute path cd /path/to/test/project npm install /absolute/path/to/bkoi-gl-js/bkoi-gl-3.0.0.tgz ``` -------------------------------- ### Production Deployment Steps Source: https://github.com/barikoi/bkoi-gl-js/blob/main/DEVELOPER_GUIDE.md Steps for production deployment include building the project, testing distribution files, publishing to npm, and updating the CDN if necessary. ```bash npm run build npm publish ``` -------------------------------- ### Pre-Publishing Checklist Commands Source: https://github.com/barikoi/bkoi-gl-js/blob/main/DEVELOPER_GUIDE.md Run these commands to ensure the package is properly configured, types are correct, and the build is successful before publishing. ```bash # 1. Check package configuration npx publint ``` ```bash # 2. Verify TypeScript types npx @arethetypeswrong/cli --pack . ``` ```bash # 3. Build the project npm run build ``` ```bash # 4. Generate and verify tarball npm pack ``` -------------------------------- ### Initialize Full Map with Drawing Tools Source: https://github.com/barikoi/bkoi-gl-js/blob/main/examples/index.html Configures a full-screen map container with polygon drawing capabilities and standard navigation controls. ```css body, #map { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; } ``` ```javascript const map = new bkoigl.Map({ container: 'map', center: [90.3938010872331, 23.821600277500405], accessToken: 'YOUR_BARIKOI_API_KEY', // Replace with your Barikoi API key zoom: 12, polygon: true, // Enable draw polygon option drawOptions: { controls: { polygon: true, trash: true } } }); // Add marker const marker = new bkoigl.Marker() .setLngLat([90.3938010872331, 23.821600277500405]) .addTo(map); // Add controls map.addControl(new bkoigl.FullscreenControl(), 'top-right'); map.addControl(new bkoigl.NavigationControl(), 'top-right'); map.addControl(new bkoigl.ScaleControl(), 'bottom-right'); // Drawing events map.on('draw.create', (e) => console.log('Created:', e.features)); map.on('draw.update', (e) => console.log('Updated:', e.features)); map.on('draw.delete', (e) => console.log('Deleted:', e.features)); ``` -------------------------------- ### Initialize Map in Vanilla JavaScript Source: https://github.com/barikoi/bkoi-gl-js/blob/main/README.md Load the library via CDN and initialize the map instance within an HTML file. ```html
``` -------------------------------- ### Get Camera State Source: https://github.com/barikoi/bkoi-gl-js/blob/main/README.md Retrieve current map view parameters including center, zoom, bearing, pitch, and bounds. ```javascript const center = map.getCenter() // { lng, lat } const zoom = map.getZoom() // number const bearing = map.getBearing() // number const pitch = map.getPitch() // number const bounds = map.getBounds() // { getWest, getSouth, getEast, getNorth } ``` -------------------------------- ### Initialize Map with Basic Options Source: https://github.com/barikoi/bkoi-gl-js/blob/main/DEVELOPER_GUIDE.md Basic usage for initializing a map instance. Requires a container ID, center coordinates, zoom level, and an access token. ```javascript import { Map } from "bkoi-gl"; // Basic usage const map = new Map({ container: "map", center: [90.39, 23.72], // Dhaka coordinates zoom: 10, accessToken: "YOUR_BARIKOI_API_KEY_HERE", }); ``` -------------------------------- ### Update MapLibre GL Dependency Source: https://github.com/barikoi/bkoi-gl-js/blob/main/DEVELOPER_GUIDE.md Update the MapLibre GL JS dependency in `package.json` to a new version. After updating, install dependencies and rebuild the project. ```json { "dependencies": { "maplibre-gl": "^5.14.0" } } ``` -------------------------------- ### Implement Popups Source: https://github.com/barikoi/bkoi-gl-js/blob/main/README.md Displays information in popups with configurable options. ```javascript // Basic popup const popup = new bkoigl.Popup() .setLngLat([90.39, 23.82]) .setHTML('

Dhaka

Capital of Bangladesh

') .addTo(map) // Popup with options const popup = new bkoigl.Popup({ closeButton: true, closeOnClick: false, offset: 25, anchor: 'bottom', }) .setLngLat([90.39, 23.82]) .setText('Hello World!') .addTo(map) ``` -------------------------------- ### Get Current Camera State Source: https://context7.com/barikoi/bkoi-gl-js/llms.txt Retrieve the map's current camera parameters, including center coordinates, zoom level, bearing, pitch, and bounds. ```javascript // Get current camera state const center = map.getCenter() // { lng, lat } const zoom = map.getZoom() // number const bearing = map.getBearing() // number const pitch = map.getPitch() // number const bounds = map.getBounds() // LngLatBounds object ``` -------------------------------- ### Clone Repository Locally Source: https://github.com/barikoi/bkoi-gl-js/blob/main/DEVELOPER_GUIDE.md Steps to clone the forked repository locally to begin development. This involves cloning the repository and navigating into the project directory. ```bash git clone https://github.com/YOUR_USERNAME/bkoi-gl-js.git cd bkoi-gl-js ``` -------------------------------- ### Log Current Zoom Level During Zoom Source: https://github.com/barikoi/bkoi-gl-js/blob/main/README.md The `zoom` event is triggered repeatedly while the user is actively zooming the map. Use this to get real-time updates on the zoom level. ```javascript map.on('zoom', () => { console.log('Current zoom level:', map.getZoom()) }) ``` -------------------------------- ### Map Constructor Options Source: https://github.com/barikoi/bkoi-gl-js/blob/main/README.md Configuration options for initializing a new Barikoi map instance. ```APIDOC ## Map Constructor Options ### Description The `Map` constructor accepts an options object extending MapLibre GL JS MapOptions with Barikoi-specific additions. ### Parameters #### Request Body - **container** (string | HTMLElement) - Required - The HTML element or ID to render the map in - **accessToken** (string) - Required - Your Barikoi API key for authentication - **style** (string) - Optional - Map style URL or style identifier (Default: Barikoi Light) - **center** ([number, number]) - Optional - Initial center position [longitude, latitude] (Default: [90.3938, 23.8216]) - **zoom** (number) - Optional - Initial zoom level (0-22) (Default: 10) - **bearing** (number) - Optional - Initial bearing (rotation) in degrees, clockwise from north (Default: 0) - **pitch** (number) - Optional - Initial pitch (tilt) in degrees (0-85) (Default: 0) - **minZoom** (number) - Optional - Minimum zoom level (Default: 0) - **maxZoom** (number) - Optional - Maximum zoom level (Default: 22) - **minPitch** (number) - Optional - Minimum pitch level (Default: 0) - **maxPitch** (number) - Optional - Maximum pitch level (Default: 85) - **bounds** ([number, number, number, number]) - Optional - Initial map bounds as [swLng, swLat, neLng, neLat] - **fitBoundsOptions** (object) - Optional - Options for fitBounds animation - **interactive** (boolean) - Optional - Enable/disable map interactions (Default: true) - **pitchWithRotate** (boolean) - Optional - Enable pitch with rotate gesture (Default: true) - **clickTolerance** (number) - Optional - Max pixels between mouse down/up for click (Default: 3) - **scrollZoom** (boolean | object) - Optional - Enable/disable scroll zoom (Default: true) - **boxZoom** (boolean) - Optional - Enable/disable box zoom (Default: true) - **dragRotate** (boolean) - Optional - Enable/disable drag to rotate (Default: true) - **dragPan** (boolean) - Optional - Enable/disable drag to pan (Default: true) - **keyboard** (boolean) - Optional - Enable/disable keyboard controls (Default: true) - **doubleClickZoom** (boolean) - Optional - Enable/disable double-click zoom (Default: true) - **touchZoomRotate** (boolean | object) - Optional - Enable/disable touch zoom/rotate (Default: true) - **touchPitch** (boolean | object) - Optional - Enable/disable touch pitch (Default: true) - **antialias** (boolean) - Optional - Enable antialiasing - **refreshExpiredTiles** (boolean) - Optional - Refresh expired tiles (Default: true) - **maxBounds** ([number, number, number, number]) - Optional - Constrain map to bounds [swLng, swLat, neLng, neLat] - **projection** (string) - Optional - Map projection ('mercator' or 'globe') (Default: 'mercator') - **renderWorldCopies** (boolean) - Optional - Render multiple copies of the world (Default: true) - **locale** (object) - Optional - Localization strings for UI - **polygon** (boolean) - Optional - Enable drawing tools for polygons/lines/points (Default: false) ``` -------------------------------- ### Handle Map Camera Movement Events Source: https://context7.com/barikoi/bkoi-gl-js/llms.txt Responds to camera movement events like 'movestart', 'move', 'moveend', 'zoomstart', 'zoom', 'zoomend', 'rotatestart', 'rotate', 'rotateend', and 'pitch' to track and log camera state. ```javascript // Camera movement events map.on('movestart', () => console.log('Movement started')) map.on('move', () => console.log('Moving...')) map.on('moveend', () => { console.log('Movement ended at:', map.getCenter()) }) map.on('zoomstart', () => console.log('Zoom started')) map.on('zoom', () => console.log('Zooming:', map.getZoom())) map.on('zoomend', () => console.log('Zoom ended')) map.on('rotatestart', () => console.log('Rotation started')) map.on('rotate', () => console.log('Rotating:', map.getBearing())) map.on('rotateend', () => console.log('Rotation ended')) map.on('pitch', () => console.log('Pitch:', map.getPitch())) ``` -------------------------------- ### Basic Drawing Controls Configuration Source: https://github.com/barikoi/bkoi-gl-js/blob/main/README.md Configure which drawing tools are available and set the initial mode. Controls include polygon, line, point, and trash. ```javascript drawOptions: { // Controls which drawing tools are available displayControlsDefault: true, // Show all controls by default controls: { polygon: true, // Enable polygon drawing tool line_string: true, // Enable line drawing tool point: true, // Enable point marker tool trash: true // Enable delete button }, // Set the initial mode defaultMode: 'simple_select', // Options: 'simple_select', 'direct_select', 'draw_polygon', 'draw_line_string', 'draw_point' // Enable custom properties on features userProperties: true } ``` -------------------------------- ### Publish to npm Source: https://github.com/barikoi/bkoi-gl-js/blob/main/DEVELOPER_GUIDE.md Publish the Barikoi GL JS library to the npm registry after completing all pre-publishing checks and testing. ```bash npm publish ``` -------------------------------- ### Ease To Animation Source: https://github.com/barikoi/bkoi-gl-js/blob/main/README.md Provides a smooth animated transition to a new camera position with a customizable duration. Useful for gradual map adjustments. ```javascript map.easeTo({ center: [90.39, 23.82], zoom: 14, bearing: 45, pitch: 30, duration: 2000, // Duration in ms }) ``` -------------------------------- ### Responsive Sizing Configuration Source: https://github.com/barikoi/bkoi-gl-js/blob/main/README.md Configure the minimap to automatically adjust its size based on window dimensions. This includes setting responsive dimensions and size constraints. ```APIDOC ## Responsive Sizing Configuration ### Description The minimap supports responsive sizing that automatically adjusts based on window dimensions. ### Method Not applicable (Configuration within Map constructor) ### Endpoint Not applicable ### Parameters #### Request Body (Minimap Options) - **responsive** (boolean) - Optional - Enable responsive sizing (default: true) - **responsiveWidth** (string) - Optional - Responsive width (viewport-relative) - **responsiveHeight** (string) - Optional - Responsive height (viewport-relative) - **minWidth** (string) - Optional - Minimum width constraint - **minHeight** (string) - Optional - Minimum height constraint - **maxWidth** (string) - Optional - Maximum width constraint - **maxHeight** (string) - Optional - Maximum height constraint ### Request Example ```javascript const map = new bkoigl.Map({ container: 'map', accessToken: 'YOUR_BARIKOI_API_KEY', center: [90.39, 23.82], zoom: 12, minimap: { zoomAdjust: -4, position: 'bottom-right', responsive: true, responsiveWidth: '25vw', responsiveHeight: '25vh', minWidth: '150px', minHeight: '100px', maxWidth: '500px', maxHeight: '400px', }, }); ``` ### Response Not applicable (Configuration) ### Response Example Not applicable ``` -------------------------------- ### Minimap Configuration Source: https://github.com/barikoi/bkoi-gl-js/blob/main/README.md Configure the minimap interactions and behavior during map initialization. ```APIDOC ## Minimap Configuration ### Description Control which map interactions are enabled on the minimap. By default, all interactions are disabled. ### Parameters #### Request Body - **zoomAdjust** (number) - Optional - The zoom offset relative to the main map. - **position** (string) - Optional - The position of the minimap (e.g., 'bottom-right'). - **interactions** (object) - Optional - Object containing boolean flags for: dragPan, scrollZoom, boxZoom, dragRotate, keyboard, doubleClickZoom, touchZoomRotate. ``` -------------------------------- ### Handle Mouse and Touch Events Source: https://context7.com/barikoi/bkoi-gl-js/llms.txt Captures mouse events like 'click', 'dblclick', and 'mousemove', as well as touch events 'touchstart', 'touchmove', and 'touchend' for user interaction. ```javascript // Mouse/pointer events map.on('click', (e) => { console.log('Clicked at:', e.lngLat.lng, e.lngLat.lat) console.log('Pixel position:', e.point.x, e.point.y) }) map.on('dblclick', (e) => { console.log('Double-clicked at:', e.lngLat) }) map.on('mousemove', (e) => { // Track cursor position document.getElementById('coords').textContent = `${e.lngLat.lng.toFixed(4)}, ${e.lngLat.lat.toFixed(4)}` }) // Touch events map.on('touchstart', (e) => console.log('Touch started')) map.on('touchmove', (e) => console.log('Touch moving')) map.on('touchend', (e) => console.log('Touch ended')) ``` -------------------------------- ### Build Barikoi GL JS Package Source: https://github.com/barikoi/bkoi-gl-js/blob/main/DEVELOPER_GUIDE.md Build the project before generating a tarball or publishing. Ensure all TypeScript errors are resolved and dependencies are met. ```bash npm run build ``` -------------------------------- ### Map Constructor Source: https://context7.com/barikoi/bkoi-gl-js/llms.txt Initializes the core map component with Barikoi-specific configurations and drawing tools. ```APIDOC ## Map Constructor ### Description Initializes the interactive map instance. The constructor accepts an options object that extends MapLibre GL JS MapOptions with Barikoi-specific fields. ### Parameters #### Request Body - **container** (string/HTMLElement) - Required - HTML element ID or element to render the map. - **accessToken** (string) - Required - Your Barikoi API key. - **style** (string) - Optional - URL to the map style JSON. - **center** (array) - Optional - Initial map center as [longitude, latitude]. - **zoom** (number) - Optional - Initial zoom level (0-22). - **polygon** (boolean) - Optional - Enable drawing tools. - **drawOptions** (object) - Optional - Configuration for drawing controls. ``` -------------------------------- ### Minimap Configuration Options Source: https://github.com/barikoi/bkoi-gl-js/blob/main/README.md A comprehensive list of configuration options available for the Minimap control. ```APIDOC ## Minimap Configuration Options ### Description Configuration options for the minimap control, allowing customization of style, zoom behavior, positioning, and responsiveness. ### Parameters #### Request Body - **style** (string | StyleSpecification) - Optional - Map style for the minimap. Inherits from parent map if not provided. - **zoomAdjust** (number) - Optional - Zoom level difference between parent and minimap. Default: -4. - **lockZoom** (number) - Optional - Lock minimap to a specific zoom level (overrides zoomAdjust). - **pitchAdjust** (boolean) - Optional - Whether to sync pitch (tilt) with parent map. Default: false. - **position** (string) - Optional - Position of minimap control ('top-left', 'top-right', 'bottom-left', 'bottom-right'). Default: 'top-right'. - **center** ([number, number]) - Optional - Initial center coordinates [lng, lat]. - **accessToken** (string) - Optional - Barikoi API access token for the minimap. - **containerStyle** (object) - Optional - Custom CSS properties for the minimap container. Default: { width: '400px', height: '300px' }. - **borderRadius** (string) - Optional - Border radius of the minimap container. Default: '3px'. - **toggleable** (boolean) - Optional - Whether the minimap can be minimized/maximized. Default: true. - **toggleButton** (object) - Optional - Custom toggle button configuration. - **initialMinimized** (boolean) - Optional - Whether to start in minimized state. Default: false. - **collapsedWidth** (string) - Optional - Width when minimized. Default: '29px'. - **collapsedHeight** (string) - Optional - Height when minimized. Default: '29px'. - **hideText** (string) - Optional - Tooltip text when expanded. Default: 'Hide minimap'. - **showText** (string) - Optional - Tooltip text when minimized. Default: 'Show minimap'. - **onToggle** (function) - Optional - Callback when minimap is toggled: (isMinimized: boolean) => void. - **interactions** (object) - Optional - Map interactions configuration. - **parentRect** (object) - Optional - Parent rectangle overlay configuration. - **responsive** (boolean) - Optional - Enable responsive sizing based on window dimensions. Default: true. - **responsiveWidth** (string) - Optional - Responsive width as CSS value. Default: '20vw'. - **responsiveHeight** (string) - Optional - Responsive height as CSS value. Default: '20vh'. - **minWidth** (string) - Optional - Minimum width constraint for responsive sizing. Default: '200px'. - **minHeight** (string) - Optional - Minimum height constraint for responsive sizing. Default: '150px'. ``` -------------------------------- ### Basic Drawing Options Configuration Source: https://github.com/barikoi/bkoi-gl-js/blob/main/README.md Configure the default drawing tools, controls, and modes available in the map. ```APIDOC ## Basic Drawing Options Configuration ### Description Configure the default drawing tools, controls, and modes available in the map. ### Parameters #### Request Body - **drawOptions** (object) - Required - Options for configuring the drawing tools. - **displayControlsDefault** (boolean) - Optional - Show all controls by default. Defaults to `true`. - **controls** (object) - Optional - Specify which drawing controls to enable. - **polygon** (boolean) - Optional - Enable polygon drawing tool. - **line_string** (boolean) - Optional - Enable line drawing tool. - **point** (boolean) - Optional - Enable point marker tool. - **trash** (boolean) - Optional - Enable delete button. - **defaultMode** (string) - Optional - Set the initial drawing mode. Options: `'simple_select'`, `'direct_select'`, `'draw_polygon'`, `'draw_line_string'`, `'draw_point'`. Defaults to `'simple_select'`. - **userProperties** (boolean) - Optional - Enable custom properties on features. Defaults to `false`. ### Request Example ```json { "drawOptions": { "displayControlsDefault": true, "controls": { "polygon": true, "line_string": true, "point": true, "trash": true }, "defaultMode": "simple_select", "userProperties": true } } ``` ``` -------------------------------- ### Creating Popups with Content and Options Source: https://context7.com/barikoi/bkoi-gl-js/llms.txt Display popups with text or HTML content at specific map coordinates. Customize appearance and behavior with various options. ```javascript // Basic popup with HTML content const popup = new bkoigl.Popup() .setLngLat([90.39, 23.82]) .setHTML('

Dhaka

Capital of Bangladesh

') .addTo(map) // Popup with configuration options const configuredPopup = new bkoigl.Popup({ closeButton: true, closeOnClick: false, offset: 25, anchor: 'bottom', maxWidth: '300px' }) .setLngLat([90.40, 23.83]) .setText('Simple text content') .addTo(map) // Attach popup to a marker (opens on click) const markerPopup = new bkoigl.Popup({ offset: 25 }) .setHTML('

Location

Click marker to see this

') const markerWithPopup = new bkoigl.Marker() .setLngLat([90.39, 23.82]) .setPopup(markerPopup) .addTo(map) // Toggle popup programmatically markerWithPopup.togglePopup() ``` -------------------------------- ### Set Barikoi Access Token Globally Source: https://github.com/barikoi/bkoi-gl-js/blob/main/DEVELOPER_GUIDE.md Demonstrates how to set the Barikoi access token globally using the `accessToken` import. This avoids the need to pass it per instance. ```javascript import { accessToken } from "bkoi-gl"; // Set globally accessToken = "YOUR_BARIKOI_API_KEY_HERE"; // Or per instance const map = new Map({ accessToken: "YOUR_BARIKOI_API_KEY_HERE", }); ``` -------------------------------- ### Configure Responsive Minimap Sizing Source: https://github.com/barikoi/bkoi-gl-js/blob/main/README.md Enable and configure responsive sizing for the minimap. This allows the minimap to adjust its dimensions based on the browser window size, respecting defined minimum and maximum constraints. ```javascript const map = new bkoigl.Map({ container: 'map', accessToken: 'YOUR_BARIKOI_API_KEY', center: [90.39, 23.82], zoom: 12, minimap: { zoomAdjust: -4, position: 'bottom-right', // Enable responsive sizing (default: true) responsive: true, // Responsive dimensions (viewport-relative) responsiveWidth: '25vw', responsiveHeight: '25vh', // Size constraints minWidth: '150px', minHeight: '100px', maxWidth: '500px', maxHeight: '400px', }, }) ``` -------------------------------- ### Commit and Push Changes Source: https://github.com/barikoi/bkoi-gl-js/blob/main/DEVELOPER_GUIDE.md Commands to stage all changes, commit them with a descriptive message following conventional commits, and push the feature branch to your fork. ```bash git add . git commit -m "feat: description of your changes" git push origin feature/your-feature-name ``` -------------------------------- ### Initializing the Barikoi Map Source: https://context7.com/barikoi/bkoi-gl-js/llms.txt Initialize a new Barikoi map instance with various configuration options. Requires an HTML container ID and a Barikoi API key. ```javascript const map = new bkoigl.Map({ container: 'map', // HTML element ID or element accessToken: 'YOUR_BARIKOI_API_KEY', // Required: Barikoi API key style: 'https://map.barikoi.com/styles/barikoi-light/style.json', center: [90.3938010872331, 23.821600277500405], // [longitude, latitude] zoom: 10, // Initial zoom (0-22) bearing: 0, // Rotation in degrees pitch: 0, // Tilt in degrees (0-85) minZoom: 0, maxZoom: 22, interactive: true, // Enable pan/zoom/rotate scrollZoom: true, dragPan: true, dragRotate: true, keyboard: true, doubleClickZoom: true, touchZoomRotate: true, polygon: true, // Enable drawing tools drawOptions: { displayControlsDefault: true, controls: { polygon: true, line_string: true, point: true, trash: true }, defaultMode: 'simple_select' } }) // Wait for map to load before adding layers map.on('load', () => { console.log('Map is ready for interaction') }) // Handle errors map.on('error', (e) => { console.error('Map error:', e.error) }) ``` -------------------------------- ### Handle Drawing Events Source: https://github.com/barikoi/bkoi-gl-js/blob/main/README.md Demonstrates how to listen for feature creation, updates, and deletions when drawing tools are enabled with polygon: true. ```javascript // Assuming map is initialized with drawing enabled (polygon: true) // Handle feature creation map.on('draw.create', e => { const feature = e.features[0] const geometryType = feature.geometry.type switch (geometryType) { case 'Polygon': console.log('Polygon created:', feature.geometry.coordinates) break case 'LineString': console.log('Line created:', feature.geometry.coordinates) break case 'Point': console.log('Point created:', feature.geometry.coordinates) break } }) // Handle feature updates map.on('draw.update', e => { console.log('Feature updated:', e.features) }) // Handle feature deletion map.on('draw.delete', e => { console.log('Feature deleted:', e.features) }) ``` -------------------------------- ### Markers and Popups Source: https://github.com/barikoi/bkoi-gl-js/blob/main/README.md Documentation for creating and managing visual markers and informational popups on the map. ```APIDOC ## Markers & Popups ### Markers - `new bkoigl.Marker(options)`: Creates a marker instance. - `.setLngLat([lng, lat])`: Sets the geographic position. - `.addTo(map)`: Adds the marker to the map. - `.remove()`: Removes the marker from the map. ### Popups - `new bkoigl.Popup(options)`: Creates a popup instance. - `.setHTML(string)`: Sets HTML content. - `.setText(string)`: Sets plain text content. - `.setLngLat([lng, lat])`: Sets the geographic position. - `.addTo(map)`: Adds the popup to the map. ``` -------------------------------- ### Importing Barikoi GL JS Components Source: https://context7.com/barikoi/bkoi-gl-js/llms.txt Import necessary components and styles from the bkoi-gl package. Ensure you import the CSS file for proper styling. ```javascript import { Map, Marker, FullscreenControl } from 'bkoi-gl' import 'bkoi-gl/style.css' ``` -------------------------------- ### Manage Minimap via Methods Source: https://github.com/barikoi/bkoi-gl-js/blob/main/README.md Access methods on the Minimap instance to toggle visibility, manage layers, and update properties programmatically. ```javascript const minimap = new bkoigl.Minimap({ zoomAdjust: -4, position: 'bottom-right', }) map.addControl(minimap, 'bottom-right') // Toggle minimap programmatically minimap.toggle() // Check if minimized const isMinimized = minimap.isMinimized() // Set custom style (only works if minimap has its own style) minimap.setStyle('https://map.barikoi.com/styles/barikoi-dark/style.json') // Add layers to minimap (only works if minimap has its own style) minimap.addLayer({ id: 'my-layer', type: 'circle', source: 'my-source', paint: { 'circle-radius': 10, 'circle-color': '#FF0000', }, }) // Remove layer minimap.removeLayer('my-layer') // Set paint/layout properties minimap.setPaintProperty('my-layer', 'circle-color', '#00FF00') minimap.setLayoutProperty('my-layer', 'visibility', 'none') // Set filter minimap.setFilter('my-layer', ['==', 'type', 'restaurant']) // Set layer zoom range minimap.setLayerZoomRange('my-layer', 10, 18) // Move layer in stack minimap.moveLayer('my-layer', 'another-layer') ``` -------------------------------- ### Animate Map Camera Transitions Source: https://context7.com/barikoi/bkoi-gl-js/llms.txt Use flyTo, easeTo, and jumpTo for animated or instant map view changes. Customize animation speed and zoom curves. ```javascript // Fly to location with smooth animation map.flyTo({ center: [90.39, 23.82], zoom: 14, bearing: 0, pitch: 0, speed: 1.2, // Animation speed multiplier curve: 1.42 // Zoom curve }) ``` ```javascript // Ease to location with custom duration map.easeTo({ center: [90.40, 23.83], zoom: 15, bearing: 45, pitch: 30, duration: 2000 // Duration in milliseconds }) ``` ```javascript // Instant jump without animation map.jumpTo({ center: [90.38, 23.81], zoom: 12, bearing: 0, pitch: 0 }) ``` -------------------------------- ### Implement Markers Source: https://github.com/barikoi/bkoi-gl-js/blob/main/README.md Creates and manages map markers with support for custom colors and HTML elements. ```javascript // Basic marker const marker = new bkoigl.Marker().setLngLat([90.39, 23.82]).addTo(map) // Marker with custom color const marker = new bkoigl.Marker({ color: '#ff0000' }).setLngLat([90.39, 23.82]).addTo(map) // Marker with custom element const el = document.createElement('div') el.className = 'custom-marker' el.style.backgroundImage = 'url(marker.png)' el.style.width = '30px' el.style.height = '30px' const marker = new bkoigl.Marker(el).setLngLat([90.39, 23.82]).addTo(map) // Remove a marker marker.remove() ``` -------------------------------- ### Initialize Map with Drawing Tools Source: https://context7.com/barikoi/bkoi-gl-js/llms.txt Initializes a Barikoi map with drawing tools enabled, including options for controlling the display and behavior of polygon, line, and point drawing. Handles drawing events like creation, update, deletion, and mode changes. ```javascript const map = new bkoigl.Map({ container: 'map', accessToken: 'YOUR_BARIKOI_API_KEY', center: [90.39, 23.82], zoom: 12, polygon: true, drawOptions: { displayControlsDefault: true, controls: { polygon: true, line_string: true, point: true, trash: true }, defaultMode: 'simple_select', userProperties: true, styles: [ // Polygon fill style { id: 'gl-draw-polygon-fill', type: 'fill', filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']], paint: { 'fill-color': '#D20C0C', 'fill-opacity': 0.3 } }, // Polygon outline style { id: 'gl-draw-polygon-stroke-active', type: 'line', filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']], layout: { 'line-cap': 'round', 'line-join': 'round' }, paint: { 'line-color': '#D20C0C', 'line-width': 2 } }, // Point style { id: 'gl-draw-point-active', type: 'circle', filter: ['all', ['==', '$type', 'Point'], ['!=', 'mode', 'static']], paint: { 'circle-radius': 8, 'circle-color': '#D20C0C', 'circle-stroke-width': 2, 'circle-stroke-color': '#ffffff' } } ] } }) // Handle drawing events map.on('draw.create', (e) => { const feature = e.features[0] switch (feature.geometry.type) { case 'Polygon': console.log('Polygon created:', feature.geometry.coordinates) break case 'LineString': console.log('Line created:', feature.geometry.coordinates) break case 'Point': console.log('Point created:', feature.geometry.coordinates) break } }) map.on('draw.update', (e) => { console.log('Features updated:', e.features) }) map.on('draw.delete', (e) => { console.log('Features deleted:', e.features) }) map.on('draw.selectionchange', (e) => { console.log('Selection changed:', e.features) }) map.on('draw.modechange', (e) => { console.log('Draw mode changed to:', e.mode) }) ``` -------------------------------- ### Listen for Map Load and Error Events Source: https://github.com/barikoi/bkoi-gl-js/blob/main/README.md Use the `load` event to execute code once the map has finished loading all resources. Handle `error` events to catch and log any issues during map initialization or operation. ```javascript map.on('load', () => { console.log('Map is ready for interaction') }) map.on('error', e => { console.error('Map error:', e.error) }) ``` -------------------------------- ### Initialize Map in React/Next.js Source: https://github.com/barikoi/bkoi-gl-js/blob/main/README.md Use React hooks to manage the map lifecycle and container reference. ```typescript "use client"; import { useEffect, useRef } from "react"; import { Map } from "bkoi-gl"; import "bkoi-gl/style.css"; const BasicMap = () => { const mapContainer = useRef(null); const map = useRef(null); useEffect(() => { if (map.current) return; if (!mapContainer.current) return; map.current = new Map({ container: mapContainer.current, accessToken: "YOUR_BARIKOI_API_KEY_HERE", center: [90.39017821904588, 23.719800220780733], // Dhaka coordinates zoom: 10, polygon: true, // Enable draw polygon option drawOptions: { controls: { polygon: true, trash: true } } }); // Cleanup on unmount return () => { map.current?.remove(); map.current = null; }; }, []); return (
); } export default BasicMap; ``` -------------------------------- ### Map Utility Methods Source: https://github.com/barikoi/bkoi-gl-js/blob/main/README.md Perform various map state operations including setting bounds, projection, and world copies. ```javascript // Get bounds const bounds = map.getBounds() console.log(bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()) // Set max bounds map.setMaxBounds([ [90.0, 23.5], [91.0, 24.5], ]) // Get projection const projection = map.getProjection() // World copies map.setRenderWorldCopies(true) ``` -------------------------------- ### Configure Minimap Control Source: https://context7.com/barikoi/bkoi-gl-js/llms.txt Adds a synchronized overview map for geographic context. Can be initialized via map options or the addControl method. ```javascript // Using map options const mapWithMinimap = new bkoigl.Map({ container: 'map', accessToken: 'YOUR_BARIKOI_API_KEY', center: [90.39, 23.82], zoom: 12, minimap: { zoomAdjust: -4, // Zoom difference from parent position: 'bottom-right', responsive: true, responsiveWidth: '20vw', responsiveHeight: '20vh', minWidth: '200px', minHeight: '150px', maxWidth: '400px', maxHeight: '300px', toggleable: true, initialMinimized: false, hideText: 'Hide minimap', showText: 'Show minimap', onToggle: (isMinimized) => { console.log('Minimap minimized:', isMinimized) }, parentRect: { linePaint: { 'line-color': '#FFFFFF', 'line-width': 2, 'line-opacity': 0.9 }, fillPaint: { 'fill-color': '#0088FF', 'fill-opacity': 0.2 } }, interactions: { dragPan: true, scrollZoom: false, boxZoom: false, dragRotate: false, keyboard: false, doubleClickZoom: false, touchZoomRotate: false } } }) // Or using addControl method const minimap = new bkoigl.Minimap({ zoomAdjust: -4, position: 'bottom-right', toggleButton: { iconBackgroundColor: '#333', hoverColor: '#FF5722', enableRotation: true } }) map.addControl(minimap, 'bottom-right') // Programmatic control minimap.toggle() console.log('Is minimized:', minimap.isMinimized()) ``` -------------------------------- ### Manage Map Interaction Handlers Source: https://context7.com/barikoi/bkoi-gl-js/llms.txt Use these methods to toggle specific user input behaviors on the map instance. Ensure the map is initialized before calling these methods. ```javascript // Disable/enable scroll zoom map.scrollZoom.disable() map.scrollZoom.enable() // Disable/enable drag pan map.dragPan.disable() map.dragPan.enable() // Disable/enable drag rotate map.dragRotate.disable() map.dragRotate.enable() // Disable/enable keyboard navigation map.keyboard.disable() map.keyboard.enable() // Disable/enable double-click zoom map.doubleClickZoom.disable() map.doubleClickZoom.enable() // Disable/enable touch zoom/rotate map.touchZoomRotate.disable() map.touchZoomRotate.enable() // Disable/enable touch pitch map.touchPitch.disable() map.touchPitch.enable() // Disable/enable box zoom map.boxZoom.disable() map.boxZoom.enable() // Resize map when container changes window.addEventListener('resize', () => { map.resize() }) ```