Wednesday, February 20, 2008

Placing a label on the map

This examples shows how to place a label on the map. Actually, you can place any UIComponent. But make sure to set the width and height of the component :-)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:awx="http://www.arcwebservices.com/2007/awx"
xmlns:test="com.esri.test.*"
layout="absolute"
>
<test:LabelStyle id="labelStyle"/>
<awx:Framework apiKey="19640523"/>
<awx:Map createDefaultLayers="false">
<awx:MarkerLayer>
<test:LabelMarker geoX="45" geoY="45" style="{labelStyle}"/>
</awx:MarkerLayer>
</awx:Map>
</mx:Application>

The LabelStyle places the overlay on the map in pixel coordinates.

package com.esri.test
{
import com.esri.aws.awx.geom.PathType;
import com.esri.aws.awx.map.layers.overlays.OverlayObject;
import com.esri.aws.awx.map.layers.overlays.style.BaseStyle;
import com.esri.aws.awx.map.projection.IProjectionModel;

public class LabelStyle extends BaseStyle
{
override public function draw(
overlayObject:OverlayObject,
projectionModel:IProjectionModel
):void
{
var pathType:int = overlayObject.shape.getPathIterator(projectionModel).next(m_coords);
if (pathType == PathType.NOOP)
{
overlayObject.visible = false;
}
else
{
overlayObject.visible = true;
overlayObject.x = m_coords[0];
overlayObject.y = m_coords[1];
}
}
}
}

And here is the MarkerLabel class:

package com.esri.test
{
import com.esri.aws.awx.map.layers.overlays.Marker;

import mx.controls.Label;

public class LabelMarker extends Marker
{
override protected function createChildren():void
{
super.createChildren();
var label : Label = new Label;
label.text = "Hello, World!";
label.width = 200;
label.height = 24;
addChild( label );
}
}
}

BTW - There has to be a way to calculate the width and height of a string using the Font class (not sure if this class even exists) or something. I guess that is another blog entry :-)

3 comments:

Paul Hastings said...

mansour,

i'm having the dickens of the time getting labels to show up w/your code using (though w/flex 3).

any suggestions?

thanks.

thunderhead said...

Hum - have you tried to set the width and height of the marker, not the label - BTW - a label as a child is very "heavy" - talked to the Adobe folks and pointed to a better way. will try it soon.

Paul Hastings said...

mansour

nope, no joy.

i think i'll just use the convertGeoPointToPoint() method to figure out the pixel coords to toss up what i need on the map--it's just to snapshot for reporting purposes so i don't need the interactivity. this should hold us while you fix the bubble markers for flex 3 ;-)

thanks.

ps: sure would be nice to have a completed/done event for the map tiles or some function to get a single map image like arcIMS--tiles isn't a 100% solution (like this reporting use case).