CODEWITHSUNDEEP
mapboxmapbox-gl-jsmapbox-gl
Marcello Tambosi Possebon
Marcello Tambosi Possebon

Reputation: 1

Update Popup data in Mapbox GL JS

I'm making a fleet tracker with Mapbox GL JS, it gets the data from a GeoJson and inserts in the map, as the Add live realtime data, I've also integrated the Mapbox store locator example, by now I can update in realtime the sidebar and the points on the map. A modification that I would like to make is not display only one single popup, but a popup for every icon located there. I would like to know how to update this popups, because in the way I'm making it's creating a new popup every movement of the object, but is not closing the previous one. Here is the function that I'm using for the popups

function createPopUp(currentFeature, data) {     
    var popUps = document.getElementsByClassName('mapboxgl-popup');
    //if (popUps[0]) popUps[0].remove();
    //  mapboxgl.Popup.remove();

    if (map.getZoom() > 9) {
    var popup = new mapboxgl.Popup({closeOnClick: false})
      .setLngLat(currentFeature.geometry.coordinates)
      .setHTML('<h3> Aeronave: '+ currentFeature.properties.dev_id + '</h3>' +
        '<h4> Curso: ' + currentFeature.properties.curso + 'º<br> Altitude: ' + currentFeature.properties.alt + ' ft<br> Sinal: ' + currentFeature.properties.rssi +'</h4>')
      .addTo(map)
      .setMaxWidth("fit-content(10px)");
      } else{if (popUps[0]) popUps[0].remove()};
  }

If I uncomment the popUps[0] line it will only allow 1 popup to be displayed, I've also tried to change dynamically the number between the [] by the number of active tracked devices, it reduced the popup number, but it still repeat some popups of one ID. Also I've tried to change the class name via the .addClasName but it didn't worked.

Thanks

Upvotes: 0

Views: 1572

Answers (1)

Adriana Babakanian
Adriana Babakanian

Reputation: 1299

Without seeing how you're calling the createPopUp method in the context of your application, it is difficult to diagnose exactly what is going wrong. I'm not sure why a new popup is being created each time the map moves, so it sounds like you might be calling this method within the Map#on('move') event. That being said, I'm assuming that you're iterating over all of your features and calling the createPopUp method for each in order to initialize all of the popups.

Rather than using an array of DOM nodes generated with var popUps = document.getElementsByClassName('mapboxgl-popup');, I'd recommend specifying a unique and reproducible class name for each feature's popup element when initialized. It looks like each of your features has a dev_id property, so you could do something like:

var popup = new mapboxgl.Popup({closeOnClick: false, className: `mapbox-gl-popup-${dev_id}`})

If you need to change the popup for a particular feature in the future, you can create a helper function to retrieve the relevant DOM node:

function retrievePopUp(feature) {
  return document.getElementsByClassName(`mapboxgl-popup-${feature.properties.dev_id}`);
}

Upvotes: 1

Related Questions