Can I display current scale in web app builder application?

[BrandonKeinath1]

I would like to display the current map scale to the user in a web app builder application.  Is this possible using a widget or does it require additional code?

If it requires additional code has anyone done this successfully and could share some resources/hints?

Update:

I should have been more specific in my question.  I'm interested in knowing if the user is at 12,345 or 1,128 rather than giving them the ability to measure using a scalebar.  My goal is to have some way to know when a user is asking why they can't see a layer to be able to tell them how far to go in.  Or if they say that it needs to be visible at a certain scale I can quickly make the change rather than educated guessing.  Is there another way to accomplish this goal?

Message was edited by: Brandon Keinath

[WilliamMiller4]

Hi Tim,

I have the scale in the header-controller widget, but it does not change with the map. It gets the initial scale of 1:180,000, but is static after startup. Below is what the postCreate and startup functions look like:

      postCreate: function() {
        this.inherited(arguments);
        this._processGroupSetting();
        this.switchableElements.title = this.titleNode;
        this.switchableElements.links = this.linksNode;
        this.switchableElements.subtitle = this.subtitleNode;
        domClass.add(this.scaleInfo, "coordinate-background"); //I'm not sure what to reference here
        this.own(on(this.map, "extent-change", lang.hitch(this, this.onExtentChange)));//added for scale
        if (this.position && this.position.height) {
          this.height = this.position.height;
        }
        // if (!this.appConfig.portalUrl) {
        html.setStyle(this.signInSectionNode, 'display', 'none');
        // } else {
        //   html.setStyle(this.signInSectionNode, 'display', '');
        // }
        if (this.appConfig && this.appConfig.logo) {
          this.logoNode.src = this.appConfig.logo;
          html.removeClass(this.logoNode, 'hide-logo');
        } else {
          this.logoNode.src = "";
          html.addClass(this.logoNode, 'hide-logo');
        }
        this.switchableElements.title.innerHTML =
          utils.sanitizeHTML(this.appConfig.title ? this.appConfig.title : '');
        this.switchableElements.subtitle.innerHTML =
          utils.sanitizeHTML(this.appConfig.subtitle ? this.appConfig.subtitle : '');
        this._createDynamicLinks(this.appConfig.links);
        this._setElementsSize();
        this.own(on(this.domNode, mouse.enter, lang.hitch(this, function() {
          var title = '';
          var portalUrl = this.appConfig && this.appConfig.portalUrl || '';
          var server = portalUrlUtils.getServerByUrl(portalUrl);
          if (portalUrlUtils.isArcGIScom(server)) {
            server = 'ArcGIS.com';
          }
          if (server) {
            title = this.nls.signInTo + ' ' + server;
          }
          this.signinLinkNode.title = title;
        })));
      },
      startup: function() {
          this.inherited(arguments);
          var MyMap = this.map; //start of addition for scale
          var MyScaleWindow = this.scaleInfo.innerHTML;
          var MyScaleTest = this.scaleInfo;
          var scale = esri.geometry.getScale(MyMap);
          var myNumber = dojoNumber.format(scale, {
              places: 0
          });
          htmlSet.set(MyScaleTest, "Scale: 1 : " + myNumber);
          this.map.on("extent-change", getmyscale);
          function getmyscale() {
              var scale = esri.geometry.getScale(MyMap);
              var myNumber = dojoNumber.format(scale, {
                  places: 0
              });
              htmlSet.set(MyScaleTest, ", Scale: 1 : " + myNumber);
              console.log("Got it");
          }; //end of addition for scale
        this.resize();
        // this.timeoutHandle = setTimeout(lang.hitch(this, this.resize), 100);
      },

Any help would be appreciated, even if it's to tell me the scale cannot go in the header-controller widget. Thanks.

William

[TimWitt2]

Hey William,

It seems like your "extent-change" event isn't called. Do you get any error messages?

Tim

[WilliamMiller4]

Hi Tim,

I don't get any error messages. How and where would I call the extent-change? Would I use something like this

this.onExtentChange.startup();

in postCreate or startup?

Thanks,

William

[TimWitt2]

Line 53  will call your getmyscale function. Can you open the developer console and put a breakpoint at line 55 and see if it runs when you change your scale?

[WilliamMiller4]

Hi Tim,

I'm using Microsoft Visual Studio 2010 as my main text editor. When I add a breakpoint and debug, I get a directory list for the project. I know Visual Studio isn't ideal for javascript, but that's what I have right now. Are there any free applications you recommend for working with Web AppBuilder? I'm also trying to debug in different browsers (IE, Firefox & Chrome). Right now I'm getting a few errors, but none of them seem related to the HeaderController Widget.js.

William

[TimWitt2]

I like to use chrome to debug. Just open the developer tools and navigate to the code that you changed and add a break point. Now if you zoom in and out it should pause your code.

[TimWitt2]

William,

this works for me (code wise). You will still need to style it to fit your needs.

Tim

[WilliamMiller4]

Tim,

I guess I didn't need to add the following to postCreate.

domClass.add(this.scaleInfo, "coordinate-background");
this.own(on(this.map, "extent-change", lang.hitch(this, this.onExtentChange)));

What CSS class do I reference for styling? Before I had used ".jimu-widget-header-controller .coordinate-scale jimu-float-leading".

Thanks for your help.

William

[TimWitt2]

You could give it an id and style it like that.

[WilliamMiller4]

That works. Thanks again for your help Tim!