Contour Layer Example¶

This notebook demonstrates the DeckGL ContourLayer for visualizing density isolines from point data.

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

Basic Contour Layer¶

In [ ]:

import random
from anymap_ts import DeckGLMap


# Generate clustered points around San Francisco for density visualization
def generate_clustered_points(count=1000):
    clusters = [
        {"center": [-122.4194, 37.7749], "spread": 0.02, "weight": 1.5},  # Downtown SF
        {"center": [-122.2711, 37.8044], "spread": 0.015, "weight": 1.2},  # Oakland
        {"center": [-122.2727, 37.8716], "spread": 0.01, "weight": 1.0},  # Berkeley
        {
            "center": [-122.4098, 37.7855],
            "spread": 0.008,
            "weight": 2.0,
        },  # Union Square
    ]

    points = []
    for _ in range(count):
        cluster = random.choice(clusters)
        import math

        angle = random.random() * math.pi * 2
        radius = random.random() * cluster["spread"]
        lng = cluster["center"][0] + math.cos(angle) * radius
        lat = cluster["center"][1] + math.sin(angle) * radius
        points.append(
            {
                "coordinates": [lng, lat],
                "weight": random.random() * cluster["weight"] + 0.5,
            }
        )
    return points


points = generate_clustered_points()

# Basic contour thresholds
contours = [
    {"threshold": 1, "color": [255, 255, 178], "strokeWidth": 1},
    {"threshold": 5, "color": [254, 178, 76], "strokeWidth": 2},
    {"threshold": 10, "color": [240, 59, 32], "strokeWidth": 3},
]

m = DeckGLMap(center=[-122.35, 37.8], zoom=11)
m.add_basemap("CartoDB.DarkMatter")
m.add_contour_layer(
    data=points,
    name="contour-basic",
    get_position="coordinates",
    contours=contours,
    cell_size=200,
)
m

import random from anymap_ts import DeckGLMap # Generate clustered points around San Francisco for density visualization def generate_clustered_points(count=1000): clusters = [ {"center": [-122.4194, 37.7749], "spread": 0.02, "weight": 1.5}, # Downtown SF {"center": [-122.2711, 37.8044], "spread": 0.015, "weight": 1.2}, # Oakland {"center": [-122.2727, 37.8716], "spread": 0.01, "weight": 1.0}, # Berkeley { "center": [-122.4098, 37.7855], "spread": 0.008, "weight": 2.0, }, # Union Square ] points = [] for _ in range(count): cluster = random.choice(clusters) import math angle = random.random() * math.pi * 2 radius = random.random() * cluster["spread"] lng = cluster["center"][0] + math.cos(angle) * radius lat = cluster["center"][1] + math.sin(angle) * radius points.append( { "coordinates": [lng, lat], "weight": random.random() * cluster["weight"] + 0.5, } ) return points points = generate_clustered_points() # Basic contour thresholds contours = [ {"threshold": 1, "color": [255, 255, 178], "strokeWidth": 1}, {"threshold": 5, "color": [254, 178, 76], "strokeWidth": 2}, {"threshold": 10, "color": [240, 59, 32], "strokeWidth": 3}, ] m = DeckGLMap(center=[-122.35, 37.8], zoom=11) m.add_basemap("CartoDB.DarkMatter") m.add_contour_layer( data=points, name="contour-basic", get_position="coordinates", contours=contours, cell_size=200, ) m

Contour with Custom Thresholds and Colors¶

In [ ]:

# More detailed contour thresholds (yellow to red gradient)
detailed_contours = [
    {"threshold": 1, "color": [255, 255, 178], "strokeWidth": 1},
    {"threshold": 5, "color": [254, 217, 118], "strokeWidth": 1},
    {"threshold": 10, "color": [254, 178, 76], "strokeWidth": 2},
    {"threshold": 20, "color": [253, 141, 60], "strokeWidth": 2},
    {"threshold": 40, "color": [252, 78, 42], "strokeWidth": 3},
    {"threshold": 60, "color": [227, 26, 28], "strokeWidth": 3},
    {"threshold": 80, "color": [189, 0, 38], "strokeWidth": 4},
]

m2 = DeckGLMap(center=[-122.35, 37.8], zoom=11)
m2.add_basemap("CartoDB.DarkMatter")
m2.add_contour_layer(
    data=points,
    name="contour-detailed",
    get_position="coordinates",
    contours=detailed_contours,
    cell_size=200,
)
m2

