Removing duplicate Marker on mapbox ( Real time data )

Question

Removing duplicate Marker on mapbox ( Real time data )

402 Views Asked by Adhithya At 22 May 2022 at 08:28

i want to create a custom flight tracking map. before coming to the question i want to explain briefly about my situation. i have an Ads-b receiver which receives the data from aircraft in the sky, which later decodes and display it in a map.

Adsb-receiver map image

The receiver has a local json output which i want to use for my custom map.

  "messages" : 125778827,
  "aircraft" : [
    {"hex":"800d48","version":0,"sil_type":"unknown","mlat":[],"tisb":[],"messages":1156,"seen":95.8,"rssi":-49.5},
    {"hex":"8007df","flight":"IGO455  ","alt_baro":36000,"gs":438.7,"track":231.0,"baro_rate":-64,"squawk":"2670","category":"A0","lat":18.079958,"lon":83.322618,"nic":8,"rc":186,"seen_pos":0.5,"version":0,"nac_p":8,"nac_v":0,"sil":2,"sil_type":"unknown","mlat":[],"tisb":[],"messages":8609,"seen":0.0,"rssi":-49.5},
    {"hex":"80140c","flight":"IGO6645 ","alt_baro":4425,"gs":256.9,"track":253.3,"baro_rate":64,"squawk":"0212","category":"A0","lat":17.627657,"lon":83.310111,"nic":8,"rc":186,"seen_pos":0.1,"version":0,"nac_p":8,"nac_v":0,"sil":2,"sil_type":"unknown","mlat":[],"tisb":[],"messages":18201,"seen":0.1,"rssi":-49.5},
    {"hex":"801410","flight":"IGO409  ","alt_baro":33000,"gs":465.3,"track":83.2,"baro_rate":0,"squawk":"2726","category":"A0","lat":17.406673,"lon":81.141439,"nic":8,"rc":186,"seen_pos":0.0,"version":0,"nac_p":8,"nac_v":0,"sil":2,"sil_type":"unknown","mlat":[],"tisb":[],"messages":14402,"seen":0.0,"rssi":-49.5},
    {"hex":"800cc3","flight":"IGO7913 ","alt_baro":14000,"gs":242.0,"track":244.3,"baro_rate":64,"squawk":"0222","category":"A0","lat":17.271951,"lon":82.387161,"nic":8,"rc":186,"seen_pos":0.7,"version":0,"nac_p":8,"nac_v":0,"sil":2,"sil_type":"unknown","mlat":[],"tisb":[],"messages":126760,"seen":0.5,"rssi":-49.5},
    {"hex":"80142a","flight":"IGO6366 ","alt_baro":10275,"gs":314.0,"track":90.7,"baro_rate":-1984,"squawk":"2737","category":"A0","lat":17.460069,"lon":83.135016,"nic":8,"rc":186,"seen_pos":0.1,"version":0,"nac_p":8,"nac_v":0,"sil":2,"sil_type":"unknown","mlat":[],"tisb":[],"messages":82072,"seen":0.1,"rssi":-49.5},
    {"hex":"8013fc","flight":"IGO787  ","alt_baro":36975,"gs":461.6,"track":14.9,"baro_rate":0,"squawk":"0234","category":"A0","lat":18.189077,"lon":83.025330,"nic":8,"rc":186,"seen_pos":0.3,"version":0,"nac_p":8,"nac_v":0,"sil":2,"sil_type":"unknown","mlat":[],"tisb":[],"messages":201714,"seen":0.3,"rssi":-49.5},
    {"hex":"800d4f","category":"A0","version":0,"sil_type":"unknown","mlat":[],"tisb":[],"messages":134558,"seen":276.4,"rssi":-49.5}
  ]
}

This is my code that i used for my custom map

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        #map{
            width: 100vw;
            height: 100vh;
        }

        
    </style>
    <title>Vscode local</title>
</head>
<body>
    <div id='map'></div>
    
</body>


<script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script>
<script>
  mapboxgl.accessToken = 'pk.eyJ1IjoiaGFycnkxMjM0OTgiLCJhIjoiY2s4OXh1c3BqMGFsZzNvbXA3YmYyaGFhYSJ9.wmVMiMxlSqpzJPsj-UXr3Q';
  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    zoom: 1,
    center: [0,20]
  });
</script>

<script src="index.js"></script>
</html>

    console.log("Updating map with realtime data")
    fetch("http://192.168.29.9/skyaware/data/aircraft.json")
        .then(response => response.json())
        .then(rsp => {
            // console.log(rsp.data)
            rsp.aircraft.forEach(element => {
                latitude = element.lat;
                longitude = element.lon;
                flightid = element.flight;

                
                // Mark on the map
                
                new mapboxgl.Marker({
                    draggable: false,
                }).setLngLat([longitude, latitude])
                .addTo(map); 
            });
        })
}


let interval = 1;
setInterval( updateMap, interval);

when i run the code the markers starts to duplicate.

duplicate marker image

So my question is how can i remove the duplicate markers. & also if you guys don't mind can you guys tell me that is my code ok.. or should i change something.. Thanks in advance

Original Q&A

There are 1 best solutions below

**Indigo** · Answer 1 · 2022-05-22T09:21:17.987000

They are overlapping because you are not removing existing markers, and new ones are drawing on top.

To fix this, Assign the new marker to a variable then push it into an array.

Then before setting new markers from a new api response, remove the existing markers.

markersList= []; //outer scope

fetch("api")
.then(response => response.json())
.then(rsp => {
    markersList.forEach(marker => marker.remove());
    markersList = []; //reassign empty array

    rsp.aircraft.forEach(element => {
        latitude = element.lat;
        longitude = element.lon;
        flightid = element.flight;
        
        // Mark on the map
        let marker = new mapboxgl.Marker({
            draggable: false,
            }).setLngLat([longitude, latitude]);

        marker.addTo(map);
        markersList.push(marker);
    });
})

Removing duplicate Marker on mapbox ( Real time data )

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in JSON

Related Questions in MAPBOX

Related Questions in MARKER

Trending Questions

Popular # Hahtags

Popular Questions