Working with Overlays: Adding a Marker
Updated: Feb 15, 2008
Views: 1769
Description: This tutorial will show you how to add a simple styled marker to the UMap and an event that shows an info window for our marker on the first roll over.
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 marker on our UMap that shows London on a map of Europe. We will do this using ActionScript. Before we dive into the code, lets understand the basic things we will be doing.
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 Marker
We don't want just a default marker, maybe one with some color, a little bigger, and alpha. So what we can do is create a style object that we can apply to the markers we will create. For more things you can change for the marker take a look at the API Documentation in the com.afcomponents.umap.styles.MarkerStyle class.
Note: we will apply this to our marker when we add it.
Creating Our Parameters Objects that Includes Location for Our Marker
Our marker needs a point to be placed. We will do this by creating a parameters object We will also give our marker a title that will show up in our info window.
Add Our Marker to UMap
Next we need to create our marker with our parameters object and our style object. After we have created it, we add our marker as an overlay to our map.
Add an Event Listener to Our Marker
Next, we are going to add an event listener to our marker so that it shows an info window that displays our title for marker 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.
Complete Code
import com.afcomponents.umap.overlays.Marker;
import com.afcomponents.umap.styles.MarkerStyle;
import com.afcomponents.umap.types.LatLng;
import com.afcomponents.umap.events.OverlayEvent;
umap.setCenter(new LatLng(52,1),5);
var style:MarkerStyle = new MarkerStyle();
style.fill = "rgb";
style.fillRGB = 0x3399FF;
style.fillAlpha = .8;
style.strokeRGB = 0x00000;
style.strokeAlpha = .9;
style.radius = 15;
var param:Object = new Object();
param.position = (new LatLng(51.500152,-0.126236));
param.name = "London, England";
var myMarker:Marker = new Marker(param, style);
umap.addOverlay(myMarker);
function handleOver(event:Event=null):void {
event.target.openInfoWindow({title: event.target.name, autoCloseInfo: true});
myMarker.removeEventListener(OverlayEvent.ROLL_OVER, handleOver);
}
myMarker.addEventListener(OverlayEvent.ROLL_OVER, handleOver);
import com.afcomponents.umap.styles.MarkerStyle;
import com.afcomponents.umap.types.LatLng;
import com.afcomponents.umap.events.OverlayEvent;
umap.setCenter(new LatLng(52,1),5);
var style:MarkerStyle = new MarkerStyle();
style.fill = "rgb";
style.fillRGB = 0x3399FF;
style.fillAlpha = .8;
style.strokeRGB = 0x00000;
style.strokeAlpha = .9;
style.radius = 15;
var param:Object = new Object();
param.position = (new LatLng(51.500152,-0.126236));
param.name = "London, England";
var myMarker:Marker = new Marker(param, style);
umap.addOverlay(myMarker);
function handleOver(event:Event=null):void {
event.target.openInfoWindow({title: event.target.name, autoCloseInfo: true});
myMarker.removeEventListener(OverlayEvent.ROLL_OVER, handleOver);
}
myMarker.addEventListener(OverlayEvent.ROLL_OVER, handleOver);
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 marker on our UMap that shows London on a map of Europe. We will do this using ActionScript. Before we dive into the code, lets understand the basic things we will be doing.
- Since our marker will be focused on Europe, we want to pan and zoom to that position.
- We also want a styled marker so we create our GeometryStyle object.
- We also need to add all our points in a parameters object
- We then create our marker 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 marker.
Our first thing that we will do is pan and zoom to Europe because that is what we want the map to focus on.
import com.afcomponents.umap.types.LatLng;
umap.setCenter(new LatLng(52,1),5);
umap.setCenter(new LatLng(52,1),5);
Create a Style for Our Marker
We don't want just a default marker, maybe one with some color, a little bigger, and alpha. So what we can do is create a style object that we can apply to the markers we will create. For more things you can change for the marker take a look at the API Documentation in the com.afcomponents.umap.styles.MarkerStyle class.
import com.afcomponents.umap.styles.MarkerStyle;
var style:MarkerStyle = new MarkerStyle();
style.fill = "rgb";
style.fillRGB = 0x3399FF;
style.fillAlpha = .8;
style.strokeRGB = 0x00000;
style.strokeAlpha = .9;
style.radius = 15;
var style:MarkerStyle = new MarkerStyle();
style.fill = "rgb";
style.fillRGB = 0x3399FF;
style.fillAlpha = .8;
style.strokeRGB = 0x00000;
style.strokeAlpha = .9;
style.radius = 15;
Note: we will apply this to our marker when we add it.
Creating Our Parameters Objects that Includes Location for Our Marker
Our marker needs a point to be placed. We will do this by creating a parameters object We will also give our marker a title that will show up in our info window.
import com.afcomponents.umap.types.LatLng;
var param:Object = new Object();
param.position = (new LatLng(51.500152,-0.126236));
param.name = "London, England";
var param:Object = new Object();
param.position = (new LatLng(51.500152,-0.126236));
param.name = "London, England";
Add Our Marker to UMap
Next we need to create our marker with our parameters object and our style object. After we have created it, we add our marker as an overlay to our map.
import com.afcomponents.umap.overlays.Marker;
var myMarker:Marker = new Marker(param, style);
umap.addOverlay(myMarker);
var myMarker:Marker = new Marker(param, style);
umap.addOverlay(myMarker);
Add an Event Listener to Our Marker
Next, we are going to add an event listener to our marker so that it shows an info window that displays our title for marker 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.
import com.afcomponents.umap.events.OverlayEvent;
function handleOver(event:Event=null):void {
event.target.openInfoWindow({title: event.target.name, autoCloseInfo: true});
myMarker.removeEventListener(OverlayEvent.ROLL_OVER, handleOver);
}
myMarker.addEventListener(OverlayEvent.ROLL_OVER, handleOver);
function handleOver(event:Event=null):void {
event.target.openInfoWindow({title: event.target.name, autoCloseInfo: true});
myMarker.removeEventListener(OverlayEvent.ROLL_OVER, handleOver);
}
myMarker.addEventListener(OverlayEvent.ROLL_OVER, handleOver);
Other Tutorials
