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

195
0
01-29-2021 06:03 AM
shaileshgavathe
Occasional Contributor

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.

shaileshgavathe_0-1611928891172.png

 
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 [HeatmapSliderheatmapRendererCreator] = await loadModules<[typeof import("esri/widgets/smartMapping/HeatmapSlider"),
                                                                                       typeof import("esri/smartMapping/renderers/heatmap")]>
                                                                            (['esri/widgets/smartMapping/HeatmapSlider'
                                                                            'esri/smartMapping/renderers/heatmap']);
 
      let heatmapsliderany = 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
0 Kudos
0 Replies