Mumbai Wellness Map

An interactive map of places, routes, clinics, kitchens and communities for looking after yourself in Mumbai, built as an Astro site. Built by the marketing team at Plum.

It is a copy of the Bengaluru Wellness Map, with the city swapped. Most of this README was written for Bengaluru and still describes the code accurately; where it names Bengaluru's data, read Mumbai's.

Mumbai: what changed, what is still to do

Changed

• City outline: the BMC area, which OpenStreetMap has as Mumbai City District (relation 7964376) plus Mumbai Suburban District (7964375). The outline is the two joined along their shared border.
• "Corporations" are BMC's six zones (OSM relations 7888964–7888969). The code still calls them corporations. Keys, names and colours are in src/data/corporations.json: South (Zone 1, South Mumbai), Central (Zone 2), West (Zone 3, Bandra–Andheri), NorthWest (Zone 4, Goregaon–Dahisar), East (Zone 5, Kurla–Chembur–Govandi), NorthEast (Zone 6, Ghatkopar–Bhandup–Mulund). Use these keys in an entry's rg.
• Navi Mumbai (Navi Mumbai Municipal Corporation, OSM relation 13180880) is the seventh zone, key NaviMumbai, across Thane Creek. Kharghar, Panvel and Ulwe are Panvel Municipal Corporation and are not on the map. The OSM areas every build script uses are in scripts/city.mjs.
• Thane (Thane Municipal Corporation, OSM relation 7120000: Thane city, Ghodbunder Road, Kalwa, Mumbra, Diva) is the eighth zone, key Thane.
• Mira-Bhayandar (Mira-Bhayandar Municipal Corporation, OSM relation 13180677: Mira Road, Bhayandar, Kashimira, Uttan) is the ninth zone, key MiraBhayandar.
• Wards are BMC's 24 administrative wards (A Ward … T Ward), each labelled with the neighbourhoods it is known by.
• Metro: the running Mumbai Metro lines and stations from OSM.
• Parks: Mumbai's public parks, gardens and maidans from OSM (node scripts/osm-parks.mjs), in place of Bengaluru's BBMP register. Named ones of 500 m² or more; society gardens, school grounds, clubs and generic names ("park 1") are left out. Fix a wrong one in OSM and rerun.
• Green roads: rebuilt over Mumbai's parks and forests.
• All the on-page text says Mumbai.
• The logos say "Be well, Mumbai" (public/be-well-logo*.svg). "Be Well," is the original hand lettering. "Mumbai" is set in Kalam Bold (Indian Type Foundry, SIL Open Font License) in the long and short logos, and in Grenette Pro with the original's letter spacing in the plain one, both converted to outlines. A hand-lettered "Mumbai" from the designer would match the brush strokes better.

Cleared, waiting for Mumbai data

• Places (sources/entries/healthmap_v8_recategorised.csv, header only)
• Routes (sources/routes/*.csv, header only)
• Communities (src/data/community-categories.json), themed days (src/data/themed-days.json), map ornaments (src/data/ambient.json)

Kept as they were

• Plum Perks partner brands and the online Plum events, which are not tied to a city. One perk, Praan Health, is listed at Koramangala.
• All the other artwork, which is still Bengaluru's as a placeholder: the hero, the stamp, the vignettes, the 404 map and the share image og-be-well-bengaluru-3.jpg. Their alt text still says Bengaluru because it describes the images. Change both together.
• The Plum HQ pin is hidden, since it is in Bengaluru (PLUM_HQ in src/scripts/wellness-map.js).
• The disclaimers still name the courts at Bengaluru, since that is Plum's legal seat and not the map's city.

What it is

The map fills the window. Everything else — the search, the filters, the count and the list — sits in one rounded card floating over it on the left, clear of every edge, with the filters and the result count pinned to the top of the card while the list scrolls underneath. The map is drawn from OpenStreetMap data in its own palette, after a transit poster: the whole city is one flat lavender ground with blocks a shade deeper (or, with Corporation colours on, each of the five Greater Bengaluru Authority city corporations in its own hue), roads are chunky, rounded where they meet, and inside the city a deeper, pinker tone of the ground they cross (cream outside it), water is periwinkle, and past the city limits everything but the roads is dark plum. Streets and names only appear close in.

Filtering is done with the pins themselves rather than with words: a row of category glyphs, each carrying its category's colour as a dot, and under it the sub-category glyphs — the exact icons the pins on the map are drawn with. What each one means is in its tooltip. That is the same pair of cues a pin gives you: colour for the category, glyph for the sub-category.

This is the beginning of the README. Read the rest at the original. Read the full README ↗