H3 Hexagon Layer Example¶

Visualize data using Uber's H3 spatial indexing system.

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

In [ ]:

from anymap_ts import DeckGLMap

from anymap_ts import DeckGLMap

Sample H3 data¶

In [ ]:

# Sample H3 hexagon data around San Francisco (resolution 7)
h3_data = [
    {"hexagon": "872830828ffffff", "value": 100},
    {"hexagon": "87283082affffff", "value": 200},
    {"hexagon": "87283082bffffff", "value": 150},
    {"hexagon": "872830829ffffff", "value": 300},
    {"hexagon": "87283095affffff", "value": 250},
    {"hexagon": "87283095bffffff", "value": 180},
    {"hexagon": "872830958ffffff", "value": 220},
    {"hexagon": "872830959ffffff", "value": 270},
    {"hexagon": "8728309caffffff", "value": 190},
    {"hexagon": "8728309cbffffff", "value": 240},
    {"hexagon": "8728309c8ffffff", "value": 160},
    {"hexagon": "8728309c9ffffff", "value": 310},
]

# Sample H3 hexagon data around San Francisco (resolution 7) h3_data = [ {"hexagon": "872830828ffffff", "value": 100}, {"hexagon": "87283082affffff", "value": 200}, {"hexagon": "87283082bffffff", "value": 150}, {"hexagon": "872830829ffffff", "value": 300}, {"hexagon": "87283095affffff", "value": 250}, {"hexagon": "87283095bffffff", "value": 180}, {"hexagon": "872830958ffffff", "value": 220}, {"hexagon": "872830959ffffff", "value": 270}, {"hexagon": "8728309caffffff", "value": 190}, {"hexagon": "8728309cbffffff", "value": 240}, {"hexagon": "8728309c8ffffff", "value": 160}, {"hexagon": "8728309c9ffffff", "value": 310}, ]

Create map with H3 hexagon layer¶

In [ ]:

m = DeckGLMap(center=[-122.4, 37.75], zoom=10, pitch=45)
m.add_basemap("CartoDB.DarkMatter")

m.add_h3_hexagon_layer(
    data=h3_data,
    get_hexagon="hexagon",
    get_fill_color=[51, 136, 255, 128],
    get_line_color=[255, 255, 255, 100],
    get_elevation="value",
    extruded=True,
    elevation_scale=20,
    opacity=0.8,
)
m

m = DeckGLMap(center=[-122.4, 37.75], zoom=10, pitch=45) m.add_basemap("CartoDB.DarkMatter") m.add_h3_hexagon_layer( data=h3_data, get_hexagon="hexagon", get_fill_color=[51, 136, 255, 128], get_line_color=[255, 255, 255, 100], get_elevation="value", extruded=True, elevation_scale=20, opacity=0.8, ) m

Export to HTML¶

In [ ]:

m.to_html("h3_hexagon_layer_example.html")

m.to_html("h3_hexagon_layer_example.html")