Widgets

Source

"""
Widgets
=======

Demonstrates deck.gl UI widgets in pydeck.

This example shows several built-in widgets for map navigation and interaction:
- ZoomWidget and CompassWidget for camera control
- FullscreenWidget and ScreenshotWidget for utility
- ScaleWidget for displaying map scale
- StatsWidget for rendering performance stats
- PopupWidget for anchored geographic popups
- InfoWidget for hover/click-activated feature popups
"""

import pydeck as pdk

# Data sources
COUNTRIES = "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_scale_rank.geojson"
AIR_PORTS = "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson"

# Initial view centered on London
view_state = pdk.ViewState(latitude=51.47, longitude=0.45, zoom=4, bearing=0, pitch=30)

# Layers
countries_layer = pdk.Layer(
    "GeoJsonLayer",
    id="base-map",
    data=COUNTRIES,
    stroked=True,
    filled=True,
    line_width_min_pixels=2,
    opacity=0.4,
    get_line_color=[60, 60, 60],
    get_fill_color=[200, 200, 200],
)

airports_layer = pdk.Layer(
    "GeoJsonLayer",
    id="airports",
    data=AIR_PORTS,
    filled=True,
    point_radius_min_pixels=2,
    point_radius_scale=2000,
    get_point_radius="11 - properties.scalerank",
    get_fill_color=[200, 0, 80, 180],
    pickable=True,
    auto_highlight=True,
)

# Widgets for map navigation and interaction
widgets = [
    pdk.Widget("ZoomWidget"),
    pdk.Widget("CompassWidget"),
    pdk.Widget("FullscreenWidget"),
    pdk.Widget("ScreenshotWidget"),
    pdk.Widget("ScaleWidget", placement="bottom-right"),
    pdk.Widget("StatsWidget", statsType="luma", placement="bottom-left"),
    # PopupWidget: static popup anchored to a geographic coordinate.
    # content accepts a string (plain text) or a dict with "text", "html", or "element".
    pdk.Widget(
        "PopupWidget",
        position=[-0.4543, 51.4775],  # Heathrow Airport, London
        content={"html": "<strong>Heathrow Airport</strong><br/>London, United Kingdom"},
        placement="right",
    ),
    # InfoWidget: popup triggered by hovering over pickable features.
    # getTooltip uses the @@= expression syntax from @deck.gl/json to access feature properties.
    pdk.Widget("InfoWidget", mode="hover", getTooltip="@@=object && object.properties && object.properties.name"),
]

deck = pdk.Deck(
    layers=[countries_layer, airports_layer],
    initial_view_state=view_state,
    widgets=widgets,
    tooltip=False,
)

deck.to_html("widgets.html")