README

bdatlas

Bangladesh map data and Leaflet helpers for JavaScript, CDN, and browser projects.

bdatlas includes:

Bangladesh boundary GeoJSON
Division polygons (ADM1)
District polygons (ADM2)
Division list data
District list data
Built-in Leaflet map creator with controls, Bangla labels, search, filtering, and masking

Install

npm install bdatlas

CDN Use

For direct browser usage:

<script type="module">
  import { createBDAtlasMap } from "https://cdn.jsdelivr.net/npm/bdatlas@1.0.10/+esm";

  await createBDAtlasMap("map", {
    mask: true,
    controls: true,
    fitBounds: true
  });
</script>

Quick Start

<!doctype html>
<html lang="bn">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>bdatlas Demo</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
    }

    #map {
      width: 100%;
      height: 100vh;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <script type="module">
    import { createBDAtlasMap } from "https://cdn.jsdelivr.net/npm/bdatlas@1.0.10/+esm";

    await createBDAtlasMap("map", {
      mask: true,
      controls: true,
      fitBounds: true
    });
  </script>
</body>
</html>

Features

Division and district polygons
Bangla labels and popups
Bangladesh-only mask
Responsive built-in control panel
Division toggle
District toggle
Live division search
Live district search
English and Bangla search matching
Auto focus on selected division or district
Hover highlight on districts
Mobile-friendly control placement
Leaflet zoom and attribution controls hidden by package defaults

Main API

Data exports

import {
  bdDivisions,
  bdDistricts,
  bangladeshBoundary,
  bdAdm1,
  bdAdm2
} from "bdatlas";

Map helpers

import {
  createBDAtlasMap,
  createLeafletMap,
  createBoundaryLayer,
  createCountryMaskLayer,
  createDivisionLayer,
  createDistrictLayer,
  ensureLeafletCss,
  loadLeaflet
} from "bdatlas";

Framework wrappers

import {
  createReactBDAtlas,
  createVueBDAtlas,
  createSvelteBDAtlas
} from "bdatlas";

Example: npm / bundler use

import {
  createBDAtlasMap,
  bdDivisions,
  bdDistricts
} from "bdatlas";

console.log(bdDivisions.divisions);
console.log(bdDistricts.districts);

await createBDAtlasMap("map", {
  mask: true,
  controls: true,
  fitBounds: true
});

Example: manual layer creation

import { loadLeaflet, createDivisionLayer, createDistrictLayer } from "bdatlas";

const L = await loadLeaflet();
const map = L.map("map").setView([23.685, 90.3563], 7);

const divisionLayer = await createDivisionLayer();
const districtLayer = await createDistrictLayer();

divisionLayer.addTo(map);
districtLayer.addTo(map);

Default behavior of `createBDAtlasMap`

Loads Leaflet internally
Injects Leaflet CSS automatically
Adds Bangladesh mask if enabled
Creates built-in responsive control UI
Uses Bangla labels
Hides Leaflet zoom control
Hides Leaflet attribution control

Commands

Install dependencies:

npm install

Build:

npm run build

Check publish contents:

npm run pack:check

Publish to npm:

npm publish

Publish with OTP:

npm publish --otp=123456

Check latest npm version:

npm view bdatlas version

Version update flow

Update code
Bump version in package.json
Build package
Publish to npm

Example:

npm run build
npm publish --otp=123456

GitHub setup

This package is intended to use:

https://github.com/Shafin5556/bdatlas.git

If this local folder is not a git repository yet:

git init
git branch -M main
git remote add origin https://github.com/Shafin5556/bdatlas.git

Then commit and push:

git add .
git commit -m "Initial package setup"
git push -u origin main

License

MIT