Change the highlight symbol for a selection

[NathanielRoth]

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,

[RobertScheitlin__GISP · Accepted solution]

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');
        }));
      },

[NathanielRoth]

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"
    }
  });

[AveKargaja]

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?

[RobertScheitlin__GISP]

Ramon,

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

[AveKargaja]

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.

[RobertScheitlin__GISP]

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) {

[AveKargaja]

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

[LeeAllen]

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??

[RobertScheitlin__GISP]

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.