PyCafe - Solara - Interactive Map Viewer with Leaflet

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import solara
import markdown
import ipyleaflet
import ipywidgets as widgets


text = """## Test markdown

### Details
                           
- **A**: a
- **B**: b
- **C**: c

"""

class Map(ipyleaflet.Map):
    def __init__(self, **kwargs):
        
        super().__init__(**kwargs)

        marker = ipyleaflet.Marker(
            location = (0,0),
            draggable = False,
            title = "My marker",
            popup_max_width=1000,
            popup_max_height=400
        )

        self.add(marker)

        main_box = widgets.HBox(
            layout=widgets.Layout(
                width='1000px',
                height='400px',
                justify_content='space-between',
                )
        )
        image_box = widgets.VBox(
            layout = widgets.Layout(
                width='65%',
                height='100%',
                border='solid 2px'
            )
        )

        panel_box = widgets.VBox(
            layout = widgets.Layout(
                width='25%',
                height='100%',
                border='solid 2px',
                overflow='auto',
            )
        )

        value = markdown.markdown(text)
        description_box = widgets.HTML(
            layout=widgets.Layout(
                border='solid 1px',
                overflow='unset',
            ),
            value=value,
        )

        panel_box.children = [
            description_box,
            description_box,
            description_box,
        ]

        main_box.children=[
            panel_box,
            image_box
        ]


        marker.popup = main_box


@solara.component
def Page():
    with solara.Column(style={"height": "100%"}) as main:
        map = Map.element(
            layout=widgets.Layout(height='100%')
        )
    
    return main
Py.Cafe

leaflet-map-viewer

Interactive Map Viewer with Leaflet
