topic Re: Change the highlight symbol for a selection in ArcGIS Web AppBuilder Questions

Change the highlight symbol for a selection

NathanielRoth — Wed, 12 Aug 2015 18:13:08 GMT

Is it possible to change the symbol used to highlight a feature that has been clicked on (i.e. to show the popup info)? I can see and edit the symbols live through the debugger, but haven't been able to figure out where to make changes so that they'll be permanent.

On a related note, is there a preferred location for setting custom css properties to override existing ones?

I'm currently using Web AppBuilder-Developer's Edition 1.1.

Thanks,

Re: Change the highlight symbol for a selection

RobertScheitlin__GISP — Fri, 10 Dec 2021 21:53:40 GMT

Nathaniel,

You can change the selection symbol in the MapManager.js

Here is the block of code (line 32, of course you would need to add the SimpleFillSymbol require as well):

_show2DWebMap: function(appConfig) {
        //should use appConfig instead of this.appConfig, because appConfig is new.
        // if (appConfig.portalUrl) {
        //  var url = portalUrlUtils.getStandardPortalUrl(appConfig.portalUrl);
        //  agolUtils.arcgisUrl = url + "/sharing/content/items/";
        // }
        if(!appConfig.map.mapOptions){
          appConfig.map.mapOptions = {};
        }
        var mapOptions = this._processMapOptions(appConfig.map.mapOptions) || {};
        mapOptions.isZoomSlider = false;

        var webMapPortalUrl = appConfig.map.portalUrl;
        var webMapItemId = appConfig.map.itemId;
        var webMapOptions = {
          mapOptions: mapOptions,
          bingMapsKey: appConfig.bingMapsKey,
          usePopupManager: true
        };

        var mapDeferred = jimuUtils.createWebMap(webMapPortalUrl, webMapItemId,
          this.mapDivId, webMapOptions);

        mapDeferred.then(lang.hitch(this, function(response) {
          var map = response.map;

          //hide the default zoom slider
          map.hideZoomSlider();

          // set default size of infoWindow.
          map.infoWindow.resize(270, 316);
          map.infoWindow.fillSymbol = new SimpleFillSymbol();
          //var extent;
          map.itemId = appConfig.map.itemId;
          map.itemInfo = response.itemInfo;
          map.webMapResponse = response;
          // enable snapping
          var options = {
            snapKey: keys.copyKey
          };
          map.enableSnapping(options);

          html.setStyle(map.root, 'zIndex', 0);
          this._publishMapEvent(map);
        }), lang.hitch(this, function() {
          if (this.loading) {
            this.loading.destroy();
          }
          topic.publish('mapCreatedFailed');
        }));
      },

Re: Change the highlight symbol for a selection

NathanielRoth — Fri, 10 Dec 2021 21:53:43 GMT

Thank you so much, and in case anyone else wants to run with it, here's what I did starting with Robert's hint to make the identified polygons have a red boarder and red tint fill, and points have a red circle with a slightly darker red background.

map.infoWindow.fillSymbol = new SimpleFillSymbol({
  "type": "esriSFS",
  "style": "esriSFSSolid",
  "color": [255,0,0,25],
  "outline": {
     "type": "esriSLS",
     "style": "esriSLSSolid",
     "color": [255,0,0,255],
     "width": 2
     }
  });
  map.infoWindow.markerSymbol = new SimpleMarkerSymbol({
  "color": [255,0,0,64],
  "size": 15,
  "angle": -30,
  "xoffset": 0,
  "yoffset": 0,
  "type": "esriSMS",
  "style": "esriSMSCircle",
  "outline": {
    "color": [255,0,0,255],
    "width": 2,
    "type": "esriSLS",
    "style": "esriSLSSolid"
    }
  });

Re: Change the highlight symbol for a selection

AveKargaja — Tue, 27 Oct 2015 07:14:18 GMT

Looks promising, though does not work in my case as expected (WebAppBuilder 1.2).

Is that all you inserted to MapManager.js to the place Robert referred or was there anything else that you did?

Re: Change the highlight symbol for a selection

RobertScheitlin__GISP — Tue, 27 Oct 2015 13:17:01 GMT

Ramon,

Did you remember to add the proper requires to the MapManager.js for the types of symbols you are using?

Re: Change the highlight symbol for a selection

AveKargaja — Tue, 27 Oct 2015 13:32:47 GMT

Robert,

This is the most probable reason because I am a beginner codewriter and I must say that I have no idea where to add the requires to the MapManager.js and how they should look like.

Re: Change the highlight symbol for a selection

RobertScheitlin__GISP — Fri, 10 Dec 2021 21:53:46 GMT

Ramon,

It would look like this (notice the addition of SimpleFillSymbol and SimpleMarkerSymbol):

