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
Solved! Go to Solution.
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
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.
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.
Thanks Robert. I'll include your list. Those that can, code....those that can't (as well), document.
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
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
That did it! Thanks Tim!!
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