AnsweredAssumed Answered

Can I display current scale in web app builder application?

Question asked by bkeinath on Feb 20, 2015
Latest reply on Sep 11, 2017 by ciava.at

Like • Show 2 Likes2
Comment • 36

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

timw1984

Feb 20, 2015 10:01 AM

Correct Answer

This one shows the scale from the start.

My first code didn't show the scale because it only changed the innerhtml when the extend changed. Now it populates the innerhtml on startup.

See the reply in context

1 person had this question

Outcomes

36 Replies

timw1984 Feb 20, 2015 5:16 AM
Mark Correct
Correct Answer
Hey Brandon,

there is already a widget included that shows the scale. If you click on widgets when you create your map look for Scalebar.

Tim
2 people found this helpful
Like • Show 0 Likes0
Actions
timw1984 Feb 20, 2015 5:18 AM
Mark Correct
Correct Answer
Looking at it, it seems buggy to me.
Like • Show 0 Likes0
Actions
- bkeinath @ timw1984 on Feb 20, 2015 5:24 AM
  Mark Correct
  Correct Answer
  Hi Tim,
  
  Thanks for the quick reply. I see the scalebar widget now, but I guess 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?
  
  Thanks,
  
  Brandon
  Like • Show 0 Likes0
  Actions
  - timw1984 @ bkeinath on Feb 20, 2015 5:35 AM
    Mark Correct
    Correct Answer
    Brandon,
    
    You could create a widget and then use the following to get the map scale:
    
    esri/geometry/scaleUtils | API Reference | ArcGIS API for JavaScript
    
    Here you can learn how to build a widget:
    
    Naming conventions—Web AppBuilder for ArcGIS | ArcGIS
    
    Hope this helps!
    
    Tim
    Like • Show 0 Likes0
    Actions
    - rastrauch @ timw1984 on Feb 20, 2015 6:25 AM
      Mark Correct
      Correct Answer
      I Would like to see this as well.
      
      since we have to use a Basemap From AGOL, and I'm assuming this is always tiled and therefore has the scales set, is there maybe a way to grab apnd display without a separate widget? Maybe a tweak to the current on?
      
      As for zooming to a set scale....I know if flex there was a way to get the more detailed (older style) zoom slider. Is therea way to do that? (Not at a place I can test right now)
      Like • Show 1 Like1
      Actions
      - timw1984 @ rastrauch on Feb 20, 2015 6:28 AM
        Mark Correct
        Correct Answer
        Rebecca,
        
        good idea. You should be able to just add it to the current scale widget.
        
        Tim
        Like • Show 0 Likes0
        Actions
        bkeinath @ timw1984 on Feb 20, 2015 6:52 AM
        Mark Correct
        Correct Answer
        Tim,
        
        Am I understanding your reply that instead of building a new custom widget I could just modify the code for the scalebar widget using the api reference you sent previously? If so this is something I could take a look at. I've been trying to find an approachable project related to the api.
        
        Thanks,
        
        Brandon
        Like • Show 0 Likes0
        Actions
        timw1984 @ bkeinath on Feb 20, 2015 7:29 AM
        Mark Correct
        Correct Answer
        Brandon,
        
        Here is something I have prepared quickly (It is not the best looking).
        
        Just replace the coordinate folder in your widget folder with the attached file.
        
        You should see the scale below the map coordinates when you zoom/pan.
        
        Let me know if it works.
        
        Tim
        Attachments
        Coordinate.zip83.2 KB
        8 people found this helpful
        Like • Show 5 Likes5
        Actions
        bkeinath @ timw1984 on Feb 20, 2015 9:51 AM
        Mark Correct
        Correct Answer
        Thanks Tim!
        
        Looks great to me. My only critique would be that when it first loads it says "Your Scale". Is that because my default scale is in between the esri default scales?
        Like • Show 0 Likes0
        Actions
        timw1984 @ bkeinath on Feb 20, 2015 10:01 AM
        Unmark Correct
        Correct Answer
        This one shows the scale from the start.
        
        My first code didn't show the scale because it only changed the innerhtml when the extend changed. Now it populates the innerhtml on startup.
        Attachments
        Coordinate (2).zip83.2 KB
        12 people found this helpful
        Like • Show 6 Likes6
        Actions
        bkeinath @ timw1984 on Feb 20, 2015 10:11 AM
        Mark Correct
        Correct Answer
        Awesome! Worked like a charm Tim. Thank you so much for your help and the widget. A general question now: I know there is another area for custom WAB widgets. Can I post this there with a link to this discussion or how would you like it handled. I guess you could summarize my question like "I like this and I think others will too, what do I do now on geonet?"
        
        Thanks,
        
        Brandon
        Like • Show 0 Likes0
        Actions
        rastrauch @ bkeinath on Feb 20, 2015 10:18 AM
        Mark Correct
        Correct Answer
        Thanks Brandon and Tim....Good question and quick answer.
        
        FYI - I'm working on a list of the various WAB-DEV customization and custom widgets I've found and posting later today with my other WAB docs. I'll make sure to include this, fwiw.
        Like • Show 0 Likes0
        Actions
        rscheitlin @ rastrauch on Feb 20, 2015 10:22 AM
        Mark Correct
        Correct Answer
        Rebecca,
        
           I was about to do just that today. But if you had that Idea too then I will go back to my development efforts instead. Here is the widget list I have compiled thus far.
        
        Share
        https://community.esri.com/docs/DOC-3247
        
        eSearch
        https://community.esri.com/docs/DOC-1731
        
        Google Streetview
        https://community.esri.com/docs/DOC-2991
        
        Enhanced Basemap Gallery
        https://community.esri.com/docs/DOC-2888
        
        Measure
        https://community.esri.com/docs/DOC-3209
        
        Location
        https://community.esri.com/docs/DOC-3262
        
        URL/extent tracking
        https://community.esri.com/thread/121825
        
        Local Layer widget and Accessifizr widget
        https://community.esri.com/thread/119548
        
        It seems like I had seen another but I can't find it if there was.
        2 people found this helpful
        Like • Show 6 Likes6
        Actions
        rastrauch @ rscheitlin on Feb 20, 2015 10:30 AM
        Mark Correct
        Correct Answer
        Thanks Robert. I'll include your list. Those that can, code....those that can't (as well), document.
        2 people found this helpful
        Like • Show 1 Like1
        Actions
        timw1984 @ bkeinath on Feb 20, 2015 10:18 AM
        Mark Correct
        Correct Answer
        Brandon,
        
        Since more than you seem to be liking this, I will create a thread in the custom widget Place and I will probably make it look a little nicer
        
        Let me know if you have any questions!
        
        Tim
        Like • Show 3 Likes3
        Actions
        andrew@sehts.com @ timw1984 on May 13, 2016 11:43 AM
        Mark Correct
        Correct Answer
        Hi Tim,
        I replaced my original Coordinate folder with the one you provided above to get the scale. This is great! However, I'm using WAB 2.0 and noticed that the scale now sits on top of the scale bar and loses the darker WAB 2.0 Coordinate style that makes the coordinates more pronounced. Thoughts?
        
        Thanks,
        Andrew
        Like • Show 0 Likes0
        Actions
        timw1984 @ andrew@sehts.com on May 13, 2016 12:16 PM
        Mark Correct
        Correct Answer
        Andrew,
        
        try this one.
        
        Tim
        Attachments
        Coordinate.zip90.0 KB
        2 people found this helpful
        Like • Show 1 Like1
        Actions
        andrew@sehts.com @ timw1984 on May 13, 2016 12:58 PM
        Mark Correct
        Correct Answer
        That did it! Thanks Tim!!
        Like • Show 0 Likes0
        Actions
        william.miller_WarrenCoGIS @ timw1984 on Jun 1, 2016 8:34 AM
        Mark Correct
        Correct Answer
        Hi Tim,
        Is there a way to add the scale to the HeaderController bar/widget? Not the coordinates, just the scale (Scale: 1:180,000).
        I think I found most of the code you added to the coordinate widget (below), but I'm not quite sure how to implement it, or if it will work from the HeaderController widget.
        
        HTML
        <div data-dojo-attach-point="scaleInfo" class="coordinate-scale jimu-float-leading">
        Your scale
        </div>
        CSS
        .jimu-widget-coordinate #scaleInfo{ display: inline; } /*needed*/ .jimu-widget-coordinate .coordinate-background{ line-height: 17px; overflow: hidden; font-size: 10px; color: #fff; background-color: rgb(0,0,0);/*for ie8*/ background-color: rgba(0,0,0,0.5); }
        JavaScript
        //added to define "dojo/html", 'dojo/number', //added to function htmlSet, dojoNumber, //added to startup 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); console.log("Got it"); };
        
        If I were to add the above code to the HeaderController widget, it looks like I'd need to also include the following
        CSS
        .jimu-widget-coordinate .coordinate-background{ line-height: 17px; overflow: hidden; font-size: 10px; color: #fff; background-color: rgb(0,0,0);/*for ie8*/ background-color: rgba(0,0,0,0.5); }
        JavaScript
        //needed for define "dojo/dom-class", //needed for function domClass, //needed for postCreate domClass.add(this.coordinateBackground, "coordinate-background");                            //I'm not sure what to reference here this.own(on(this.map, "extent-change", lang.hitch(this, this.onExtentChange)));
        
        Thanks for any help you can provide.
        William
        Like • Show 0 Likes0
        Actions
        william.miller_WarrenCoGIS @ timw1984 on Jun 2, 2016 6:18 AM
        Mark Correct
        Correct Answer
        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
        Like • Show 0 Likes0
        Actions
        timw1984 @ william.miller_WarrenCoGIS on Jun 7, 2016 5:53 AM
        Mark Correct
        Correct Answer
        Hey William,
        
        It seems like your "extent-change" event isn't called. Do you get any error messages?
        
        Tim
        Like • Show 0 Likes0
        Actions
        william.miller_WarrenCoGIS @ timw1984 on Jun 7, 2016 6:14 AM
        Mark Correct
        Correct Answer
        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
        Like • Show 0 Likes0
        Actions
        timw1984 @ william.miller_WarrenCoGIS on Jun 7, 2016 6:21 AM
        Mark Correct
        Correct Answer
        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?
        Like • Show 0 Likes0
        Actions
        william.miller_WarrenCoGIS @ timw1984 on Jun 7, 2016 8:01 AM
        Mark Correct
        Correct Answer
        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
        Like • Show 0 Likes0
        Actions
        timw1984 @ william.miller_WarrenCoGIS on Jun 7, 2016 8:23 AM
        Mark Correct
        Correct Answer
        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.
        Like • Show 0 Likes0
        Actions
        timw1984 @ william.miller_WarrenCoGIS on Jun 7, 2016 8:39 AM
        Mark Correct
        Correct Answer
        William,
        
        this works for me (code wise). You will still need to style it to fit your needs.
        
        Tim
        Attachments
        Widget.zip7.9 KB
        Like • Show 1 Like1
        Actions
        william.miller_WarrenCoGIS @ timw1984 on Jun 7, 2016 9:00 AM
        Mark Correct
        Correct Answer
        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
        Like • Show 0 Likes0
        Actions
        timw1984 @ william.miller_WarrenCoGIS on Jun 7, 2016 9:05 AM
        Mark Correct
        Correct Answer
        You could give it an id and style it like that.
        Like • Show 0 Likes0
        Actions
        william.miller_WarrenCoGIS @ timw1984 on Jun 7, 2016 9:18 AM
        Mark Correct
        Correct Answer
        That works. Thanks again for your help Tim!
        Like • Show 0 Likes0
        Actions
        CCweedcontrol @ timw1984 on Mar 9, 2017 10:34 AM
        Mark Correct
        Correct Answer
        How do you add this to WAB 2.3?
        Like • Show 0 Likes0
        Actions
        Babatope.Adebajo@hertfordshire.gov.uk_hertscc @ CCweedcontrol on Mar 10, 2017 3:18 AM
        Mark Correct
        Correct Answer
        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
        2 people found this helpful
        Like • Show 0 Likes0
        Actions
        CCweedcontrol @ Babatope.Adebajo@hertfordshire.gov.uk_hertscc on Mar 14, 2017 11:59 AM
        Mark Correct
        Correct Answer
        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.
        Posting code with Syntax Highlighting on GeoNet
        Like • Show 0 Likes0
        Actions
        william.miller_WarrenCoGIS @ CCweedcontrol on Mar 16, 2017 5:53 AM
        Mark Correct
        Correct Answer
        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>  <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>              <div data-dojo-attach-point="scaleInfo" class="coordinate-scale jimu-float-leading" id="addedForScale"></div>              <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...
        1 person found this helpful
        Like • Show 1 Like1
        Actions
        CCweedcontrol @ william.miller_WarrenCoGIS on Mar 15, 2017 3:01 PM
        Mark Correct
        Correct Answer
        I made the changes you posted but i do not see the scale at all.
        Like • Show 0 Likes0
        Actions
        william.miller_WarrenCoGIS @ CCweedcontrol on Mar 16, 2017 5:52 AM
        Mark Correct
        Correct Answer
        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
        Attachments
        eFoldableTheme.zip108.1 KB
        Like • Show 0 Likes0
        Actions
ciava.at Sep 11, 2017 12:38 AM
Mark Correct
Correct Answer
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..."
Like • Show 0 Likes0
Actions

GeoNet

The Esri Community

Can I display current scale in web app builder application?

Outcomes

Attachments

Attachments

Attachments

Attachments

Attachments

Related Content

Recommended Content

Incoming Links