Interactive Bangladesh maps for Flutter. One widget gives you a tappable map that drills from division down to union, with your own data from JSON or an API coloring every region. Pure Dart, zero dependencies.

Screenshots

Divisions	Districts	Upazilas	Unions

Installation

flutter pub add bd_map

import 'package:bd_map/bd_map.dart';

Usage

1. Show a map

Every map works with no data at all. Pick the one you need:

BdMap()                         // tap to drill in, all four levels
BdCountryMap(BdArea.district)   // whole country at one level
Bangladesh()                    // classic division map

BdMap	BdCountryMap	Bangladesh

Switch labels, breadcrumb and panel text to Bangla with useBanglaNames: true.

Features

2. Handle taps

Every callback and builder gives you a BdRegion:

BdMap(
  onRegionTap: (region) => print(region.name),
  infoBuilder: (context, region) => Text('${region.name} · ${region.bnName}'),
)

You never type ids by hand. Read them from a tapped region, look them up with BdGeo, or key your data by plain names in JSON as shown next.

3. Add your data

Write a JSON file nested the way the country is organized. Keys are region names in English or Bangla, each region has a value, and children sit inside their parent. A child that is a plain number is just its value:

{
  "title": "Population",
  "unit": "M",
  "data": {
    "Dhaka": {
      "value": 44.2,
      "Gazipur": { "value": 3.4, "Sreepur": 0.4, "Kapasia": 1.3 },
      "Tangail": 4.0
    },
    "Sylhet": 11.0
  }
}

Load it and pass it to any map. The same line also accepts an API response body, where a JSON array of objects is read as a list:

final body = await rootBundle.loadString('assets/my_data.json');   // or (await http.get(uri)).body
final population = BdMapData<num>.fromJsonString(body);

BdMap(
  data: population,       // value shown in the info panel
  showDataList: true,     // ranked, tappable list under the map
)

API-style list items name their region with a level field and carry any numeric value field:

[
  { "district": "Gazipur", "value": 3.4 },
  { "division": "Dhaka", "thana": "Savar", "population": 1.4 }
]

The maps keep their normal colors. For a choropleth, add one line:

regionColorBuilder: (r) => population.colorOf(r),

Building the dataset in Dart works too, keyed by region id:

final population = BdMapData<num>(
  {'dhaka': 44.2, 'dhaka.gazipur': 3.4, 'dhaka.gazipur.sreepur': 0.4},
  title: 'Population',
  format: (v) => '${v}M',
);

Ready-made JSON files. Copy one from example/assets, replace the sample values with yours, and every region name is already spelled correctly and in the right place:

The example app in example/lib/main.dart loads the full-country file and can switch to an API-style response from its app bar.

{ "districts": { "Gazipur": 3.4 }, "upazilas": { "Gazipur/Sreepur": 0.4 } }

4. Show data as a list

BdRegionDataList renders a level or one region's children with the same colors and values as the maps:

BdRegionDataList(
  level: BdArea.district,             // all 64 districts, or
  // parent: BdGeo.divisionByName('Dhaka'),  // its 13 districts
  data: population,
  onTap: (region) => print(region.name),
)

5. Look up geography

final dhaka = BdGeo.divisionByName('Dhaka')!;      // or 'ঢাকা'
final districts = BdGeo.childrenOf(dhaka);          // 13 districts
final gazipur = BdGeo.districtByName('Gazipur')!;   // gazipur.id == 'dhaka.gazipur'
final upazilas = BdGeo.childrenOf(gazipur);         // its upazilas
final unions = BdGeo.unionsOf(upazilas.first.id);   // its unions
final region = BdGeo.byId('dhaka.gazipur.sreepur');

BdMap options

Boundary geometry comes from geoBoundaries (CC BY 4.0) and Bangla names from bangladesh-geocode, all compiled into Dart.

Classic map

Use the Bangladesh widget for the classic division map, or BangladeshMap for full customization:

class OurMap extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const BangladeshMap(
      width: 461,
      height: 600,
      rangpurColor: Colors.orange,
      rajshahiColor: Colors.red,
      dhakaColor: Colors.indigo,
      sylhetColor: Colors.blue,
      khulnaColor: Colors.teal,
      chittagongColor: Colors.grey,
      barisalColor: Colors.pink,
      mymensinghColor: Colors.brown,
      showBorder: true,
      showName: true,
      showDivisionBorder: true,
      showDistrictBorder: true,
    );
  }
}

Developed by Farhan Sadik Galib
Portfolio · LinkedIn · Email