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

[CCWeedcontrol]

How do you add this to WAB 2.3?

[deleted-user-CQZbjNeBXm49]

Use a text editor to compare the current (2.3) coordinate widget and the customized widget here for both the widget.js and widget.html

Unfortunately I don't know how to do an attachment here

Baba

[CCWeedcontrol]

I am confused on if i need to copy a file to my WAB folder or just add the code of the pic you posted?

What file do you add this too?

Here is a how to post code on geonet.

https://community.esri.com/docs/DOC-8691 

[WilliamMiller4]

2CDSD 2C,

If you want the scale to be in all new applications that you create from now on, refer to this folder path:

*WAB\client\stemapp\themes\FoldableTheme\widgets\HeaderController\
*WAB = the location of your WAB installation‍‍‍‍‍‍

If you want the scale to be in a specific application that you created, refer to this folder path:

*WAB\server\apps\#\themes\FoldableTheme\widgets\HeaderController\‍
# = the number given to the application by WAB‍‍‍‍‍‍

In Widget.JS, add the following code to the startup function (lines 5-20 below).

startup: function() {
  this.inherited(arguments);
  
  //start of addition for scale
    var MyMap = this.map;
    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);
    };
  //end of addition for scale
  
  this.resize();
  // this.timeoutHandle = setTimeout(lang.hitch(this, this.resize), 100);
},‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

In Widget.HTML, add line 11 below.

<div>
  <!-- solve the bug of style delay loading -->
  <div class="header-section jimu-float-leading" data-dojo-attach-point="headerNode">
    <img class="logo jimu-float-leading jimu-leading-margin1" data-dojo-attach-point="logoNode" data-dojo-attach-event="onload:_onLogoLoad">
    <div class="titles jimu-float-leading jimu-leading-margin1" data-dojo-attach-point="titlesNode">
      <div class="jimu-title jimu-float-leading" data-dojo-attach-point="titleNode"></div>
      <div class="jimu-subtitle jimu-float-leading jimu-leading-margin5" data-dojo-attach-point="subtitleNode"></div>
    </div>
    
    <!--start of addition for scale-->
    <div data-dojo-attach-point="scaleInfo" class="coordinate-scale jimu-float-leading" id="addedForScale"></div>
    <!--end of addition for scale-->
    
    <div class="links jimu-float-leading jimu-leading-margin25" data-dojo-attach-point="linksNode">
      <div class="dynamic-section jimu-float-leading" data-dojo-attach-point="dynamicLinksNode"></div>
      <div class="signin-section jimu-float-leading" data-dojo-attach-point="signInSectionNode">
        <a href="#" class="jimu-link" data-dojo-attach-event="onclick:_onSigninClick"
        data-dojo-attach-point="signinLinkNode">${nls.signin}</a>
        <a href="" target="_blank" class="jimu-link" data-dojo-attach-event="onclick:_onUserNameClick" data-dojo-attach-point="userNameLinkNode"></a>
        <a href="#" class="jimu-link" data-dojo-attach-event="onclick:_onSignoutClick" data-dojo-attach-point="signoutLinkNode">${nls.signout}</a>
      </div>
    </div>
  </div>
  <div class="container-section jimu-float-leading" data-dojo-attach-point="containerNode"></div>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

To style the scale, go to the css\style.css file and add something like this at the end.

/*added for scale*/
#addedForScale {
  display: inline;
  line-height: 40px;
  width: 130px;
  overflow: hidden;
  font-size: 14px;
  color: #fff;
  background-color: rgb(90,102,117);/*for ie8*/
  background-color: rgba(90,102,117,0.5);
}

@media screen and (max-width:500px){
  #addedForScale{
    display: none;
  }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

NOTE: This is for adding the scale to the Foldable Theme.

Hope this helps.

William

P.S. A name is a whole lot easier to type than 2CDSD C2. Just saying...

[CCWeedcontrol]

I made the changes you posted but i do not see the scale at all.

[WilliamMiller4]

Hi 2CDSD 2C,

I've attached a theme with the changes I mentioned above. Just add this to your *WAB\client\stemapp\themes folder. Start Web AppBuilder and select eFoldableTheme from the theme panel.

This worked for me.

William

[nicogis]

Use scale bar because you can generate confusion if you see same map on computer screen, a projected big screen and printed. The paper has a dimension 'fixed' while on screen you can have dimension different of dpi, stretch monitor or projected monitor ...

"...The scale bar has three features that make it especially useful. First, it is easy to use when figuring distances on a map since most map readers are used to working with rulers. Second, if the map is enlarged or reduced using some method of photocopying or screen display, the scale bar changes size in direct proportion to the physical size of the map. The other two scale indicators 'verbal scales and representative fraction' on the other hand, will become incorrect when the map changes size. Third, both kilometers and miles can be shown conveniently on the same bar scale..."