Can I change the default symbology when the Search Tool finds a feature?

2443
4
03-08-2016 08:55 AM
LeeAllen
Occasional Contributor

In ArcGIS Online and subsequently in WAB app, when I use the Search to find a feature, the found polygon feature is symbolized with a blue outline and semi-transparent orange fill. Is there a way to change this default symbology?

search1.PNG

0 Kudos
4 Replies
AdrianWelsh
MVP Honored Contributor

I do not think you can change the color of the blue selection highlight in native AGOL. Though, in an application where you can modify the code (like WAB developer), you can change the colors.

You will need to dig into the JavaScript of the map and insert something like:

map.infoWindow.markerSymbol.outline.color = new Color("purple");

Here are more references on modifying the 'infoWindow'

Map | API Reference | ArcGIS API for JavaScript

0 Kudos
LeeAllen
Occasional Contributor

I am not well versed in implementing new javascript, but I can get into the code and plug and play if I know where to look.

I downloaded the code from a WAB application, would I be looking in the widgets\Search\widget.js folder? If so, where to go from there?

0 Kudos
AdrianWelsh
MVP Honored Contributor

Honestly, I am not entirely sure without seeing all of it together (and maybe not sure then either). I just did a little training once where I was 'taught' how to change that particular line of code in order to change the color of the highlighted box around a selected feature.

I was modifying this code in the Esri sandbox:

ArcGIS API for JavaScript Sandbox

Under

      require([

    you have to add

"esri/Color",

Under

      ], function(:

    you have to add

Color,

Then under

          var map = response.map;

is where you add this line (with whatever color you choose)

map.infoWindow.markerSymbol.outline.color = new Color("purple");

So, the bottom line is, if you see js code that is similar to the code in the sandbox link I posted above, that is where you would modify the these elements. I am not sure if the widget.js code would have that kind of code. I hope this helps!

RobertScheitlin__GISP
MVP Emeritus

Lee,

  If you are talking about you developed your app on AGOL and then downloaded and deployed to your web server than this task is going to be more difficult as the code is minified when you download the app from AGOL. You can add the code that Adrian is providing in the Search widgets js file, but I like to make changes to the maps infowindow in the MapManager.js file instead.

I would add the code after this line in the MapManager.js:

map.infoWindow.resize(270, 316);
map.infoWindow.fillSymbol,outline.color = new Color("purple");

And as Adrian mentioned you will need to add the 'esri/Color' require at the top of the MapManager.js file as well.