Heatmap Visualization¶

This notebook demonstrates heatmap visualization using the Leaflet backend with the leaflet.heat plugin.

Heatmaps are useful for visualizing point density and intensity distributions.

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

In [ ]:

import random
from anymap_ts import LeafletMap

import random from anymap_ts import LeafletMap

Basic heatmap from coordinate data¶

Generate random points around San Francisco and create a heatmap. Each point is [lng, lat, intensity].

In [ ]:

random.seed(42)
sf_center = [-122.4194, 37.7749]

heat_data = []
for _ in range(500):
    lng = sf_center[0] + random.gauss(0, 0.02)
    lat = sf_center[1] + random.gauss(0, 0.015)
    intensity = random.uniform(0.3, 1.0)
    heat_data.append([lng, lat, intensity])

m = LeafletMap(center=sf_center, zoom=12, controls={})
m.add_basemap("CartoDB.DarkMatter")

m.add_heatmap(
    heat_data,
    name="sf-heatmap",
    radius=20,
    blur=15,
    max_val=1.0,
)

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

random.seed(42) sf_center = [-122.4194, 37.7749] heat_data = [] for _ in range(500): lng = sf_center[0] + random.gauss(0, 0.02) lat = sf_center[1] + random.gauss(0, 0.015) intensity = random.uniform(0.3, 1.0) heat_data.append([lng, lat, intensity]) m = LeafletMap(center=sf_center, zoom=12, controls={}) m.add_basemap("CartoDB.DarkMatter") m.add_heatmap( heat_data, name="sf-heatmap", radius=20, blur=15, max_val=1.0, ) m.add_control("zoom", position="topleft") m

Heatmap with custom gradient¶

Customize the color gradient to change the appearance.

In [ ]:

m2 = LeafletMap(center=sf_center, zoom=12, controls={})
m2.add_basemap("CartoDB.Positron")

m2.add_heatmap(
    heat_data,
    name="custom-gradient",
    radius=25,
    blur=20,
    gradient={
        0.2: "#ffffb2",
        0.4: "#fd8d3c",
        0.6: "#f03b20",
        0.8: "#bd0026",
        1.0: "#4a0012",
    },
)

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

m2 = LeafletMap(center=sf_center, zoom=12, controls={}) m2.add_basemap("CartoDB.Positron") m2.add_heatmap( heat_data, name="custom-gradient", radius=25, blur=20, gradient={ 0.2: "#ffffb2", 0.4: "#fd8d3c", 0.6: "#f03b20", 0.8: "#bd0026", 1.0: "#4a0012", }, ) m2.add_control("zoom", position="topleft") m2

Heatmap from GeoJSON¶

You can also create a heatmap from a GeoJSON FeatureCollection of Point features.

In [ ]:

geojson_points = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [pt[0], pt[1]]},
            "properties": {"intensity": pt[2]},
        }
        for pt in heat_data[:200]
    ],
}

m3 = LeafletMap(center=sf_center, zoom=12, controls={})
m3.add_basemap("OpenStreetMap")

m3.add_heatmap(
    geojson_points,
    name="geojson-heatmap",
    value_column="intensity",
    radius=30,
    blur=20,
)

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

geojson_points = { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [pt[0], pt[1]]}, "properties": {"intensity": pt[2]}, } for pt in heat_data[:200] ], } m3 = LeafletMap(center=sf_center, zoom=12, controls={}) m3.add_basemap("OpenStreetMap") m3.add_heatmap( geojson_points, name="geojson-heatmap", value_column="intensity", radius=30, blur=20, ) m3.add_control("zoom", position="topleft") m3