Polygon Layer Example¶

This notebook demonstrates the DeckGL PolygonLayer for rendering filled and stroked polygons with 3D extrusion support.

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

Basic Polygon Layer (Flat)¶

In [ ]:

from anymap_ts import DeckGLMap

# San Francisco districts
districts = [
    {
        "polygon": [
            [-122.405, 37.795],
            [-122.395, 37.795],
            [-122.395, 37.785],
            [-122.405, 37.785],
            [-122.405, 37.795],
        ],
        "name": "Financial District",
        "elevation": 500,
    },
    {
        "polygon": [
            [-122.415, 37.785],
            [-122.395, 37.785],
            [-122.395, 37.770],
            [-122.415, 37.770],
            [-122.415, 37.785],
        ],
        "name": "SoMa",
        "elevation": 400,
    },
    {
        "polygon": [
            [-122.425, 37.770],
            [-122.405, 37.770],
            [-122.405, 37.750],
            [-122.425, 37.750],
            [-122.425, 37.770],
        ],
        "name": "Mission District",
        "elevation": 350,
    },
    {
        "polygon": [
            [-122.410, 37.798],
            [-122.403, 37.798],
            [-122.403, 37.792],
            [-122.410, 37.792],
            [-122.410, 37.798],
        ],
        "name": "Chinatown",
        "elevation": 300,
    },
]

m = DeckGLMap(center=[-122.41, 37.78], zoom=13)
m.add_basemap("CartoDB.DarkMatter")
m.add_polygon_layer(
    data=districts,
    name="polygon-basic",
    get_polygon="polygon",
    get_fill_color=[100, 150, 255, 150],
    get_line_color=[255, 255, 255, 200],
    line_width_min_pixels=2,
)
m

from anymap_ts import DeckGLMap # San Francisco districts districts = [ { "polygon": [ [-122.405, 37.795], [-122.395, 37.795], [-122.395, 37.785], [-122.405, 37.785], [-122.405, 37.795], ], "name": "Financial District", "elevation": 500, }, { "polygon": [ [-122.415, 37.785], [-122.395, 37.785], [-122.395, 37.770], [-122.415, 37.770], [-122.415, 37.785], ], "name": "SoMa", "elevation": 400, }, { "polygon": [ [-122.425, 37.770], [-122.405, 37.770], [-122.405, 37.750], [-122.425, 37.750], [-122.425, 37.770], ], "name": "Mission District", "elevation": 350, }, { "polygon": [ [-122.410, 37.798], [-122.403, 37.798], [-122.403, 37.792], [-122.410, 37.792], [-122.410, 37.798], ], "name": "Chinatown", "elevation": 300, }, ] m = DeckGLMap(center=[-122.41, 37.78], zoom=13) m.add_basemap("CartoDB.DarkMatter") m.add_polygon_layer( data=districts, name="polygon-basic", get_polygon="polygon", get_fill_color=[100, 150, 255, 150], get_line_color=[255, 255, 255, 200], line_width_min_pixels=2, ) m

Extruded 3D Polygons¶

In [ ]:

m2 = DeckGLMap(center=[-122.41, 37.78], zoom=13, pitch=45, bearing=-17)
m2.add_basemap("CartoDB.DarkMatter")
m2.add_polygon_layer(
    data=districts,
    name="polygon-3d",
    get_polygon="polygon",
    get_fill_color=[255, 100, 100, 180],
    get_line_color=[255, 255, 255, 255],
    extruded=True,
    get_elevation="elevation",
    line_width_min_pixels=2,
)
m2

m2 = DeckGLMap(center=[-122.41, 37.78], zoom=13, pitch=45, bearing=-17) m2.add_basemap("CartoDB.DarkMatter") m2.add_polygon_layer( data=districts, name="polygon-3d", get_polygon="polygon", get_fill_color=[255, 100, 100, 180], get_line_color=[255, 255, 255, 255], extruded=True, get_elevation="elevation", line_width_min_pixels=2, ) m2

Multiple Polygon Layers with Layer Control¶

In [ ]:

# Additional districts
other_districts = [
    {
        "polygon": [
            [-122.445, 37.805],
            [-122.425, 37.805],
            [-122.425, 37.798],
            [-122.445, 37.798],
            [-122.445, 37.805],
        ],
        "name": "Marina",
        "elevation": 200,
    },
    {
        "polygon": [
            [-122.440, 37.765],
            [-122.425, 37.765],
            [-122.425, 37.755],
            [-122.440, 37.755],
            [-122.440, 37.765],
        ],
        "name": "Castro",
        "elevation": 300,
    },
]

m3 = DeckGLMap(center=[-122.42, 37.78], zoom=12, pitch=45, bearing=-17)
m3.add_basemap("CartoDB.DarkMatter")

m3.add_polygon_layer(
    data=districts,
    name="polygon-downtown",
    get_polygon="polygon",
    get_fill_color=[255, 100, 100, 180],
    extruded=True,
    get_elevation="elevation",
)

m3.add_polygon_layer(
    data=other_districts,
    name="polygon-neighborhoods",
    get_polygon="polygon",
    get_fill_color=[100, 200, 255, 180],
    extruded=True,
    get_elevation="elevation",
)

m3.add_layer_control()
m3

# Additional districts other_districts = [ { "polygon": [ [-122.445, 37.805], [-122.425, 37.805], [-122.425, 37.798], [-122.445, 37.798], [-122.445, 37.805], ], "name": "Marina", "elevation": 200, }, { "polygon": [ [-122.440, 37.765], [-122.425, 37.765], [-122.425, 37.755], [-122.440, 37.755], [-122.440, 37.765], ], "name": "Castro", "elevation": 300, }, ] m3 = DeckGLMap(center=[-122.42, 37.78], zoom=12, pitch=45, bearing=-17) m3.add_basemap("CartoDB.DarkMatter") m3.add_polygon_layer( data=districts, name="polygon-downtown", get_polygon="polygon", get_fill_color=[255, 100, 100, 180], extruded=True, get_elevation="elevation", ) m3.add_polygon_layer( data=other_districts, name="polygon-neighborhoods", get_polygon="polygon", get_fill_color=[100, 200, 255, 180], extruded=True, get_elevation="elevation", ) m3.add_layer_control() m3

Using the Generic add_deckgl_layer Method¶

In [ ]:

m4 = DeckGLMap(center=[-122.41, 37.78], zoom=13, pitch=45)
m4.add_basemap("CartoDB.DarkMatter")

m4.add_deckgl_layer(
    layer_type="PolygonLayer",
    data=districts,
    name="polygon-generic",
    getPolygon="polygon",
    getFillColor=[100, 255, 150, 180],
    getLineColor=[255, 255, 255, 255],
    extruded=True,
    getElevation="elevation",
    lineWidthMinPixels=2,
    pickable=True,
)
m4

m4 = DeckGLMap(center=[-122.41, 37.78], zoom=13, pitch=45) m4.add_basemap("CartoDB.DarkMatter") m4.add_deckgl_layer( layer_type="PolygonLayer", data=districts, name="polygon-generic", getPolygon="polygon", getFillColor=[100, 255, 150, 180], getLineColor=[255, 255, 255, 255], extruded=True, getElevation="elevation", lineWidthMinPixels=2, pickable=True, ) m4

Export to HTML¶

In [ ]:

m2.to_html("polygon_layer_example.html")

m2.to_html("polygon_layer_example.html")