Getting Started: Adding Info Window to UMap
Updated: Feb 12, 2008
Views: 2713
Description: This tutorial will show you how to open an info window on your map, and a brief touch on styling the window and text in the info window.
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 open an infowindow that isn't associated with a marker on top of our map. We will do this through ActionScript, here is the plan for the things we will cover in this tutorial.
The first thing that we will do in this tutorial is open an info window, but we don't want just a blank info window at a default location so the first thing we do is create our object to hold our parameters.
After we have created our object that holds parameters for our info window we need to open it.
Styling Our Info Window
Another thing that we can do is format our info window so that its appearance is different. We do this by creating an InfoWindowStyle object and setting its properties. For a full list of properties we can take a look at the API Documentation in the com.afcomponents.umap.styles.InfoWindowStyle class.
Styling of Our Text in the Info Window
Another thing we can do is style our text in our info window. Looking at the API Documentation, we find the com.afcomponents.umap.styles.TextStyle class and there is a list of the different properties of our text that we can style. We will create a new TextStyle object with defaults and the set a few of the properties.
First, we style our title's text
Then we style our content's text.
Open Our Styled and Positioned Info Window
Lastly, we just need to open our positioned info window by passing our parameters object and styling our info window by passing our InfoWindowStyle object.
Complete Code
import com.afcomponents.umap.types.LatLng;
import com.afcomponents.umap.styles.InfoWindowStyle;
import com.afcomponents.umap.styles.TextStyle;
//Define the Parameters of our Infor Window
var param:Object = new Object();
param.title = "My Map";
param.content = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
param.position = new LatLng (20, 0);
param.autoClose = false;
// define info window style
var infoStyle:InfoWindowStyle = new InfoWindowStyle();
infoStyle.fill = "rgb";
infoStyle.fillRGB = 0x000000;
infoStyle.fillAlpha = .65;
infoStyle.strokeRGB = 0x000000;
infoStyle.strokeAlpha = 0;
infoStyle.closeRGB = 0xFFFFFF;
infoStyle.closeAlpha = .4;
infoStyle.autoSize = InfoWindowStyle.AUTO_SIZE_SIDE;
infoStyle.shadow = false;
//Style Title in Info Window
var infoTitleStyle:TextStyle = new TextStyle();
infoTitleStyle.textFormat.bold = true;
infoTitleStyle.textFormat.color = 0xFFFFFF;
infoTitleStyle.textFormat.font = "verdana";
infoTitleStyle.textFormat.size = 18;
infoStyle.titleStyle = infoTitleStyle;
//Style Content in Info Window
var infoContentStyle:TextStyle = new TextStyle();
infoContentStyle.textFormat.bold = false;
infoContentStyle.textFormat.color = 0xCCCCCC;
infoContentStyle.textFormat.font = "arial";
infoContentStyle.textFormat.size = 9;
infoStyle.contentStyle = infoContentStyle;
//Open our Info Window
umap.openInfoWindow(param, infoStyle);
import com.afcomponents.umap.styles.InfoWindowStyle;
import com.afcomponents.umap.styles.TextStyle;
//Define the Parameters of our Infor Window
var param:Object = new Object();
param.title = "My Map";
param.content = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
param.position = new LatLng (20, 0);
param.autoClose = false;
// define info window style
var infoStyle:InfoWindowStyle = new InfoWindowStyle();
infoStyle.fill = "rgb";
infoStyle.fillRGB = 0x000000;
infoStyle.fillAlpha = .65;
infoStyle.strokeRGB = 0x000000;
infoStyle.strokeAlpha = 0;
infoStyle.closeRGB = 0xFFFFFF;
infoStyle.closeAlpha = .4;
infoStyle.autoSize = InfoWindowStyle.AUTO_SIZE_SIDE;
infoStyle.shadow = false;
//Style Title in Info Window
var infoTitleStyle:TextStyle = new TextStyle();
infoTitleStyle.textFormat.bold = true;
infoTitleStyle.textFormat.color = 0xFFFFFF;
infoTitleStyle.textFormat.font = "verdana";
infoTitleStyle.textFormat.size = 18;
infoStyle.titleStyle = infoTitleStyle;
//Style Content in Info Window
var infoContentStyle:TextStyle = new TextStyle();
infoContentStyle.textFormat.bold = false;
infoContentStyle.textFormat.color = 0xCCCCCC;
infoContentStyle.textFormat.font = "arial";
infoContentStyle.textFormat.size = 9;
infoStyle.contentStyle = infoContentStyle;
//Open our Info Window
umap.openInfoWindow(param, infoStyle);
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 open an infowindow that isn't associated with a marker on top of our map. We will do this through ActionScript, here is the plan for the things we will cover in this tutorial.
- Create an object that will set the properties of our info window and then open our info window
- Creating an infoWindowStyle Object to style our info window with
- Creating a couple textStyle objects to style our text in our info window with
- Open our styled info window
The first thing that we will do in this tutorial is open an info window, but we don't want just a blank info window at a default location so the first thing we do is create our object to hold our parameters.
import com.afcomponents.umap.types.LatLng;
//Define the Parameters of our Infor Window
var param:Object = new Object();
param.title = "My Map";
param.content = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
param.position = new LatLng (20, 0);
param.autoClose = false;
//Define the Parameters of our Infor Window
var param:Object = new Object();
param.title = "My Map";
param.content = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
param.position = new LatLng (20, 0);
param.autoClose = false;
After we have created our object that holds parameters for our info window we need to open it.
//Open our Info Window
umap.openInfoWindow(param);
umap.openInfoWindow(param);
Styling Our Info Window
Another thing that we can do is format our info window so that its appearance is different. We do this by creating an InfoWindowStyle object and setting its properties. For a full list of properties we can take a look at the API Documentation in the com.afcomponents.umap.styles.InfoWindowStyle class.
import com.afcomponents.umap.styles.InfoWindowStyle;
// define info window style
var infoStyle:InfoWindowStyle = new InfoWindowStyle();
infoStyle.fill = "rgb";
infoStyle.fillRGB = 0x000000;
infoStyle.fillAlpha = .65;
infoStyle.strokeRGB = 0x000000;
infoStyle.strokeAlpha = 0;
infoStyle.closeRGB = 0xFFFFFF;
infoStyle.closeAlpha = .4;
infoStyle.autoSize = InfoWindowStyle.AUTO_SIZE_SIDE;
infoStyle.shadow = false;
// define info window style
var infoStyle:InfoWindowStyle = new InfoWindowStyle();
infoStyle.fill = "rgb";
infoStyle.fillRGB = 0x000000;
infoStyle.fillAlpha = .65;
infoStyle.strokeRGB = 0x000000;
infoStyle.strokeAlpha = 0;
infoStyle.closeRGB = 0xFFFFFF;
infoStyle.closeAlpha = .4;
infoStyle.autoSize = InfoWindowStyle.AUTO_SIZE_SIDE;
infoStyle.shadow = false;
Styling of Our Text in the Info Window
Another thing we can do is style our text in our info window. Looking at the API Documentation, we find the com.afcomponents.umap.styles.TextStyle class and there is a list of the different properties of our text that we can style. We will create a new TextStyle object with defaults and the set a few of the properties.
First, we style our title's text
//Style Title in Info Window
var infoTitleStyle:TextStyle = new TextStyle();
infoTitleStyle.textFormat.bold = true;
infoTitleStyle.textFormat.color = 0xFFFFFF;
infoTitleStyle.textFormat.font = "verdana";
infoTitleStyle.textFormat.size = 18;
infoStyle.titleStyle = infoTitleStyle;
var infoTitleStyle:TextStyle = new TextStyle();
infoTitleStyle.textFormat.bold = true;
infoTitleStyle.textFormat.color = 0xFFFFFF;
infoTitleStyle.textFormat.font = "verdana";
infoTitleStyle.textFormat.size = 18;
infoStyle.titleStyle = infoTitleStyle;
Then we style our content's text.
//Style Content in Info Window
var infoContentStyle:TextStyle = new TextStyle();
infoContentStyle.textFormat.bold = false;
infoContentStyle.textFormat.color = 0xCCCCCC;
infoContentStyle.textFormat.font = "arial";
infoContentStyle.textFormat.size = 9;
infoStyle.contentStyle = infoContentStyle;
var infoContentStyle:TextStyle = new TextStyle();
infoContentStyle.textFormat.bold = false;
infoContentStyle.textFormat.color = 0xCCCCCC;
infoContentStyle.textFormat.font = "arial";
infoContentStyle.textFormat.size = 9;
infoStyle.contentStyle = infoContentStyle;
Open Our Styled and Positioned Info Window
Lastly, we just need to open our positioned info window by passing our parameters object and styling our info window by passing our InfoWindowStyle object.
//Open our Info Window
umap.openInfoWindow(param, infoStyle);
umap.openInfoWindow(param, infoStyle);
