PyCafe - Solara - Interactive Map Comparison with ipyleaflet

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
52
53
54
55
56
57
58
59
60
61
import solara
import ipyleaflet
import traitlets
from traitlets import observe
from ipywidgets import Layout


zoom = solara.reactive(4)
map_type = solara.reactive("stack")

class Map(ipyleaflet.Map,):
    def set_stack_mode(self):
        if self.split_map_control in self.controls:
            self.remove(self.split_map_control)
            self.remove(self.left_layer)
            self.remove(self.right_layer)
        self.add(self.esri_layer)
        self.add(self.topo_layer)

    def set_split_mode(self):
        if self.topo_layer in self.layers and self.esri_layer in self.layers:
            self.remove(self.topo_layer)
            self.remove(self.esri_layer)
        self.add(self.left_layer)
        self.add(self.right_layer)
        self.add(self.split_map_control)

    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.osm = self.layers[0]

        esri_url=ipyleaflet.basemaps.Esri.WorldImagery.build_url()
        topo_url = ipyleaflet.basemaps.OpenTopoMap.build_url()

        self.left_layer = ipyleaflet.TileLayer(url = topo_url, name="left")
        self.right_layer = ipyleaflet.TileLayer(url = esri_url, name="right")
        self.topo_layer = ipyleaflet.TileLayer(url=topo_url, name="topo", opacity=0.25)
        self.esri_layer = ipyleaflet.TileLayer(url=esri_url, name="esri")

        self.split_map_control = ipyleaflet.SplitMapControl(
            left_layer=self.left_layer, 
            right_layer=self.right_layer)

        if kwargs.get("map_type") == "stack":
            self.set_stack_mode()
        else:
            self.set_split_mode()

@solara.component
def Page():
    with solara.Column(style={"height": "calc(100% - 12px)"}):
        with solara.ToggleButtonsSingle(value=map_type):
            solara.Button("Stack", icon_name="mdi-layers-triple", value="stack", text=True)
            solara.Button("Split", icon_name="mdi-arrow-split-vertical", value="split", text=True)
        Map.element(
            zoom=zoom.value,
            on_zoom=zoom.set,
            map_type=map_type.value,
            layout=Layout(height="100%"),
        ).key(f"map{map_type.value}")
Py.Cafe

solara-issue-850

Interactive Map Comparison with ipyleaflet
