div had a div child added, but there is now more than one. You must add unique key properties to make them distinguishable.

[shaileshgavathe]

Hello,

Using ArcGIS JS API 4.18.

Working on getting the HeatMap Slider, the heatmap slider does get displayed but for some odd reason, the High bar is stuck and it gives the following error under Console.

div had a div child added, but there is now more than one. You must add unique key properties to make them distinguishable.

Error happens under this event,

heatmapslider.on(["thumb-drag","thumb-change"] 

Here is a snippet of code that I am trying to accomplish it with.

     

    const [HeatmapSlider, heatmapRendererCreator] = await loadModules<[typeof import("esri/widgets/smartMapping/HeatmapSlider"),

                                                                                       typeof import("esri/smartMapping/renderers/heatmap")]>

                                                                            (['esri/widgets/smartMapping/HeatmapSlider', 

                                                                            'esri/smartMapping/renderers/heatmap']);

      let heatmapslider: any = undefined;

                    //<label class="form-label">Heat Map Slider</label> Heat Map Slider

                    let divtofind = Array.from(document.querySelectorAll('label'))

                    .find(el => el.textContent === 'Heat Map Slider');

                    divtofind!.insertAdjacentHTML('afterend', '<div class="esri-heatmap-slider-div-outer" id="' + uniqueDivId +'"></div>');

                    if(heatmapWidgetFind){

                        (heatmapWidgetFind as __esri.Widget).destroy();                            

                    }

                    heatmapslider = new HeatmapSlider({

                        stops: DEFAULT_STOPS

                    });

                    // Typical usage                    

                    heatmapslider.container = uniqueDivId;

                    heatmapWidgetFind = heatmapslider;   

                    // when the user slides the handle(s), update the renderer

                    // with the updated color stops                     

                    heatmapslider.on(["thumb-drag","thumb-change"]  , function() {

                        const heatmapLayer = inputLayer as __esri.FeatureLayer;

                        if(heatmapLayer){

                            const renderer = (heatmapLayer?.renderer as  __esri.HeatmapRenderer).clone();

                            renderer.colorStops = DEFAULT_STOPS as  __esri.HeatmapColorStop[];                            

                            heatmapLayer.renderer = renderer;

                        }

                    });

Thanks