Quadkey Layer Example¶

Bing Maps quadkey tile indexing visualization using deck.gl QuadkeyLayer.

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

In [ ]:

from anymap_ts import DeckGLMap

from anymap_ts import DeckGLMap

Define quadkey data¶

In [ ]:

# Sample quadkey data (around San Francisco area)
quadkey_data = [
    {"quadkey": "0230102", "value": 150},
    {"quadkey": "0230103", "value": 200},
    {"quadkey": "0230110", "value": 180},
    {"quadkey": "0230111", "value": 250},
    {"quadkey": "0230120", "value": 300},
    {"quadkey": "0230121", "value": 220},
    {"quadkey": "0230122", "value": 190},
    {"quadkey": "0230123", "value": 280},
]

# Sample quadkey data (around San Francisco area) quadkey_data = [ {"quadkey": "0230102", "value": 150}, {"quadkey": "0230103", "value": 200}, {"quadkey": "0230110", "value": 180}, {"quadkey": "0230111", "value": 250}, {"quadkey": "0230120", "value": 300}, {"quadkey": "0230121", "value": 220}, {"quadkey": "0230122", "value": 190}, {"quadkey": "0230123", "value": 280}, ]

Create map with quadkey layer¶

In [ ]:

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

m.add_quadkey_layer(
    data=quadkey_data,
    get_quadkey="quadkey",
    get_fill_color=[255, 140, 0, 180],
    get_elevation="value",
    extruded=True,
    elevation_scale=50,
    pickable=True,
)
m

m = DeckGLMap(center=[-122.4, 37.75], zoom=6, pitch=45) m.add_basemap("CartoDB.DarkMatter") m.add_quadkey_layer( data=quadkey_data, get_quadkey="quadkey", get_fill_color=[255, 140, 0, 180], get_elevation="value", extruded=True, elevation_scale=50, pickable=True, ) m

Export to HTML¶

In [ ]:

m.to_html("quadkey_layer_example.html")

m.to_html("quadkey_layer_example.html")