Building Interactive Dashboards with Voilà and Solara

27. Building Interactive Dashboards with Voilà and Solara#

27.1. Introduction#

27.2. Learning Objectives#

27.3. Installing Voilà and Solara#

# %pip install voila solara pygis

import voila
import solara

27.4. Introduction to Hugging Face Spaces#

27.4.1. Installing the Hugging Face CLI#

# %pip install -U "huggingface_hub[cli]"

27.4.2. Logging in to Hugging Face#

huggingface-cli login

27.5. Creating a Basic Voilà Application#

27.5.1. Creating a new Hugging Face Space#

27.5.2. Embedding the Hugging Face Space in Your Website#

27.5.3. Running the Voilà Application#

import leafmap.maplibregl as leafmap

m = leafmap.Map(
    style="liberty", projection="globe", sidebar_visible=True, height="750px"
)
m.add_basemap("USGS.Imagery")
cities = (
    "https://github.com/opengeos/datasets/releases/download/world/world_cities.geojson"
)
m.add_geojson(cities, name="Cities")
m

27.5.4. Exploring the File Structure of the Space#

27.5.5. Updating the Hugging Face Space#

27.5.5.1. Updating the Space from the Hugging Face Website#

27.5.5.2. Updating the Space from the Command Line#

git clone https://huggingface.co/spaces/YOUR-USERNAME/leafmap-voila
cd leafmap-voila

voila notebooks/

voila notebooks/ --strip_sources=False

27.6. Creating an Advanced Web Application with Solara#

27.6.1. Understanding Solara#

27.6.2. Using a Leafmap Template for Solara#

27.6.3. Exploring the File Structure of the Solara Web App#

27.6.4. Introduction to Solara Components#

import solara
import leafmap.maplibregl as leafmap


def create_map():

    m = leafmap.Map(
        style="liberty",
        projection="globe",
        height="750px",
        zoom=2.5,
        sidebar_visible=True,
    )
    return m


@solara.component
def Page():
    m = create_map()
    return m.to_solara()


Page()

27.6.5. Creating a New Page#

import solara
import leafmap.maplibregl as leafmap


def create_map():

    m = leafmap.Map(
        style="positron",
        projection="globe",
        height="750px",
        zoom=2.5,
        sidebar_visible=True,
    )
    geojson = "https://github.com/opengeos/datasets/releases/download/world/mgrs_grid_zone.geojson"
    m.add_geojson(geojson)
    m.add_labels(geojson, "GZD", text_color="white", min_zoom=2, max_zoom=10)
    return m


@solara.component
def Page():
    m = create_map()
    return m.to_solara()

27.6.6. Running the Solara Web App Locally#

cd solara-maplibre
solara run pages/

27.6.7. Pushing Changes to the Hugging Face Space#

git add .
git commit -m "Update the web app"
git push

27.7. Key Takeaways#

27.8. Exercises#

27.8.1. Exercise 1: Create a Simple Voilà Dashboard#

27.8.2. Exercise 2: Build a Multi-Page Solara Application#

Contents