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.

Overview of this Tutorial

This tutorial will give an overview of the core properties of the UMap that can be found in the API Documentation in the com.afcomponents.umap.core.UMap class. These properties can either be changed in the component inspector (Window > Component Inspector) or through ActionScript. Things we will cover in this tutorial are:

• Change the componentStyle property object that will change stroke and background of the UMap
  
• Change the Map Type
• Change how the user interacts with the UMap (keyboard, mouse, scroll wheel, zoom point, panning, and what double clicking on the UMap does)
• Creating a custom error message
• Accessing read only properties

Change the Stroke and Background

With the componentStyle property you can edit the appearance of your UMap. You can change the background (load fill colors, gradients, and images) in the background, set a stroke, and change the content padding outside the UMap. See the API Documentation in the com.afcomponents.umap.styles.ComponentStyle class for more information.



Change Map Type

Next, we are going to go over how to change your map type. This is one way to change the type of UMap to map, satellite or hybrid . Again, make sure you have given the component an instance name of umap.



Change How the User Interacts with the Map

The user can interact with the UMap in several different ways and turning these properties to true or false. The keyboard, mouse, scroll wheel can all be used to navigate and if strict mode is turned on it will raise errors if interaction is not correct.



The UMap also has option for the way the mouse interacts with it. zoomAtPointer is a property that controls where to the UMap zooms to. If set to true it will zoom to the mouse location on the map, or if false it will zoom to the center of the map. doubleClickMode is a property that controls what happens when the user doubles clicks. The options for this are pan, zoom or none.



The umap can also pan to points instead of jumping to a new position. Panning requires methods to fire to see the pan but the speed and if you do want it to animate this pan are controlled through properties.



Create Custom Error Messages

The error panels that can be seen when a panel sometimes doesn't load can be completely customized. To do this you just create a movie clip that is 256px by 256px and has a dynamic text field with the instance name of errorMessage inside of it. 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 as the same name you used in the XML document - MyErrorSymbol. Also make sure Export for ActionScript and Export in First Frame are both selected. Then all you have to do is set the errorSymbol property to your movie clip that you created.



Access Read-Only Properties

UMap also has certain properties that are read only that can be accessed at any time and can be useful when building applications. These are things like the current and initial zoom position, if the map is panning, and if the map is ready.