Customize ExB dev edition: default map widget icons and highlight colors

09-29-2020 01:01 PM
New Contributor II

I'm pretty new to app development, but I'd like to modify background color and position of the default map widgets that can be toggled on and off in the tool selector. I'm not sure where these features are modified in the code. It looks like the default widgets are accessed through the api, then configured in pc-layout-json.ts, but modifying the layout here doesn't seem to have any effect.

It also looks like MapViewHighlightOptions can be used to customize the highlight color of a view, which I'd like to do as well as modify popup behavior, but I'm not sure where these functions would get implemented either. Can anyone steer me in the right direction?

Tags (2)
0 Kudos
2 Replies
Esri Regular Contributor

Hi Dan,

The background color of the widgets on the map is controlled by the theme (light color setting) with the exception of the Ink theme, it cannot be changed.  The positions of the default tool widgets are located in the pc-layout and mobile layout.json as you have discovered. Each widget is part of a group layout that controls the position of the widget and direction (horizontal and vertical). Here is an example below of the position. Also, we have tested these positions between all three layouts so if you change these you will need to make sure you test thoroughly. I would also recommend that you copy the map widget so you have one non-customized one if you decide to go down this road.  In regards to your question about the highlight options, we will have this feature as an option to change the selection highlight for the feature selected. So I would just wait for that to come out in the next release of the developer edition.



layout: {
'leftTopContainer': {
children: ['navigator', 'Select'],
position: {
top: 15,
left: 15
0 Kudos
Occasional Contributor

Is there a way to create my own renderer for the highlight color/fill/halo, etc ?  @DavidMartinez 

The \arcgis-map\src\runtime\components\mapbase.tsx 's highlight HALO doesn't seem to work. 

I need something like this: 



0 Kudos