Adding a Scale Bar to Flex Map Printing Utility?

[RickyGonzalez]

I am working with the Flex Map Printing Utility from the sample gallery and I would like to add a scale bar to the footer.  Is it possible to create and display a scale bar if you have the map scale?  If it is possible can some one post example code of creating a scale bar?

Any help would be appreciated.

[JoshV]

did you have any luck?  I'm hoping to print to scale using flex too

[RickyGonzalez]

did you have any luck?  I'm hoping to print to scale using flex too

I did have some luck, but I didn't get the results I wanted.  Here is another thread I started with more information and screen shots

http://forums.arcgis.com/threads/6228-PrintMapUtil-help-needed

I was told by someone who took the Flex training class this past weekend at the ESRI User Conference is that in Flex version 1 and Arc 9.3.x you are not able to reposition the scale bar, but in Flex version 2 and Arc 10 you are able to.  In my situation I think it will solve the problem whenever my system is upgraded.

[ReneRubalcava]

You can make a new Scalebar, copy it's attributes and place it in the footer or anywhere else on your map. You'd need create a new scalebar skin, which I have not done yet, but ESRI provides the current skins with the API, which is a big help. This is because you need to scale the scalebar to the print page size and just setting the height/width doesn't work. Granted, I have not gotten this far though, so not sure.

To copy the scalebar, you can do something like this.

var i:uint = 0;
var x:uint = map.staticLayer.numChildren;
for (i; i < x; i++) {
 trace("What is this object? {0}", map.staticLayer.getChildAt(i));
 if (map.staticLayer.getChildAt(i) is ScaleBar) {
  trace("found the scale bar!");
  var s:ScaleBar = new ScaleBar();
  s.map = (map.staticLayer.getChildAt(i) as ScaleBar).map;
  s.lengthMetric = (map.staticLayer.getChildAt(i) as ScaleBar).lengthMetric;
  s.lengthUS = (map.staticLayer.getChildAt(i) as ScaleBar).lengthUS;
  s.textMetric = (map.staticLayer.getChildAt(i) as ScaleBar).textMetric;
  s.textUS = (map.staticLayer.getChildAt(i) as ScaleBar).textUS;
  // you can adjust the bottom/left/top/right values of the map scalebar too
  s.bottom = 25;
  s.left = 5;
  this.addElement(s);
 }
}

I copied the attributes of the scalebar, rather than copy it because if I do change the skin or figure out how to scale it, passing it would be reflected in the scalebar on the map, so make sure you copy it.
That's as far as I've gotten so far. I'd love to hear some other solutions.

edited, because yes, you can capture the scalebar, it's just tricky as Ricky showed above because of the size of the browser window.

Ok, so I figured out how to move the scalebar before the image of the map is captured.

map.zoomSliderVisible = false;
map.addEventListener(FlexEvent.UPDATE_COMPLETE, onUpdateComplete_handler);
var i:uint = 0;
var x:uint = map.staticLayer.numChildren;
for (i; i < x; i++) {
 trace("What is this object? {0}", map.staticLayer.getChildAt(i));
 if (map.staticLayer.getChildAt(i) is ScaleBar) {
  trace("found the scale bar! left =", (map.staticLayer.getChildAt(i) as ScaleBar).left);
  // move it into a position that works for you
  (map.staticLayer.getChildAt(i) as ScaleBar).left += 200;
 }
}
function onUpdateComplete_handler(e:FlexEvent):void {
 map.removeEventListener(FlexEvent.UPDATE_COMPLETE, onUpdateComplete_handler);
 mapImage.source = PrintMapUtil.trimmedMap(map, mapImage.width, mapImage.height);
 var j:uint = 0;
 for (j; j < x; j++) {
  trace("What is this object? {0}", map.staticLayer.getChildAt(j));
  if (map.staticLayer.getChildAt(j) is ScaleBar) {
   // move it back, 5 is the default
   (map.staticLayer.getChildAt(j) as ScaleBar).left = 5;
  }
 }
 map.zoomSliderVisible = true;
}

That's tested and works with PrintMapUtil and API2.0.
Well, that was fun, now back to work.

[DasaPaddock]

Version 2 of the API still supports ArcGIS Server 9.3. Also, in version 2, you can now place the ScaleBar like any other component outside of the Map.

e.g.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:esri="http://www.esri.com/2008/ags">

    <s:layout>
        <s:VerticalLayout horizontalAlign="center"/>
    </s:layout>

    <esri:Map id="map" scaleBarVisible="false">
        <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
    </esri:Map>

    <esri:ScaleBar map="{map}"/>
    
</s:Application>

[ReneRubalcava]

Well, that's much simpler than my initial approach 😮
In my example above, it's probably simpler making your own ScaleBar, add it to the StaticLayer, print, then remove it. Probably three extra lines of code as opposed to that massive loop I had.

Dasa, if I wanted to change the size of the scalebar used outside the map, that can be done with a new Skin correct?

[MichaelHaggerty]

Has anybody had success skinning the scale bar?  When I try to create a new MXML Skin as a copy of com.esri.ags.skins.ScaleBarSkin, I get the error: "The source for the skin "{0}" cannot be found."

Also, I'm having trouble setting the lengthUS, lengthMetric, and width properties.  It seems as if the scalebar component doesn't respect those properties at all.

Thanks,
Mike

[MehulChoksey]

Has anybody had success skinning the scale bar?  When I try to create a new MXML Skin as a copy of com.esri.ags.skins.ScaleBarSkin, I get the error: "The source for the skin "{0}" cannot be found."

You need to configure your Flash builder.
Look at Dasa's post here: http://forums.arcgis.com/threads/28487-PopUps#10

Also see Custom scalebar skin sampel at:
http://help.arcgis.com/en/webapi/flex/samples/index.html?sample=ScaleBarSample

[AnshulMantri1]

Hi Robert,

My Query is i want to print a scale par in my report. This scale bar will be taking the current scale details of my map. The problem is that i have created a report to print and i need to show the scale-bar in this report. how can i achieve this..?

for reference my report page is attached below.. and the Red box indicates the place where i need a scale-bar..


Regards
Anshul