Interactive Choropleth Map¶

This notebook demonstrates how to create an interactive choropleth map using the Leaflet backend, inspired by the Leaflet Choropleth Tutorial.

Features include:

• Data-driven color styling based on a numeric property
• Automatic or custom color thresholds
• Hover highlighting
• Popups and tooltips showing properties
• Automatic legend generation

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

In [ ]:

import json
import urllib.request
from anymap_ts import LeafletMap

import json import urllib.request from anymap_ts import LeafletMap

Load US States GeoJSON data¶

We'll use US state boundaries with population density data.

In [ ]:

url = "https://raw.githubusercontent.com/python-visualization/folium-example-data/main/us_states.json"
with urllib.request.urlopen(url) as response:
    us_states = json.loads(response.read().decode())

print(f"Loaded {len(us_states['features'])} states")
print("Properties:", list(us_states["features"][0]["properties"].keys()))

url = "https://raw.githubusercontent.com/python-visualization/folium-example-data/main/us_states.json" with urllib.request.urlopen(url) as response: us_states = json.loads(response.read().decode()) print(f"Loaded {len(us_states['features'])} states") print("Properties:", list(us_states["features"][0]["properties"].keys()))

Create a choropleth with automatic thresholds¶

The add_choropleth method automatically computes equal-interval breakpoints from the data. Hover over states to see them highlight; click for popups.

In [ ]:

m = LeafletMap(center=[-98.5, 38.5], zoom=4, controls={})
m.add_basemap("CartoDB.Positron")

m.add_choropleth(
    us_states,
    value_column="density",
    name="us-density",
    fill_opacity=0.7,
    line_color="#ffffff",
    line_weight=2,
    popup_properties=["name", "density"],
    tooltip_property="name",
    legend_title="Population Density",
    legend_position="bottomright",
)

m.add_control("zoom", position="topleft")
m

m = LeafletMap(center=[-98.5, 38.5], zoom=4, controls={}) m.add_basemap("CartoDB.Positron") m.add_choropleth( us_states, value_column="density", name="us-density", fill_opacity=0.7, line_color="#ffffff", line_weight=2, popup_properties=["name", "density"], tooltip_property="name", legend_title="Population Density", legend_position="bottomright", ) m.add_control("zoom", position="topleft") m

Choropleth with custom thresholds and colors¶

You can also specify custom thresholds and color palette.

In [ ]:

m2 = LeafletMap(center=[-98.5, 38.5], zoom=4, controls={})
m2.add_basemap("CartoDB.DarkMatter")

m2.add_choropleth(
    us_states,
    value_column="density",
    name="custom-choropleth",
    colors=[
        "#FFEDA0",
        "#FED976",
        "#FEB24C",
        "#FD8D3C",
        "#FC4E2A",
        "#E31A1C",
        "#BD0026",
        "#800026",
    ],
    thresholds=[10, 20, 50, 100, 200, 500, 1000],
    fill_opacity=0.8,
    line_color="#666666",
    line_weight=1,
    popup_properties=True,
    tooltip_property="name",
    legend_title="Density (per sq mi)",
)

m2.add_control("zoom", position="topleft")
m2

m2 = LeafletMap(center=[-98.5, 38.5], zoom=4, controls={}) m2.add_basemap("CartoDB.DarkMatter") m2.add_choropleth( us_states, value_column="density", name="custom-choropleth", colors=[ "#FFEDA0", "#FED976", "#FEB24C", "#FD8D3C", "#FC4E2A", "#E31A1C", "#BD0026", "#800026", ], thresholds=[10, 20, 50, 100, 200, 500, 1000], fill_opacity=0.8, line_color="#666666", line_weight=1, popup_properties=True, tooltip_property="name", legend_title="Density (per sq mi)", ) m2.add_control("zoom", position="topleft") m2