Dash Leaflet - clientside continous update of points position with websocket data

Dash Python
1

Hi,

I have data coming to JS on clientside via WebSocket (SocketIO) and I have dl.Map component.
How to update map markers basically real time (0,5s) on the client side?

I have had trouble accessing dl.Map component via clientside callback. Below is my simplified code.

The idea is clear: receive data on client side, based on data values (id, lat, lon) create or update marker on the map.

def get_overview_page():
    map_component = get_map_component()
    map_component.children[0].zoom = 3

    content = html.Div(
        [
            html.Div(
                id="socketio-output",
                style={
                    "backgroundColor": "red",
                    "width": "10%",
                    "height": "20px",
                    "display": "none",
                },
            ),
            html.Div(id="trigger-map", style={"display": "none"}),
            html.Div(id="dummy-output-map", style={"display": "none"}),
            map_component,
        ], style={
            'flex': '1',
            'display': 'flex',
            'position': 'relative',
            'overflow': 'hidden',
        },
        id='flight-plans-div',
    )
    
    return content

app.clientside_callback(
    """
    function(trigger) {
        var socket = io.connect('http://""" + WS_IP + """:""" + WS_PORT + """/');
        socket.on('connect', function() {
            console.log('Connected to SocketIO server');
        });

        socket.on('exec_data', function(data) {
            console.log('Received exec_data:', data);

            // Access the Leaflet map
            var map = dl.Map._map; // Assuming 'dl' is your Dash Leaflet object

            if (map) {
                var dynamicLayers = map.getLayerGroup('dynamic-layers');
                if (!dynamicLayers) {
                    dynamicLayers = L.layerGroup().addTo(map);
                    dynamicLayers._leaflet_id = 'dynamic-layers';
                }

                console.log(dynamicLayers);

                // Check if a point for this UAV already exists
                var pointId = 'uav-' + data.uav_serial;
                var existingPoint = dynamicLayers.getLayer(pointId);

                if (existingPoint) {
                    // Update the position of the existing point
                    console.log('Updating existing point');
                    existingPoint.setLatLng([data.lat, data.lon]);
                } else {
                    console.log('Creating new point');
                    // Create a new point
                    var point = L.circleMarker([data.lat, data.lon], {
                        radius: 5,
                        color: '#1ab1db'
                    });

                    // Add tooltip to the point
                    point.bindTooltip('UAV Serial: ' + data.uav_serial);

                    // Add the new point to the layer
                    dynamicLayers.addLayer(point);
                    point._leaflet_id = pointId;
                }
            }
        });
    }
    """,
    Output("dummy-output-map", "children"),
    [Input("trigger-map", "children")],
)

Thank you very much for any help!
BEst from
Tadeas