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
