maps-api

Barikoi Maps

Build beautiful, interactive maps with Barikoi GL JS - a powerful JavaScript library for creating custom maps with accurate location data.

What is Barikoi Maps?

Barikoi GL JS is a JavaScript library for interactive, customizable vector maps on the web. It takes map styles and data from the Barikoi Maps API and renders them using WebGL for smooth performance on any device.

Key Features

Vector Maps - Smooth, scalable maps that look sharp on any display
Fully Customizable - Complete control over map styling and appearance
High Performance - Hardware-accelerated rendering with WebGL
Global Coverage - Accurate local data with comprehensive coverage
Rich API - Extensive methods for markers, layers, popups, and interactions
Responsive - Works seamlessly across desktop, tablet, and mobile

Use Cases

Location-based Applications - Build ride-sharing, delivery, or field service apps
Real Estate Platforms - Display property locations with custom markers
Business Intelligence - Visualize data with heat maps and clusters
Logistics & Tracking - Track vehicles and shipments in real-time
Store Locators - Help customers find your business locations

Why Choose Barikoi?

Accurate Local Data

Barikoi provides:

Detailed street-level data with regional specialization
Accurate Points of Interest (POIs)
Multi-language support
Regular data updates

Developer-Friendly

Simple, intuitive API
Comprehensive documentation
Live code examples
Active support

Cost-Effective

Competitive pricing with transparent plans tailored for businesses of all sizes.

How to Get Started

1. Get Your API Key

👉 Get API Key

2. Choose Your Installation Method

📦 CDN (Recommended for beginners)

Add these lines to your HTML <head>:

<!-- Barikoi GL CSS -->
<link
  rel="stylesheet"
  href="https://unpkg.com/bkoi-gl@latest/dist/style/bkoi-gl.css"
/>

<!-- Barikoi GL JS -->
<script src="https://unpkg.com/bkoi-gl@latest/dist/iife/bkoi-gl.js"></script>

Use a specific version in production

Replace @latest with a fixed version like @2.0.4 to avoid unexpected breaking changes.

📦 NPM (For React, Vue, Angular, etc.)

Install via npm:

npm install bkoi-gl

Import in your JavaScript:

import bkoigl from "bkoi-gl";
import "bkoi-gl/dist/bkoi-gl.css";

👉 View framework guides

3. Create Your First Map

Add a map container to your HTML:

<div id="map" style="width: 100%; height: 500px;"></div>

Initialize the map with JavaScript:

const map = new bkoigl.Map({
  container: "map",
  style: "https://map.barikoi.com/styles/barikoi-light/style.json",
  center: [90.4071, 23.7925], // Dhaka coordinates [longitude, latitude]
  zoom: 11,
  accessToken: "YOUR_BARIKOI_API_KEY", // ← Replace this!
});

🎉 That's it! You now have a working map.

Quick Example

Here's a complete working example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First Barikoi Map</title>

    <!-- Barikoi GL CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/bkoi-gl@latest/dist/style/bkoi-gl.css"
    />
    <!-- Barikoi GL JS -->
    <script src="https://unpkg.com/bkoi-gl@latest/dist/iife/bkoi-gl.js"></script>

    <style>
      body {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #map {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script>
      const map = new bkoigl.Map({
        container: "map",
        style: "https://map.barikoi.com/styles/barikoi-light/style.json",
        center: [90.4071, 23.7925], // Dhaka [longitude, latitude]
        zoom: 11,
        accessToken: "YOUR_BARIKOI_API_KEY", // ← Replace this!
      });
    </script>
  </body>
</html>

Core Concepts

Map Initialization

Every Barikoi map requires:

Container - HTML element ID to hold the map
Style - URL to the map style JSON
Center - Initial map position [longitude, latitude]
Zoom - Initial zoom level (0-22)
API Key - Your authentication token

const map = new bkoigl.Map({
  container: "map", // HTML element ID
  style: "https://map.barikoi.com/styles/barikoi-light/style.json", // Map style URL
  center: [90.4071, 23.7925], // [lng, lat]
  zoom: 11, // Zoom level
  accessToken: "YOUR_BARIKOI_API_KEY", // Your API key
});

Configuration Options Explained

Option	Type	Description
`container`	`string`	The `id` of the HTML element where the map will render
`style`	`string`	URL to a Barikoi map style JSON (defines colors, fonts, layers, etc.)
`center`	`[lng, lat]`	Initial map center coordinates — longitude first!
`zoom`	`number`	Initial zoom level: `0` = world view, `22` = building level
`accessToken`	`string`	Your Barikoi API key from developer.barikoi.com

Coordinate System

Barikoi uses longitude, latitude order (same as GeoJSON):

// ✅ Correct
[90.4071, 23.7925][ // [longitude, latitude]
  // ❌ Wrong
  (23.7925, 90.4071)
]; // This is backwards!

Common Mistake: Coordinate Order

Barikoi GL uses [longitude, latitude] (like GeoJSON), not [latitude, longitude] (like Google Maps). Dhaka is [90.4071, 23.7925], not [23.7925, 90.4071].

Map Styles

Choose from pre-built styles or create your own:

// Light style (default)
style: "https://map.barikoi.com/styles/barikoi-light/style.json";

// Dark mode
style: "https://map.barikoi.com/styles/barikoi-dark-mode/style.json";

// Planet Style
style: "https://map.barikoi.com/styles/planet_map/style.json";

Zoom Levels Reference

Zoom Level	What You See
`0-3`	Continents / Countries
`4-6`	Large regions
`7-10`	Cities
`11-14`	Neighborhoods
`15-18`	Streets
`19-22`	Buildings

What's Next?

Learn More

API Reference - Complete API documentation
Interactive Examples - Live code examples you can copy
Framework Guides - React, Vue, Angular integration

Add Features

Markers & Popups - Add points of interest
Layers & Styling - Visualize custom data
Advanced Features - Real-time tracking & animations

Use Barikoi APIs

Geocoding - Convert addresses to coordinates
Reverse Geocoding - Get address from coordinates
Search - Find locations and places
Nearby - Discover nearby POIs

Migration Guides

Already using another mapping solution? We make it easy to switch:

Migrate from Mapbox - Step-by-step migration guide

Need Help?

Documentation - You're reading it!
Contact Support - We're here to help
Examples - Learn by doing
Pricing - View plans and pricing

Pro Tip

Start with our Interactive Examples to see live demos and copy working code. It's the fastest way to learn!

Browser Support

Barikoi GL JS works in all modern browsers that support WebGL:

✅ Chrome (latest)
✅ Firefox (latest)
✅ Safari (latest)
✅ Edge (latest)
✅ Mobile browsers (iOS Safari, Chrome for Android)

Ready to build something amazing? Get your API key and start mapping! 🚀

Barikoi Maps

What is Barikoi Maps?​

Key Features​

Use Cases​

Why Choose Barikoi?​

Accurate Local Data​

Developer-Friendly​

Cost-Effective​

How to Get Started​

1. Get Your API Key​

2. Choose Your Installation Method​

3. Create Your First Map​

Quick Example​

Core Concepts​

Map Initialization​

Configuration Options Explained​

Coordinate System​

Map Styles​

Zoom Levels Reference​

What's Next?​

Learn More​

Add Features​

Use Barikoi APIs​

Migration Guides​

Need Help?​

Browser Support​