define(['dojo/_base/declare',
  'dojo/_base/lang',
  'dojo/_base/array',
  'dojo/_base/html',
  'dojo/topic',
  'dojo/on',
  'dojo/aspect',
  'dojo/keys',
  'esri/dijit/InfoWindow',
  "esri/dijit/PopupMobile",
  'esri/InfoTemplate',
  'esri/request',
  'esri/geometry/Extent',
  'esri/geometry/Point',
  'require',
  './utils',
  './dijit/LoadingShelter',
  'esri/symbols/SimpleFillSymbol',
  'esri/symbols/SimpleMarkerSymbol'
], function(declare, lang, array, html, topic, on, aspect, keys, InfoWindow,
  PopupMobile, InfoTemplate, esriRequest, Extent, Point, require,
  jimuUtils, LoadingShelter, SimpleFillSymbol, SimpleMarkerSymbol) {

Re: Change the highlight symbol for a selection

AveKargaja — Tue, 27 Oct 2015 13:50:02 GMT

Thank You, Robert, this is just what I needed.

Re: Change the highlight symbol for a selection

AveKargaja — Fri, 18 Dec 2015 13:16:43 GMT

Coming back to the topic, then this suggested solution works very well on desktop layout, but as soon as the app switches to mobile version, then the highlight symbol is again the defaul "blue". Any ideas?

Re: Change the highlight symbol for a selection

RobertScheitlin__GISP — Fri, 10 Dec 2021 21:53:49 GMT

Ramon,

That is because the mobile version uses a different popup and thus you have to set the popup symbology for that popup.

In the MapManager.js

resetInfoWindow: function(isNewMap) {
        if(isNewMap){
          this._mapInfoWindow = this.map.infoWindow;
          if(this._mapMobileInfoWindow){
            this._mapMobileInfoWindow.destroy();
          }
          this._mapMobileInfoWindow =
          new PopupMobile(null, html.create("div", null, null, this.map.root));
          this.isMobileInfoWindow = false;
        }
        if (window.appInfo.isRunInMobile && !this.isMobileInfoWindow) {
          this.map.infoWindow.hide();
          this.map.setInfoWindow(this._mapMobileInfoWindow);
          this.isMobileInfoWindow = true;
        } else if (!window.appInfo.isRunInMobile && this.isMobileInfoWindow) {
          this.map.infoWindow.hide();
          this.map.setInfoWindow(this._mapInfoWindow);
          this.isMobileInfoWindow = false;
        }
        this.map.infoWindow.fillSymbol = new SimpleFillSymbol({
          "type": "esriSFS",
          "style": "esriSFSSolid",
          "color": [255,0,0,25],
          "outline": {
             "type": "esriSLS",
             "style": "esriSLSSolid",
             "color": [255,0,0,255],
             "width": 2
             }
        });
        this.map.infoWindow.markerSymbol = new SimpleMarkerSymbol({
          "color": [255,0,0,64],
          "size": 15,
          "angle": -30,
          "xoffset": 0,
          "yoffset": 0,
          "type": "esriSMS",
          "style": "esriSMSCircle",
          "outline": {
            "color": [255,0,0,255],
            "width": 2,
            "type": "esriSLS",
            "style": "esriSLSSolid"
            }
        });
      },

Re: Change the highlight symbol for a selection

AveKargaja — Mon, 21 Dec 2015 06:51:22 GMT

Thank You once again, Robert Scheitlin, GISP

Re: Change the highlight symbol for a selection

LeeAllen — Mon, 23 May 2016 23:00:22 GMT

Does this work the same in WAB 2.0? As soon as I add the esri/simple fill symbol to the code and save, the app is blank??

Re: Change the highlight symbol for a selection

RobertScheitlin__GISP — Mon, 23 May 2016 23:14:43 GMT

Lee,

You are missing the comma behind the './PopupManager', the requires are comma separated list so the app is seeing something after './PopupManager' and does not see a comma and thus this is a syntax error.

Re: Change the highlight symbol for a selection

LeeAllen — Tue, 24 May 2016 13:14:02 GMT

Thank you Robert, I've been staring at code all day and this was my last endeavor... The thread is exactly what I needed!

Re: Change the highlight symbol for a selection

LeeAllen — Tue, 24 May 2016 16:03:47 GMT

Robert,

I have the code working correctly, but need one more adjustment. I have tried fruitlessly this morning to set the fill to 100 % transparent and can't seem to find the correct reference. I tried using "style": "esriSFSNull" which does not seem to work. Here is my current code that still puts a red fill with my updated yellow line (the red fill looks about 50% transparent??).

map.infoWindow.fillSymbol = new SimpleFillSymbol({

"type": "esriSFS",

"style": "esriSFSSolid",

"color": [0,0,0,0],

"outline": {

"type": "esriSLS",

"style": "esriSLSSolid",

"color": [255,255,51,255],

"width": 5

}

});

Re: Change the highlight symbol for a selection

RobertScheitlin__GISP — Tue, 24 May 2016 16:08:35 GMT

Lee,

Use:

"style": "esriSFSNull",

Re: Change the highlight symbol for a selection

ChristopherJohnson1 — Fri, 12 May 2017 18:54:20 GMT

Robert, thanks for taking the time to give back to the community! Your responses are always RIGHT on!!!

Re: Change the highlight symbol for a selection

PatrickThorsell — Mon, 07 Aug 2017 19:24:51 GMT

Robert,

Will these changes work for WAB 2.4?

Thanks!

Re: Change the highlight symbol for a selection

RobertScheitlin__GISP — Mon, 07 Aug 2017 19:41:58 GMT

Should work just fine.

Re: Change the highlight symbol for a selection

PatrickThorsell — Mon, 07 Aug 2017 20:05:37 GMT

I'm still getting the default after making the changes.

Will this work if pop-ups are disabled? I have simplefillsymbol in my requires.

----

map.infoWindow.resize(270, 316);
map.infoWindow.fillSymbol = new SimpleFillSymbol({
"type": "esriSFS",
"style": "esriSFSNull",
"color": [255,0,0,255],
"outline": {
"type": "esriSLS",
"style": "esriSLSSolid",
"color": [255,0,0,255],
"width": 2
}
});