AFComponents.com

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 polygon on our UMap that shows the state of colorado on a map of the United States. We will do this using ActionScript. Before we dive into the code, lets understand the basic things we will be doing.

• Since our polygon will be focused on United States, we want to pan and zoom to that position.
  
• We also want a styled polygon so we create our GeometryStyle object.
  
• We also need to add all our points in a parameters object
  
• We then create our polygon 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 polygon.

Pan and Zoom to Our Location

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



Create a Style for Our Polygon

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



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

Creating Our Parameters Objects that Includes Points for Our Polygon

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



Add Our Polygon to UMap

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



Add an Event Listener to Our Polygon

Next, we are going to add an event listener to our polygon so that it shows an info window that displays our title for polygon 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.