app.py

# 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 shiny import reactive
from shiny.express import ui, render, input
from shinywidgets import render_widget  
from ipyleaflet import GeoJSON, Map, SearchControl, LegendControl, ScaleControl, FullScreenControl, GeoJSON, basemaps, basemap_to_tiles, LayersControl 

here = pathlib.Path(__file__)
with open(here.parent / "cambodia-paleodata.geojson", "r") as f:
    data = json.load(f)

def colorize(feature):
    if (feature["properties"]["name"] =='Jurassic-Cretaceous sandstone'):
        return {"color": "red", "stroke": 10, "fill":True}
    if (feature["properties"]["name"] =='Devono-Carboniferous sandstone and shale'):
        return {"color": "blue", "stroke": 22, "fill":True}
    if (feature["properties"]["name"] =='Cambrian-Silurian quartzite'):
        return {"color": "green", "stroke": 12, "fill":True}
    if (feature["properties"]["name"] =='Upper carboniferous-Lower Triassic sandstone'):
        return {"color": "yellow", "stroke": 12, "fill":True}
    if (feature["properties"]["name"] =='Cambrian-Upper Silurian quartzites'):
        return {"color": "orange", "stroke": 12, "fill":True}
    if (feature["properties"]["name"] =='Late Triassic-Early Cretaceous (Post Triassic) granodiorite'):
        return {"color": "purple", "stroke": 12, "fill":True}
    if (feature["properties"]["name"] =='Diorite (including Late Cretaceous-Paleogene gabbro and gabbroi'):
        return {"color": "grey", "stroke": 20, "fill":True}
   
ui.page_opts(fillable=True)

with ui.navset_pill(id="tab"):  
    with ui.nav_panel("Map"):
        ui.h2("Cambodia Paleontology Map")
        ui.markdown("The map displays various geological features such as `Jurassic-Cretaceous sandstone`, `Devono-Carboniferous sandstone and shale`, `Cambrian-Silurian quartzite`, `Upper carboniferous-Lower Triassic sandstone`, `Cambrian-Upper Silurian quartzites`, `Late Triassic-Early Cretaceous (Post Triassic) granodiorite`, `Diorite (including Late Cretaceous-Paleogene gabbro and gabbroi` across Cambodia.</p>")

    with ui.nav_panel("About"):
        ui.h3("Story")
        ui.markdown("The inspiration for this map struck during a fossil hunting expedition in Cambodia. My friend Ben relied on Google Maps and dead reckoning to identify potential fossil sites based on land features. It occurred to me that we could potentially layer existing data onto different basemaps, and this map is the realization of that idea.")
        ui.h4("Credits")
        ui.markdown("The map source is [Geology of Cambodia (2006)](https://data.opendevelopmentcambodia.net/en/dataset/geology-of-cambodia-2006) published by Open Development Cambodia. The data was reprojected and filtered using Mapshaper, QGIS and UI is built with Python for Shiny and iPyleaflet.")

@render_widget  
def map():
    # Add some layers

    mapnik = basemap_to_tiles(basemaps.OpenStreetMap.Mapnik)
    mapnik.base = True
    mapnik.name = 'Mapnik OpenStreetMap (Default)'

    esri = basemap_to_tiles(basemaps.Esri.WorldImagery)
    esri.base = True
    esri.name = 'Esri World Imagery'

    opentopo = basemap_to_tiles(basemaps.OpenTopoMap)
    opentopo.base = True
    opentopo.name = 'OpenTopo'

    satellite = basemap_to_tiles(basemaps.Gaode.Satellite)
    satellite.base = True
    satellite.name = 'Satellite'
    map = Map(center=(12.74331, 104.91036), zoom=7, layers=[esri, opentopo, satellite, mapnik])  

    # Map Controls
    map.add_control(LayersControl(position='topright'))
    map.add(FullScreenControl(position='topright'))
    map.add(ScaleControl(position='bottomright'))
    map.add(SearchControl(
        position="topleft",
        url='https://nominatim.openstreetmap.org/search?format=json&q={s}',
        zoom=11
    ))

    # TODO Legend size control?
    # Bug: https://github.com/weatherforce/ipyleaflet-legend/issues/28
    legend = LegendControl({"Jurassic":"red", "Devono":"blue", "Cambrian":"green", "Upper carboniferous-Lower Triassic": "yellow", "Cambrian-Upper Silurian": "orange", "Late Triassic-Early Cretaceous (Post Triassic)": "purple", "Diorite":"grey"}, title="Legend", position="bottomright")
    map.add(legend)

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


    return map  

cambodia-paleodata.geojson

{
"type": "FeatureCollection",
"name": "cambodia-paleodata",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [

requirements.txt