Map (ipyleaflet)

Express
Core

from ipyleaflet import Map  
from shiny.express import ui
from shinywidgets import render_widget  

ui.h2("An ipyleaflet Map")

@render_widget  
def map():
    return Map(center=(50.6252978589571, 0.34580993652344), zoom=3)  Edit in Shinylive

from ipyleaflet import Map  
from shiny import App, ui
from shinywidgets import output_widget, render_widget  

app_ui = ui.page_fluid(output_widget("map"))  

def server(input, output, session):
    @render_widget  
    def map():
        return Map(center=(50.6252978589571, 0.34580993652344), zoom=3)  

app = App(app_ui, server)Edit in Shinylive

What's this?

Relevant Functions

Details

ipyleaflet allows us to create interactive maps via ipywidgets.

To insert an ipyleaflet map do the following tasks:

Add shinywidgets.output_widget() to the UI of your app to create a div in which to display the map. Where you call this function will determine where the map will appear within the layout of the app.
Provide an argument to the id parameter in the shinywidgets.output_widget() function call. This argument will be used to identify the map in the server function.
Within the server() function, create your ipyleaflet map and assign it to a variable. Your map does not need to be created within a nested function in server() like many other shiny for python components.
Register your map with shiny using shinywidgets.register_widget() by passing in the id of the map and the map variable.

Visit shiny.posit.co/py/docs/ipywidgets.html to learn more about using ipywidgets with Shiny.

Variations

GeoJSON and Markers

Read in country boundaries from a GeoJSON file and add markers to the map.

Express
Core

# example and data from:
# https://ipyleaflet.readthedocs.io/en/latest/layers/geo_json.html
# https://ipyleaflet.readthedocs.io/en/latest/layers/marker.html
import json
import pathlib
import random

from ipyleaflet import GeoJSON, Map, Marker  
from shiny.express import ui
from shinywidgets import render_widget  

here = pathlib.Path(__file__)
with open(here.parent / "europe_110.geo.json", "r") as f:
    country_boundaries = json.load(f)

def random_color(feature):
    return {
        "color": "black",
        "fillColor": random.choice(["red", "yellow", "green", "orange"]),
    }

ui.h2("An ipyleaflet Map")

@render_widget  
def map():
    map = Map(center=(50.6252978589571, 0.34580993652344), zoom=3)  

    geo_json = GeoJSON(  
        data=country_boundaries,  
        style={  
            "opacity": 1,  
            "dashArray": "9",  
            "fillOpacity": 0.1,  
            "weight": 1,  
        },
        hover_style={"color": "white", "dashArray": "0", "fillOpacity": 0.5},  
        style_callback=random_color,  
    )  
    map.add_layer(geo_json)  

    point = Marker(location=(52.204793, 0.121558), draggable=False)  
    map.add_layer(point)  

    return map  Edit in Shinylive

# example and data from:
# https://ipyleaflet.readthedocs.io/en/latest/layers/geo_json.html
# https://ipyleaflet.readthedocs.io/en/latest/layers/marker.html
import json
import pathlib
import random

from ipyleaflet import GeoJSON, Map, Marker  
from shiny import App, ui
from shinywidgets import output_widget, render_widget  

here = pathlib.Path(__file__)
with open(here.parent / "europe_110.geo.json", "r") as f:
    country_boundaries = json.load(f)

def random_color(feature):
    return {
        "color": "black",
        "fillColor": random.choice(["red", "yellow", "green", "orange"]),
    }

app_ui = ui.page_fluid(
    ui.h2("An ipyleaflet Map"),
    output_widget("map"),  
)

def server(input, output, session):
    @render_widget  
    def map():
        map = Map(center=(50.6252978589571, 0.34580993652344), zoom=3)  

        geo_json = GeoJSON(  
            data=country_boundaries,  
            style={  
                "opacity": 1,  
                "dashArray": "9",  
                "fillOpacity": 0.1,  
                "weight": 1,  
            },
            hover_style={"color": "white", "dashArray": "0", "fillOpacity": 0.5},  
            style_callback=random_color,  
        )  
        map.add_layer(geo_json)  

        point = Marker(location=(52.204793, 0.121558), draggable=False)  
        map.add_layer(point)  

        return map  

app = App(app_ui, server)Edit in Shinylive

What's this?