app.py

import colorcet as cc
import geopandas as gpd
import param

from lonboard import Map, PathLayer
from lonboard.colormap import apply_continuous_cmap
from lonboard._viewport import compute_view
from palettable.palette import Palette

import panel as pn

pn.extension("ipywidgets")

url = "https://naciscdn.org/naturalearth/10m/cultural/ne_10m_roads_north_america.zip"

@pn.cache
def get_data():
    return gpd.read_file(filename=url, engine="pyogrio")

gdf = get_data()
state_options = sorted(state for state in gdf["state"].unique() if state)

description = """# Lonboard

A Python library for **fast, interactive geospatial vector data visualization** in Jupyter (and Panel).

By utilizing new technologies like `GeoArrow` and `GeoParquet` in conjunction with GPU-based map rendering, Lonboard aims to enable visualizing large geospatial datasets interactively through a simple interface."""

logo = pn.pane.Image(
    "https://github.com/developmentseed/lonboard/raw/main/assets/dalle-lonboard.jpg"
)

def to_rgb(hex: str) -> list:
    h = hex.strip("#")
    return list(int(h[i : i + 2], 16) for i in (0, 2, 4))

def to_palette(cmap) -> Palette:
    """Returns the ColorCet colormap as a palettable Palette"""
    colors = [to_rgb(item) for item in cmap]
    return Palette(name="colorcet", map_type="colorcet", colors=colors)

class StateViewer(pn.viewable.Viewer):
    value: Map = param.ClassSelector(class_=Map, doc="The map object", constant=True)
    state: str = param.Selector(default="California", objects=state_options)
    cmap: str = param.Selector(default=cc.fire, objects=cc.palette, label="cmap by Colorcet")
    alpha: float = param.Number(default=0.8, bounds=(0, 1))

    data = param.DataFrame()

    def __init__(self, **params):
        params["value"] = params.get("value", Map(layers=[], view_state={"longitude": -119.81446785010868, "latitude": 36.08305565437565, "zoom": 5}))

        super().__init__(**params)

        self.value.layout.width=self.value.layout.height="100%"

        self.description = pn.Column(pn.pane.Markdown(description, margin=5), logo)
        self.settings = pn.Column(
            pn.widgets.Select.from_param(self.param.state, sizing_mode="stretch_width"),
            pn.widgets.ColorMap.from_param(
                self.param.cmap,
                ncols=3,
                swatch_width=100,
                name="cmap by Colorcet",
                sizing_mode="stretch_width",
            ),
            pn.widgets.FloatSlider.from_param(
                self.param.alpha, sizing_mode="stretch_width"
            ),
            margin=5,
            sizing_mode="fixed",
            width=300,
        )
        self.view = pn.Column(
            self._title, pn.pane.IPyWidget(self.value, sizing_mode="stretch_both")
        )
        self._layout = pn.Row(
            pn.Column(self.settings, sizing_mode="fixed", width=300),
            self.view,
            sizing_mode="stretch_both",
        )

    def __panel__(self):
        return self._layout

    @param.depends("state", watch=True, on_init=True)
    def _update_data(self):
        self.data = gdf[gdf["state"] == self.state]

    def _get_color(self):
        palette = to_palette(self.cmap)
        normalized_scale_rank = (self.data["scalerank"] - 3) / 9
        return apply_continuous_cmap(normalized_scale_rank, palette, alpha=self.alpha)

    @param.depends("data", watch=True)
    def _update_value(self):
        layer = PathLayer.from_geopandas(self.data, width_min_pixels=0.8)
        layer.get_color = self._get_color()
        self.value.layers = [layer]
        self._fly_to_center()

    def _fly_to_center(self):
        computed_view_state = compute_view(self.value.layers)
        self.value.fly_to(
            **computed_view_state,
            duration=1000,
        )

    @param.depends("cmap", "alpha", watch=True)
    def _update_layer_get_color(self):
        self.value.layers[0].get_color = self._get_color()

    @param.depends("state")
    def _title(self):
        return f"# North America Roads: {self.state}"

viewer = StateViewer()
pn.template.FastListTemplate(
    logo="https://panel.holoviz.org/_static/logo_horizontal_dark_theme.png",
    title="Works with Lonboard",
    sidebar=[viewer.description, viewer.settings],
    main=[viewer.view],
    main_layout=None,
).servable()