Using React Components as Custom Markers in ESRI JS 4

RoelGarcia — Wed, 24 Jun 2020 16:19:52 GMT

Hi,

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.

topic Using React Components as Custom Markers in ESRI JS 4 in ArcGIS JavaScript Maps SDK Questions

Using React Components as Custom Markers in ESRI JS 4