The Complete Project



Complete Code



Setting up the UMap and Adding Markers

To begin this tutorial make sure that you have successfully installed the Umap component and dragged an instance onto the stage. Make sure that you give the component an instance name of umap.

Also marker sure you have reviewed either the Working with Overlays: Adding a Marker or the Getting Started: Adding Markers to UMap tutorials and have a basic understanding of how to add a marker to the stage and create a style object that will change the appearance of your marker.

Overview of this Tutorial

In this tutorial we will cover some more advanced styling of markers.

• First,  we will create a gradient style object and apply that to a marker that we will add.
• Next, we will apply a custom marker icon (in the form of a movie clip) to replace the standard marker.
  
• Lastly, we change the appearance of the drop shadow that will be applied to our marker.

Creating a Marker with a Gradient Fill

The first thing that we will do is add a marker with a gradient fill to it. To do this we will create a geometry style object and set fill type to gradient and then create a gradient style object. This is where we can set the colors, type of gradient, and other properties of our gradient. Then we will add our marker and set style to our geometry style object. For more about the other geometry style you can use (like a bitmap, pattern, or rgb fill) take a look at the API Documentation in the com.afcomponents.styles.GeometryStyle class. For the properties in the gradient style object take a look at the com.afcomponents.styles.GradientStyle class. Note: you will need to import classes, please look at the complete code for these.



Using a Custom Icon as Our Marker

The second thing that we are going to do in this tutorial is add a marker with a custom icon. We do this by creating you movie clip with your custom appearance inside of flash. Once you have create a movie clip, find it in the library (Window > Library). Right click on the movie clip and select Linkage. In the pop-up define the class with a name - myMarker. Also make sure Export for ActionScript and Export in First Frame are both selected.
Once we have our icon created, we create a marker style object and set the icon property to the our name that we gave in linkage. We are also to set a few properties for this style. For more see com.afcomponents.styles.IconStyle class. Remember, to import classes from complete code. When we add our marker below we will add it with this style.



Changing the Drop Shadow Style

The third thing that we are going to cover is changing the appearance of the drop shadow for our markers.  We do this by creating a new drop shadow style object and setting a few properties of it. For more see com.afcomponents.styles.DropShadowStyle class. When then set our shadowStyle property in our marker style object to our drop shadow object that we created. Remember to import classes needed from complete code.



Add Our Marker with Custom Icon and Drop Shadow

Lastly, we need to create our parameters object and set the marker position and then we add our marker with our custom style that we create that also contains of custom drop shadow object.