Where did the map example go?

[WolfgangFahl]

Question

With the latest release of nicegui the map example which used to be at https://github.com/zauberzeug/nicegui/blob/main/examples/map/main.py

does not work any more. Where did it go and what needs to be changed?

"""
Created on 2023-01

https://github.com/zauberzeug/nicegui/blob/main/examples/map/main.py

@author: rodja
"""

from nicegui import Client, ui


class MapExample:
    """
    Leaflet based map example
    """

    def __init__(self):
        self.zoom_level = 9
        self.locations = {
            (48.486375, 8.375567): "Baiersbronn",
            (52.5200, 13.4049): "Berlin",
            (52.37487, 9.74168): "Hannover",
            (40.7306, -74.0060): "New York",
            (39.9042, 116.4074): "Beijing",
            (35.6895, 139.6917): "Tokyo",
        }

        self.zoom_levels = {
            9: 9,
            10: 10,
            11: 11,
            12: 12,
            13: 13,
            14: 14,
            15: 15,
            16: 16,
            17: 17,
        }

        @ui.page("/")
        async def main_page(client: Client):
            await self.show_map(client)

    def on_change_zoom_level(self, _ce):
        self.zoom_level = _ce.value
        self.map.set_zoom(self.zoom_level)
        pass

    async def draw_path(self, _ce):
        """
        draw a path
        """
        with self.map as geo_map:
            locs = list(self.locations.keys())
            path = [locs[1], locs[2]]
            geo_map.draw_path(path)

    async def show_map(self, _client: Client):
        self.map = ui.leaflet().classes("w-full h-96")
        selection = ui.select(
            self.locations,
            on_change=lambda e: self.map.set_location(
                e.value, zoom_level=self.zoom_level
            ),
        ).classes("w-40")
        zoom_selection = ui.select(
            self.zoom_levels, on_change=self.on_change_zoom_level
        ).classes("w-40")
        await self.map.initialized()
        selection.set_value(
            next(iter(self.locations))
        )  # trigger map.set_location with first location in selection
        zoom_selection.set_value(self.zoom_level)
        ui.button("Path", on_click=self.draw_path)

    def run(self):
        ui.run(title="map example", reload=False)


if __name__ == "__main__":
    map_example = MapExample()
    map_example.run()

[rodja]

We now have ui.leaflet: https://nicegui.io/documentation/leaflet

[WolfgangFahl]

@rodja - exactly - ui.leaflet is incompatible with the maps example. I have been using the functions of the example and wonder how i can get them back and where the example went. I tried https://ngdemo.bitplan.com/leaflet with the https://github.com/WolfgangFahl/nicegui_widgets/blob/main/ngwidgets/leaflet.py compatibility layer below and the demo code at https://github.com/WolfgangFahl/nicegui_widgets/blob/058d9c86dc182375038fc6b2894f29bd63c54b55/ngwidgets/widgets_demo.py#L760 but

def draw_path(self, path: List[Tuple[float, float]],options:Dict={'color': 'red', 'weight': 3, 'opacity': 0.7}) -> None:
        """Draw path on map
        Args:
            path: List of (lat, lon) points"""
        if hasattr(self, '_path_layer') and self._path_layer is not None:
            self.remove_layer(self._path_layer)
        path_config = {
            'latLngs': path,
            'options': options
        }
        self._path_layer = self.generic_layer(name='polyline', args=[path_config])

seems not to work as expected.

[falkoschindler]

Here is the commit that removed the map example a year ago: 58ccf3e

Apart from that, I don't quite understand your question. How can a UI element be incompatible with a non-existing example? They are independent of each other.
And how can your code break with an example being removed in our repository? If you'd be using functions from this example, why are they not duplicated in your repository?
Last but not least, you're posting code with @author: rodja that is definitely not written by Rodja. Very confusing.

[WolfgangFahl]

@falkoschindler thanks for looking into this.

The draw_path function is gone. The commit does not show any details any more. The original implementation was

    def draw_path(self, path: List[Tuple[float, float]]) -> None:
        """Draw a path on the map based on list of lat-long tuples."""
        self.run_method("draw_path", path)

