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

shay-geo — Fri, 29 Jan 2021 14:04:51 GMT

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

topic div had a div child added, but there is now more than one. You must add unique key properties to make them distinguishable. in ArcGIS JavaScript Maps SDK Questions

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