Tuesday, September 23, 2008

Styling, Skinning Map Navigation Control

The following is a simple sample that shows how to skin, style and reposition the map navigation control. All is done using CSS:

Navigation
{
borderSkin : ClassReference("NavBorderSkin");
showScaleInDataTip: true;
paddingLeft: 6;
paddingRight: 2;
paddingTop: 2;
paddingBottom: 2;
top: 30;
left: NaN;
right: 30;
}

NavigationMinusButton
{
disabledSkin: Embed(source="assets/globe_icon.png");
downSkin: Embed(source="assets/globe_icon.png");
overSkin: Embed(source="assets/globe_icon.png");
upSkin: Embed(source="assets/globe_icon.png");
}

NavigationPlusButton
{
disabledSkin: Embed(source="assets/home_icon.png");
downSkin: Embed(source="assets/home_icon.png");
overSkin: Embed(source="assets/home_icon.png");
upSkin: Embed(source="assets/home_icon.png");
}

Note that I have to set the value of left to NaN to override the default value. In addition, I'm using Degrafa to skin the border. Check out the sample here. And you can view the source code here.

5 comments:

Prem said...

very nice im just now starting to use Degrafa btw any idea if SP1 includes the release of the Flex API

The only way to figure out some things now is by introspection .

Prem said...

I meant Full release :) of Flex API

thunderhead said...

No, it will be a separate release on its own - which BTW will be _very_ soon. Will post a note on my blog when we will have an SP :-) and final will be very shortly on the SP heals.

Prem said...

Thanks , I am eagerly awaiting whatever I can get :)

Adam said...

I am trying to change the depth of the navigation controls so I can place another component between below the navigation but above the map. Is this possible using the CSS of the navigation? Can I change what level the navigation draws at?