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 a polyline on our UMap that shows where we went our trip to Europe. We will do this using ActionScript. Before we dive into the code, lets understand the basic things we will be doing.

• Since our line will be focused on Europe, we want to pan and zoom to that position.
  
• We also want a style lined so we create our GeometryStyle object.
  
• We also need to add all our points in a parameters object
  
• We then create our polyline based on parameters object with our points, and style with our GeometryStyle object.
  
• Lastly, we want to have an event listener for when the user rolls over that displays an info window with the title for our line.

Pan and Zoom to Our Location

Our first thing that we will do is pan and zoom to Europe because that is what we want the map to focus on.



Create a Style for Our Polyline

We don't want just a default line, maybe one with some color, a little thicker, and alpha. So what we can do is create a style object that we can apply to the line or lines we will create. For more things you can change for the line take a look at the API Documentation in the com.afcomponents.umap.styles.GeometryStyle class.



Note: we will apply this to our line when we add it. 

Creating Our Parameters Objects that Includes Points for Our Polyline

Our line needs a few points to connect for our line drawn to. We will do this by creating a paramters object with a points array inside of it. We will also give our line a title that will show up in our info window.



Add Our Polyline to UMap

Next we need to create our polyline with our parameters object and our style object. After we have created it, we add our line as an overlay to our map.



Add an Event Listener to Our Line

Next, we are going to add an event listener to our line so that it shows an info window that displays our title for line the first time we roll over. We will just have it open at one our middle points. We will also remove the event listener inside the function so that it is only called once.