Skip to content

Add live realtime data

Use realtime GeoJSON data streams to move a symbol on your map.

const map = new maplibregl.Map({
    container: 'map',
    style: 'https://tiles.openfreemap.org/styles/bright',
    zoom: 2
});

map.on('load', () => {
    window.setInterval(() => {
        // Make a GET request to get two random numbers
        fetch('https://www.random.org/decimal-fractions/?num=2&dec=10&col=1&format=plain&rnd=new')
            .then(r => r.text())
            .then(text => {
                // Takes the two random numbers between 0 and 1 and converts them to degrees
                const coordinates = text.split('\n').map(l => (Number(l) * 180) - 90);
                const json = {
                    type: 'Feature',
                    geometry: {
                        type: 'Point',
                        coordinates
                    }
                };
                // Update the drone symbol's location on the map
                map.getSource('drone').setData(json);

                // Fly the map to the drone's current location
                map.flyTo({
                    center: json.geometry.coordinates,
                    speed: 0.5
                });
            });
    }, 2000);

    // Set initial location at (0,0).
    map.addSource('drone', {type: 'geojson', data: {
        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: [0, 0]
        }
    }});
    map.addLayer({
        'id': 'drone',
        'type': 'symbol',
        'source': 'drone',
        'layout': {
            'icon-image': 'airport'
        }
    });
});

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Add live realtime data</title>
    <meta property="og:description" content="Use realtime GeoJSON data streams to move a symbol on your map." />
    <meta property="og:created" content="2025-06-25" />
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.css' />
    <script src='https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.js'></script>
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
    </style>
</head>
<body>
<div id="map"></div>

<script>
    const map = new maplibregl.Map({
        container: 'map',
        style: 'https://tiles.openfreemap.org/styles/bright',
        zoom: 2
    });

    map.on('load', () => {
        window.setInterval(() => {
            // Make a GET request to get two random numbers
            fetch('https://www.random.org/decimal-fractions/?num=2&dec=10&col=1&format=plain&rnd=new')
                .then(r => r.text())
                .then(text => {
                    // Takes the two random numbers between 0 and 1 and converts them to degrees
                    const coordinates = text.split('\n').map(l => (Number(l) * 180) - 90);
                    const json = {
                        type: 'Feature',
                        geometry: {
                            type: 'Point',
                            coordinates
                        }
                    };
                    // Update the drone symbol's location on the map
                    map.getSource('drone').setData(json);

                    // Fly the map to the drone's current location
                    map.flyTo({
                        center: json.geometry.coordinates,
                        speed: 0.5
                    });
                });
        }, 2000);

        // Set initial location at (0,0).
        map.addSource('drone', {type: 'geojson', data: {
            type: 'Feature',
            geometry: {
                type: 'Point',
                coordinates: [0, 0]
            }
        }});
        map.addLayer({
            'id': 'drone',
            'type': 'symbol',
            'source': 'drone',
            'layout': {
                'icon-image': 'airport'
            }
        });
    });
</script>
</body>
</html>