Using React Components as Custom Markers in ESRI JS 4

06-24-2020 09:19 AM
New Contributor III



We have requirements which call for rendering markers based on a very specific design within ESRI Maps using the latest version of the JS 4 API.


Essentially, what we would like to achieve is the ability to render a React Component for items within the Map as, this would allow us to manage the Marker’s customizations (iconography, label, status, etc.) based on the feature to be rendered.


For instance, given the screenshots below, we would like to render each individual item based on a React Component (the clusters we are handling separately) as this would allow us to customize the display of the Markers based on the state of the item which it represents as well as based on the zoom level of the Map (i.e. only the backgound and icon would be rendered when zoomed out, and additional information such as the item’s name and status would be rendered when zoomed in).

 Please see screenshot1 and screenshot2




We have review the APIs Docs and numerous Examples at length as well as searched the various forums, but thus far have not been able to determine how best this can be accomplished. Short of having the ability to render a react component, having the ability to render raw html would also suffice as we can manage the customizations just the same.


Any direction or guidance would be greatly appreciated.

0 Replies