How to move esri component outside of map

Question

 

All esri widgets will be deprecated as early as Q1 2026

https://transparentgov.net/cleargov1/1841/all-esri-widgets-will-be-deprecated-as-early-as-q1-2026

Discard widget, use component now

 

Step 1.

you must use reference element if you plan to use component outside of map component. 

https://developers.arcgis.com/javascript/latest/programming-patterns/ 

warning:  when you use reference element in html tag, you must use exact word "reference-element"

when you use reference element in javascript, must use exact word "referenceElement"

They are not interchangable, otherwise, will not work.

 

 

 

Step 2.

How to use reference element ?  Modify the sample source code online, then click refresh button at top right corner to see the change. 

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=basemap-gallery 

 

 

 

 

Step 3.

Without use reference element, by default, esri will disable to all component outside of map component. Look at this here. 

https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/basemap-gallery-component-bugs-automatically/m-p/1625526#M87272

 

 

 

Step 4.

 

 

 

 

 

Step 5.

 

 

 

 

Step 6.

 

 

 

 

Step 7.

 

 

 

 

Step 8.

 

 

 

 

Step 9.

 

 

 

 

 

 

 

 

Step 10.

 

 

 

 

Step 11.

 

 

 

 

Step 12.

 

 

 

 

Step 13.

 

 

 

 

 

Step 14.

 

 

 

 

Step 15.

 

 

 

 

 

Step 16.

 

 

Step 17.

 

Step 18.

 

Step 19.

 

Step 20.