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.
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
Hey William,
It seems like your "extent-change" event isn't called. Do you get any error messages?
Tim
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
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?
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
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.
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
You could give it an id and style it like that.
That works. Thanks again for your help Tim!