what is the new way to do this?

[WolfgangFahl]

i have improved https://ngdemo.bitplan.com/leaflet according to the new api and https://github.com/WolfgangFahl/nicegui_widgets/blob/main/ngwidgets/leaflet_map.py is now the module i am using.

def draw_path(self, path: List[Tuple[float, float]], options: Dict = None) -> Any:
        """Draw a polyline path on the map
        Args:
            path: List of (lat,lon) coordinate tuples
            options: Optional styling options for the polyline
        Returns:
            The created layer object
        """
        if options is None:
            options = {'color': 'red', 'weight': 3, 'opacity': 0.7}

        layer = self.generic_layer(name='polyline', args=[path, options])
        return layer

is the new draw_path method. The clear_layers does not work as expected - how would i achieve that?

[falkoschindler]

@WolfgangFahl
Please, provide a minimum reproducible example if you ask for help with your code.
Why is it important to provide a minimal reproducible example?

I assume you are trying to do something like this:

m = ui.leaflet(center=(51.505, -0.09))
m.generic_layer(name='polyline', args=[[(51.505, -0.09), (51.510, -0.09), (51.505, -0.10)], {'color': 'red'}])
ui.button('Clear layers', on_click=lambda: m.clear_layers())

What exactly isn't working for you? What do you expect, what is happening instead?

[WolfgangFahl]

@falkoschindler great - we are making progress.
The example code has been updated to:

async def show_leaflet(self):
        """Show leaflet demo with locations and path drawing"""

        async def show():

            self.locations = {
               "London": (51.505, -0.090),
               "Berlin": (52.5200, 13.4049),
               "Hannover": (52.37487, 9.74168),
               "New York": (40.7306, -74.0060),
               "Beijing": (39.9042, 116.4074),
               "Tokyo": (35.6895, 139.6917)
            }
            self.zoom_level = 9
            london=self.locations["London"]

            self.map = LeafletMap(center=london, zoom=self.zoom_level, classes="w-full h-96")
            await self.map.initialized()

            with ui.row() as self.select_row:
                ui.select(
                   options=list(self.locations.keys()),  # Use city names
                   label="Location",
                   value="London",
                   on_change=lambda e: setattr(self.map, 'center', self.locations[e.value])
                ).classes("w-40")
                ui.select(
                    {i: i for i in range(9,18)},
                    label="Zoom",
                    value=self.zoom_level,
                    on_change=lambda e: setattr(self.map, 'zoom', e.value)
                ).classes("w-40")
                ui.label().bind_text_from(self.map, 'center',lambda center: f'Center: {center[0]:.3f}, {center[1]:.3f}')
                ui.label().bind_text_from(self.map, 'zoom',lambda zoom: f'Zoom: {zoom}')
                #ui.label().bind_text(lambda: f'Layers: {len(self.map.layers)}')  # Layer counter

            with ui.grid(columns=2) as self.grid:
                ui.button(icon='zoom_in', on_click=lambda: setattr(self.map, 'zoom', self.map.zoom + 1))
                ui.button(icon='zoom_out', on_click=lambda: setattr(self.map, 'zoom', self.map.zoom - 1))
                #ui.button('Fit world', on_click=lambda: self.map.run_map_method('fitWorld'))
                ui.button('Clear layers', on_click=lambda: self.map.clear_layers())

        await self.setup_content_div(show)

when the "Clear layers" button is clicked the whole map disappears.

I just would like to get access to the draw results via python. See http://nicetrack.bitplan.com/map (currently not working yet - see next discussion)

The controls seems all to be hidden in javascript code and the documentation of ui.leaflet only describes the API partly. E.g. a link to https://leafletjs.com/reference.html and a general description how the layers and their functions may be used would IMHO be beneficial.

[falkoschindler]

The whole map disappearing is expected behavior. As indicated in https://nicegui.io/documentation/leaflet#changing_the_map_style, calling clear_layers removes the default tile layer as well. There is a remove_layer method to remove individual layers.