Overview

Most livability rankings flatten a city into one number. Bengaluru does not work that way: a ward next to a tech park, a lake, and a metro station is a different place from the ward two kilometres away.

Bengaluru Livability Tracker is an interactive map that scores areas across twelve public-data indices - healthcare, education, daily needs, transit, employment, green cover, parks and lakes, recreation, water infrastructure, road quality, weather comfort, and air quality. Zoom changes the geography: about 34 neighborhoods, 243 BBMP wards, a ~500 m H3 grid, then an on-demand 500 m score wherever you click. A list view ranks the same scores; a detail panel shows the radar chart and the counts and distances behind each index.

Built as a personal project: product definition, data pipeline, API, and map UI. Here I have tried to use as many open source data and features as possible.

Problem

City “best places to live” lists are usually static, city-wide, and opaque. They rarely show where amenities sit, how far they are, or what happens when you drop from a locality name to a ward or a street.

Bengaluru makes that gap worse. Livability here is a mix of jobs, BMTC and metro access, lakes and parks, piped water coverage, and air - none of which align to a single polygon or area. I wanted a tool that treats scale as part of the question: neighborhood for orientation, ward for civic geography, H3 grids and point for “what is it like here.”

Approach

Three decisions shaped the product:

Zoom is the geography. Neighborhoods at city scale, BBMP wards at mid-zoom, H3 hexes at street-block scale, and a 500 m radius score at building scale. The layer chip in the header always names the current unit. (Individual streets and apartments to be covered in a subsequent iteration)

Public data, scored offline, served as GeoJSON. A Python bootstrap pulls OSM POIs, transit, BWSSB / OpenCity water layers, Sentinel-2 NDVI, and climate, then writes scored polygons. FastAPI serves those layers and computes point scores on demand.

Weights and limits are visible. Overall score is a weighted sum of twelve indices. Amenity scores mix how many places are nearby with how close the nearest one is. The UI lists what the data is not: road tags are not BBMP condition surveys; AQI is a model, not a CPCB station; water is infrastructure presence, not tanker days. (Looking to build these dynamic information into future iterations)

Product features

• Map view - Choropleth (colour-coded maps) of overall score on a light base map. Hover for the name and score; click to open the panel.

• Zoom-driven layers - Neighborhoods (zoom 10–12), BBMP wards (13–14), H3 grid (15–16), point scoring (17+). (Point scoring to be implemented in future iterations)

  

  Map View

  Colour cided areas based on overall livability across the city.

  Zoom-driven layers

  Starting from neighbourhoods and zooming all the way into H3 grids with BBMP wards in-between

  

  Map View

  Colour cided areas based on overall livability across the city.

  Zoom-driven layers

  Starting from neighbourhoods and zooming all the way into H3 grids with BBMP wards in-between

  

  Map View

  Colour cided areas based on overall livability across the city.

  Zoom-driven layers

  Starting from neighbourhoods and zooming all the way into H3 grids with BBMP wards in-between

• Search - Find an area and fly the map to it.

• Score panel - Overall score and rank, radar across indices, accordion breakdown with the actual counts, distances, NDVI, park/lake hectares, AQI, and similar metrics.

Search

Type an area in the search bar and fly to it

Score Panel

Overall score, rank, breakdown of scores and reason for the scores

Search

Type an area in the search bar and fly to it

Score Panel

Overall score, rank, breakdown of scores and reason for the scores

Search

Type an area in the search bar and fly to it

Score Panel

Overall score, rank, breakdown of scores and reason for the scores

• List view - Ranked neighborhoods, sortable columns, expand a row to its child wards, jump back to the map.

List View

Shows the list of neighbourhoods and the constitutent wards in the breakdown. Also shows the overall scores

The 12 indices

The indices polygon

Each neighbourhood, ward and polygon is scored on these 12 indices and their weights

Technical Specs

Data Pipeline (run once, offline): download BBMP wards → generate neighborhoods → seed IT parks → fetch OpenStreetMaps POIs → transit (Open BMTC + BMRCL GTFS) → environment (Open-Meteo) → water infrastructure (OpenCity / BWSSB GIS) → Sentinel-2 NDVI → score neighborhoods, wards, and H3 cells to GeoJSON.

Frontend: React 18, TypeScript, Vite, MapLibre GL, Tailwind, Radix UI, Recharts. MapLibre fill colors follow the overall score; zoom selects which GeoJSON layer to load.

Outcome - What I learned

The useful result is not a single “best neighborhood.” It is being able to move from a city overview to a ward to a 500 m circle and still see the same twelve questions, with the numbers that produced the color.

Building it made the data quality problem concrete. OpenStreetMaps is dense for shops and sparse for some offices. Road “quality” is a tag proxy. Air quality is a ~5 km model, not a street. Water coverage is pipes and borewells, not summer supply. Putting those limits in the product is part of the design.

Zoom-as-scale is the UX lesson: one map, four geographies, no extra mode switcher. The cost is teaching people that the score should change as the unit changes.

What next?

1. Currently working on a mobile view for the map/list view. There are some bugs that needs to be fixed though.Add

   

   Map View - Mobile

   Responsive view of how it looks like on a mobile device

   

   List View- Mobile

   Responsive view of the list on a mobile device

   

   Map View - Mobile

   Responsive view of how it looks like on a mobile device

   

   List View- Mobile

   Responsive view of the list on a mobile device

   

   Map View - Mobile

   Responsive view of how it looks like on a mobile device

   

   List View- Mobile

   Responsive view of the list on a mobile device

2. Adding a "house rent" category based on listings from public websites and locality

3. Plans to include actual road conditions on the map (either by crowdsourcing or any other means)

4. Real time BWSSB and BMTC data.

5. Traffic data.

6. Visual design update (logo, branding, type etc)

7. Publish it and make it available for public audiences.