bd_map 1.1.0

bd_map: ^1.1.0 copied to clipboard

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