AFComponents.com

The Complete 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

In this tutorial, we are going to build a small application that allows it's user to open info windows on our map. We will use text inputs to allow them to enter a few properties of the window that will open. We will only use the name, content, and position properties of an info window is this tutorial. For a full list of properties that the user can set for info windows please see the API Documentation in the com.afcomponents.umap.display.InfoWindow class. Our plan for building our application is:

• Creating our text inputs and button
  
• Creating our event listener for our button
  
• Creating a parameters object for our info window that we will set our properties of our info window in
• Create a new info window with our properties.
  
• Add it to the stage and open.

Creating The Interface Form

Before, we start with any code we need to make our text inputs and buttons. For this example, we just use the Button and TextInput components included with flash. They can be found in the components panel (Window > Components > User Interface). We created four text inputs and gave them instance names of infoText, infoDescr, infoLat, and infoLng. We created a button with an instance name of btnOpen.

Creating Event Listener and Function for Button Click

Now that we have created our user interface with the necessary elements, we are ready to connect them and make them work. The first step is to activate our button and make sure that everything works. We do this by creating an event listener on our button to watch for click and then calling a function. For testing purposes, we will first trace the inputs of our text inputs. We test in flash we should be able to see these in our Output Panel.



Creating Our Parameters Object

Our next step is to connect these text inputs to our properties of our info window. We do this by creating a parameters object and set the title, content, and position properties with the content the user added.



Add New Info Window

Now, we have all of our parameters in an object we want to create an info window with these set. With do this, by creating a new window and passing our parameters object as a parameter. We also want to add this info window to the our map so we add it as an overlay.



Opening Our Window

The last step is to open the window so that it appears to our user.