topic Re: Can I display current scale in web app builder application? in ArcGIS Web AppBuilder Questions

Can I display current scale in web app builder application?

BrandonKeinath1 — Fri, 20 Feb 2015 13:07:25 GMT

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

Re: Can I display current scale in web app builder application?

TimWitt2 — Fri, 20 Feb 2015 13:16:25 GMT

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

Re: Can I display current scale in web app builder application?

TimWitt2 — Fri, 20 Feb 2015 13:18:15 GMT

Looking at it, it seems buggy to me.

Re: Can I display current scale in web app builder application?

BrandonKeinath1 — Fri, 20 Feb 2015 13:24:42 GMT

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

Re: Can I display current scale in web app builder application?

TimWitt2 — Fri, 20 Feb 2015 13:35:43 GMT

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

Re: Can I display current scale in web app builder application?

RebeccaStrauch__GISP — Fri, 20 Feb 2015 14:25:16 GMT

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)

Re: Can I display current scale in web app builder application?

TimWitt2 — Fri, 20 Feb 2015 14:28:06 GMT

Rebecca,

good idea. You should be able to just add it to the current scale widget.

Tim

Re: Can I display current scale in web app builder application?

BrandonKeinath1 — Fri, 20 Feb 2015 14:52:47 GMT

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

Re: Can I display current scale in web app builder application?

TimWitt2 — Fri, 20 Feb 2015 15:29:49 GMT

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

Re: Can I display current scale in web app builder application?

BrandonKeinath1 — Fri, 20 Feb 2015 17:51:29 GMT

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?

Re: Can I display current scale in web app builder application?

TimWitt2 — Fri, 20 Feb 2015 17:59:27 GMT

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.

Re: Can I display current scale in web app builder application?

BrandonKeinath1 — Fri, 20 Feb 2015 18:11:40 GMT

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

Re: Can I display current scale in web app builder application?

RebeccaStrauch__GISP — Fri, 20 Feb 2015 18:18:41 GMT

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.

Re: Can I display current scale in web app builder application?

TimWitt2 — Fri, 20 Feb 2015 18:18:47 GMT

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

Re: Can I display current scale in web app builder application?

RobertScheitlin__GISP — Fri, 20 Feb 2015 18:22:44 GMT

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.

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.

Re: Can I display current scale in web app builder application?

RebeccaStrauch__GISP — Fri, 20 Feb 2015 18:30:01 GMT

Thanks Robert. I'll include your list. Those that can, code....those that can't (as well), document.

Re: Can I display current scale in web app builder application?

AndrewNiederhauser1 — Fri, 13 May 2016 18:43:57 GMT

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

Re: Can I display current scale in web app builder application?

TimWitt2 — Fri, 13 May 2016 19:16:05 GMT

Andrew,

try this one.

Tim

Re: Can I display current scale in web app builder application?

AndrewNiederhauser1 — Fri, 13 May 2016 19:58:32 GMT

That did it! Thanks Tim!!

Re: Can I display current scale in web app builder application?

WilliamMiller4 — Sat, 11 Dec 2021 20:17:42 GMT

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