Use Leaflet MarkerCluster Plugin

[simplylu]

Hi,
since I need the cluster functionality of leaflet in a project where I show a lot of pins on a map, I came up with the following solution.

Unfortunately, I wasn't able to make use of the ui.leaflet class, so if you have any suggestions to make use of the mentioned class, let me know :)

# Import necessary methods
from nicegui import ui
from fastapi.responses import JSONResponse

# Endpoint to fetch JSON data with pin locations from
@ui.page("/api")
def ui_api():
    return JSONResponse(content={
        "pins": [
            {"text": "asd", "lat": 50, "lng": 10},
            {"text": "sdf", "lat": 51, "lng": 11},
            {"text": "dfg", "lat": 49, "lng": 9}
        ]
    })

# Index page that shows the map
@ui.page("/")
async def ui_index():
    # Load respective CSS / JS files to include the MarkerCluster resources and Axios
    ui.add_head_html("""<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css" />
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"></script>""")
    
    # Create a UI element that's being used to render the map within
    ui.label("Leaflet MarkerCluster with NiceGUI").classes("ml-auto mr-auto text-2xl font-bold")
    ui.element("div").props('id="map"').classes("absolute-center w-11/12 h-5/6")
    
    # Initialize the map and load the data from the API
    ui.run_javascript("""let map = L.map('map').setView([50, 10], 6);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '© OpenStreetMap'
        }).addTo(map);

        let markers = L.markerClusterGroup();

        function loadData() {
            axios.get('/api')
                .then(function (response) {
                    var pins = response.data.pins;
                    pins.forEach(function(pin) {
                        var marker = L.marker([pin.lat, pin.lng])
                            .bindPopup(pin.text);
                        markers.addLayer(marker);
                    });
                    map.addLayer(markers);
                })
                .catch(function (error) {
                    console.error('Error loading the pins:', error);
                });
        }

        loadData();""")

ui.run(port=7777)

See the result with some more data (100 cities in Germany) below: