The Completed Project



Complete Code



Setting up the UMap

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.

Understanding the Plan for ActionScript

After we have our basic map setup, we now want to add some markers to our map. We will do this using ActionScript. Before we dive into the code, lets understand the basic things we will be doing.

• Adding a marker with defaults and then setting this marker properties individually
• Adding a marker by passing parameters inside of new marker method
  
• Simple Styling of our Markers
• Create an event listener for our markers for roll over in which we will open the info window for our markers

Adding a Marker with Defaults and Changing these Properties

Our first thing that will do is create a new marker. We do this by importing a few classes and then creating our new marker object and then adding this to our map.



This marker will however will just get set to the default properties of the marker and we want our marker at a certain position, a label on it, and different information in its information window. So using the API Documentation in the com.afcomponents.umap.overlays.Marker class we find that this marker has properties that we can set.



Adding a Marker and Passing Properties Inside of Mew Marker Method

This is similar to the last step and are basically doing the exact same thing of adding our point and setting properties of this point, but this is a way of saving lines of code. Instead of creating a point with defaults and then setting them we are going to set these properties as we create the marker.



Styling of Our Markers

Another thing we can do is style our markers so that they look different. Looking at the API Documentation, we find the com.afcomponents.umap.styles.MarkerStyle class and there is a list of the different properties of our marker that we can style. We will create a new MarkerStyle object with defaults and the set a few of the properties.



Lastly, we just need to apply this MarkerStyle to our markers.



Adding Roll Over Event to Our Markers

The last thing that we will cover is how to add an event listener to our markers. We will create an event listener for when the user rolls over the marker and this event listener will call a function that opens the information window for targeted marker.