# More detailed contour thresholds (yellow to red gradient) detailed_contours = [ {"threshold": 1, "color": [255, 255, 178], "strokeWidth": 1}, {"threshold": 5, "color": [254, 217, 118], "strokeWidth": 1}, {"threshold": 10, "color": [254, 178, 76], "strokeWidth": 2}, {"threshold": 20, "color": [253, 141, 60], "strokeWidth": 2}, {"threshold": 40, "color": [252, 78, 42], "strokeWidth": 3}, {"threshold": 60, "color": [227, 26, 28], "strokeWidth": 3}, {"threshold": 80, "color": [189, 0, 38], "strokeWidth": 4}, ] m2 = DeckGLMap(center=[-122.35, 37.8], zoom=11) m2.add_basemap("CartoDB.DarkMatter") m2.add_contour_layer( data=points, name="contour-detailed", get_position="coordinates", contours=detailed_contours, cell_size=200, ) m2

Contour with Weighted Data¶

In [ ]:

m3 = DeckGLMap(center=[-122.35, 37.8], zoom=11)
m3.add_basemap("CartoDB.DarkMatter")
m3.add_contour_layer(
    data=points,
    name="contour-weighted",
    get_position="coordinates",
    get_weight="weight",
    contours=detailed_contours,
    cell_size=200,
    aggregation="SUM",
)
m3

m3 = DeckGLMap(center=[-122.35, 37.8], zoom=11) m3.add_basemap("CartoDB.DarkMatter") m3.add_contour_layer( data=points, name="contour-weighted", get_position="coordinates", get_weight="weight", contours=detailed_contours, cell_size=200, aggregation="SUM", ) m3

Contour Layer with Layer Control¶

In [ ]:

# Blue contours for comparison
blue_contours = [
    {"threshold": 1, "color": [200, 220, 255], "strokeWidth": 1},
    {"threshold": 5, "color": [150, 180, 255], "strokeWidth": 1},
    {"threshold": 10, "color": [100, 140, 255], "strokeWidth": 2},
    {"threshold": 20, "color": [50, 100, 255], "strokeWidth": 2},
    {"threshold": 40, "color": [0, 60, 200], "strokeWidth": 3},
]

m4 = DeckGLMap(center=[-122.35, 37.8], zoom=11)
m4.add_basemap("CartoDB.DarkMatter")

m4.add_contour_layer(
    data=points,
    name="contour-heat",
    get_position="coordinates",
    get_weight="weight",
    contours=detailed_contours,
    cell_size=200,
)

m4.add_contour_layer(
    data=points,
    name="contour-cool",
    get_position="coordinates",
    get_weight="weight",
    contours=blue_contours,
    cell_size=300,
    visible=False,
)

m4.add_layer_control()
m4

# Blue contours for comparison blue_contours = [ {"threshold": 1, "color": [200, 220, 255], "strokeWidth": 1}, {"threshold": 5, "color": [150, 180, 255], "strokeWidth": 1}, {"threshold": 10, "color": [100, 140, 255], "strokeWidth": 2}, {"threshold": 20, "color": [50, 100, 255], "strokeWidth": 2}, {"threshold": 40, "color": [0, 60, 200], "strokeWidth": 3}, ] m4 = DeckGLMap(center=[-122.35, 37.8], zoom=11) m4.add_basemap("CartoDB.DarkMatter") m4.add_contour_layer( data=points, name="contour-heat", get_position="coordinates", get_weight="weight", contours=detailed_contours, cell_size=200, ) m4.add_contour_layer( data=points, name="contour-cool", get_position="coordinates", get_weight="weight", contours=blue_contours, cell_size=300, visible=False, ) m4.add_layer_control() m4

Using the Generic add_deckgl_layer Method¶

In [ ]:

m5 = DeckGLMap(center=[-122.35, 37.8], zoom=11)
m5.add_basemap("CartoDB.DarkMatter")

m5.add_deckgl_layer(
    layer_type="ContourLayer",
    data=points,
    name="contour-generic",
    getPosition="coordinates",
    getWeight="weight",
    contours=detailed_contours,
    cellSize=200,
    aggregation="SUM",
    pickable=True,
)
m5

m5 = DeckGLMap(center=[-122.35, 37.8], zoom=11) m5.add_basemap("CartoDB.DarkMatter") m5.add_deckgl_layer( layer_type="ContourLayer", data=points, name="contour-generic", getPosition="coordinates", getWeight="weight", contours=detailed_contours, cellSize=200, aggregation="SUM", pickable=True, ) m5

Export to HTML¶

In [ ]:

m2.to_html("contour_layer_example.html")

m2.to_html("contour_layer_example.html")