nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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,

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

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

All comments

RobertScheitlin__GISP

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

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?

RobertScheitlin__GISP

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

AveKargaja

Thank You once again, Robert Scheitlin, GISP

ChristopherJohnson1

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

PatrickThorsell

Robert,

Will these changes work for WAB 2.4?

Thanks!

RobertScheitlin__GISP

Should work just fine.

PatrickThorsell

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

RobertScheitlin__GISP

Partrick,

No it will not work if popups are disabled. It is the popup that applies the highlight.

deleted-user-bWhhezP4R-ec

Hi Robert,

Does this still work in WAB version 2.8? I have been trying to add in a new fillSymbol, but the color of the select is not changing. There's a bunch new code at the bottom of the _show2DWebMap function than there was when this question was answered in 2015. I don't know if that has any effect.

Thank you!

deleted-user-bWhhezP4R-ec

Never mind! I was trying to do a Fill Symbol when I should have been doing a Fill Line. I can confirm, this still works in 2.8.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.