PyCafe - Solara - Solara-based Interactive Map

app.py
requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import solara
import ipyleaflet

opacity = solara.reactive(1.)
visible = solara.reactive(True)
center = solara.reactive((30,38))
zoom = solara.reactive(12)

@solara.component
def LayerControl(name: str, visible:solara.reactive, opacity: solara.reactive):
    """
    Reusable component for controlling a single Layer
    (visible and opacity)
    """
    with solara.Row():
        solara.Checkbox(label=name, value=visible, style="width:130px")
        solara.Style(".v-input__slider {align-items:center;}")
        solara.SliderFloat(label="", 
                           min=0,
                           max=1,
                           step=0.01,
                           value=opacity
        )

class Map(ipyleaflet.Map):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        print("Initialized Map")
        # Note that updates to TileLayer do *not* re-initialize the Map
        # which is good!

@solara.component
def Page():
    with solara.Card():
        LayerControl("Local tile layer", visible, opacity)

    Map.element(
        scroll_wheel_zoom = True,
        center = center.value,
        on_center = center.set,
        zoom = zoom.value,
        on_zoom = zoom.set,
        layers = [
            ipyleaflet.TileLayer.element(
                url = "http://localhost:5000/{z}/{x}/{y}?url=/data/ndvi.tif&vmin=0&vmax=1&colormap=ylgnbu",
                opacity = opacity.value,
                visible = visible.value
            )
        ],
        controls = []
    )
Py.Cafe

ipyleaflet-demo-layer-opacity

Solara-based Interactive Map
