Copyable map recipes

Start with one working interaction

Find a working recipe by goal, then open it to inspect the plain HTML, CSS, and JavaScript behind it. Every demo includes a collapsed copy-ready starter near the bottom of the page.

The example datasets are intentionally synthetic and clearly labeled. Replace them with documented data before publishing a real map.

Search examples

Showing all 22 examples

Choropleth

Join a CSV by stable slug, calculate a numeric scale, and keep hover and selection legible.

Run example → 02

Drill down

Move from the national layer into any state or union territory's district layer.

Run example → 03

Markers

Add keyboard-accessible SVG markers anchored to region centroids and sized by a value.

Run example → 04

Embedded map

Configure an iframe preview, preserve a selected region, and copy deployment-ready markup.

Run example → 05

CSV district data

Import a CSV, match stable district identifiers, switch numeric or categorical colors, and inspect joined profile fields.

Run example → 06

POI layers

Project real coordinates for reservoirs, protected wildlife areas, and major stations with toggles, search, symbols, and details.

Run example → 07

Marker clustering

Merge nearby coordinate points into readable, keyboard-accessible clusters with an adjustable distance.

Run example → 08

Heatmap

Turn overlapping point data into a lightweight SVG density surface with category and radius controls.

Run example → 09

Route network

Connect sourced station coordinates with selectable curved corridors and independent network layers.

Run example → 10

Time-series map

Scrub or play through synthetic yearly values while keeping hover, focus, and color transitions in sync.

Run example → 11

Comparison maps

Place matching regional scenarios side by side for election-style leader and margin comparisons.

Run example → 12

Custom marker icons

Upload, sanitize, resize, and preview a reusable SVG icon across real coordinate markers.

Run example → 13

India location finder

Search published states, districts, and tehsils by name, code, slug, or stable identifier with typo-tolerant matching.

Run example → 14

Nearby places

Drop a search origin, change its radius, filter useful-place categories, and rank sourced points by geodesic distance.

Run example → 15

Draw and select regions

Select districts by click, rectangle, or freehand lasso, then export their codes and stable identifiers.

Run example → 16

Service area and coverage

Place service centres, adjust illustrative reach, inspect overlaps and uncovered districts, and export assignments.

Run example → 17

Alerts and incidents

Filter a synthetic incident feed, inspect district severity, acknowledge or resolve alerts, and export the visible queue.

Run example → 18

State and district rankings

Switch indicators and geography levels while the ranked list, map colors, filters, and summary statistics update together.

Run example → 19

Editable annotations

Add, drag, edit, remove, locally save, export, and import categorized notes on any public district layer.

Run example → 20

Story map

Guide readers through state and district chapters with synchronized narrative images, descriptions, and highlighted locations.

Run example → 21

Printable map report

Select districts, customize report text, print a clean layout, or export the same map report as SVG and PNG.

Run example → 22

Postal PIN explorer

Search an official India Post directory sample, inspect office details, and highlight the containing administrative district.

Run example →