Multiple IDs detected: shadowGradient. Ensure unique element ids. Utils.js:19

Phoenix Forum Questions / Help
,
1

I’m building a liveview mapbox application that successfully loads data to a mapbox instance when the map is initially mounted via a phx-hook. Removing and adding new markers is built into a wrapper class around the mapbox map instance.

Every time I trigger a handle_event that would normally push new data to the map, I get the subject message Multiple IDs detected: shadowGradient, Ensure unique element ids Utils.js message.

I STILL get this message when I disabled pushing new data to the map via a the same handle_event call.

Appreciate any insights that anyone can offer. I’m including snippets of my code to show what I’m doing:

<div id="wrapper" phx-update="ignore">
  <div id="map"
     phx-hook="MapWrapper
     style="height: 500px; width:900px"
      data-cards={Poison.encode!(@cards)}>
  </div>
</div>

//hooks.js
const Hooks = {};
Hooks.MapWrapper = {
  mounted() {
    let cards = JSON.parse(this.el.dataset.cards);
    this.map = new MapWrapper(cards);
    
    this.handleEvent("filter", cards => {
    
      let selected_cards = JSON.parse(cards);
      //remove markers is called before adding new markers
      this.map.addMarkers(selected_cards);  
      
    })
  }
}

//map.js
class MapWrapper
{
  constructor(data) {
    const mapConfig = {
        accessToken: "<my api token>",
        container: "map",
        style: "mapbox://styles/mapbox/streets-v12",
        center: [-75.90, 42.12],
        zoom: 5
     }
    this.markers = []; //
    this.map = new mapboxgl.Map(mapConfig);
    this.addMarkers(data);
    //console.log(this.markers[0])
}

addMarkers(data) {
    //removeMarkers
    this.removeMarkers()
    let label = "";
    let marker = null; 
    data.forEach(element => {
        label = `Card: ${element['card_name']}`;
        marker = new mapboxgl.Marker()
        marker.setLngLat([element['longitude'], element['latitude']])
        marker.setPopup(new mapboxgl.Popup().setHTML(label)) // add popup
        marker.addTo(this.map);
        this.markers.push(element);        
    });
    };

    removeMarkers(){
        this.markers.forEach((marker) => marker.remove());
        this.markers = [];
    };
}
2

What this warning is saying is that Phoenix LiveView does not work correctly if you have elements with duplicate IDs in your generated HTML.

Here is what I would do to tackle this issue:
1. Open your DevTools and, in the “Elements” tab, search for all elements that have id="shadowGradient".
2. Once you find all elements with the “shadowGradient” ID, go back to your editor and locate the piece of code that is generating these duplicate IDs.
3. Modify the way you generate these IDs. One strategy I usually adopt is to concatenate the database primary key into the element’s name, such as id="shadowGradient-#{@id}". This ensures that every “shadowGradient” ID will be unique, resulting in IDs like “shadowGradient-1”, “shadowGradient-2”, and so on.

3

Thanks so much. I’ll give this a try and let you all know the results.

1 Like
4

So it appears the problem is in the creation of markers in the mapbox. I’m creating the markers exactly the way that mapbox api doesn’t give you a direct option to set a unique id. There is a hack that gets around it but now the markers are not being painted. I’ll continue to work on it and hopefully I’ll get this resolved… eventually. Post when I do.