Change the highlight symbol for a selection

9283
29
Jump to solution
08-12-2015 11:13 AM
NathanielRoth
New Contributor III

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,

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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

View solution in original post

29 Replies
RobertScheitlin__GISP
MVP Emeritus

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
New Contributor III

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
Occasional Contributor

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?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Ramon,

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

0 Kudos
AveKargaja
Occasional Contributor

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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
Occasional Contributor

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

0 Kudos
LeeAllen
Occasional Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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.