Your First Barikoi Map

The fastest way to get a beautiful, interactive map on any website or app.

Full 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 (feel free to change)
        zoom: 11,
        accessToken: "YOUR_BARIKOI_API_KEY", // ← Replace this!
      });
    </script>
  </body>
</html>

Code Breakdown

1. Required Dependencies

<!-- Barikoi GL CSS - Provides styling for map controls, popups, and markers -->
<link
  rel="stylesheet"
  href="https://unpkg.com/bkoi-gl@latest/dist/style/bkoi-gl.css"
/>

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

Resource	Purpose
`bkoi-gl.css`	Styles for map UI elements (zoom buttons, attribution, popups, etc.)
`bkoi-gl.js`	Core JavaScript library that renders the map and handles interactions

Use a specific version in production

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

2. CSS Setup for Full-Screen Map

body {
  margin: 0; /* Remove default browser margins */
  padding: 0; /* Remove default browser padding */
}

html,
body,
#map {
  height: 100%; /* Map container takes full viewport height */
  width: 100%; /* Map container takes full viewport width */
}

Why is this necessary?

Without these styles, the map container would have zero height and nothing would be visible. The map needs explicit dimensions to render.

3. Map Container Element

<div id="map"></div>

This empty <div> is where Barikoi GL injects the interactive map canvas. The id="map" must match the container property in the JavaScript initialization.

4. Initialize the Map

const map = new bkoigl.Map({
  container: "map", // Target element ID
  style: "https://map.barikoi.com/styles/barikoi-light/style.json", // Map style URL
  center: [90.4071, 23.7925], // [longitude, latitude]
  zoom: 11, // Zoom level (0-22)
  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

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].

Quick Reference: Zoom Levels

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

Your First Barikoi Map

Full Working Example​

Code Breakdown​

1. Required Dependencies​

2. CSS Setup for Full-Screen Map​

3. Map Container Element​

4. Initialize the Map​

Configuration Options Explained​

Quick Reference: Zoom Levels​