Working with Markers: Events
Updated: Feb 20, 2008
Views: 2649
Description: This tutorial will show you an example of using Marker overlay events. In this tutorial we will create an application that allows our user to drag markers and see their current position as they are dragged or rolled over.
The Complete Project
Complete Code
Setting up the UMap and Create Two Dynamic Text Fields
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.
In our application that we are going to build, we also are going to use dynamic text fields. These can be created using the text tool in the tools panel (Window > Tools) and then when they are created switching the text type from static text to dynamic text in the Properties Panel (Window > Properties > Properties). You will also need to style you text here and give them instance names - markerIndex and markerPosition.
Understanding the Plan for ActionScript
After we have our basic map and text field setup, we now want to use ActionScript to build our application that will add a random markers, lets user drag them, and display information about them.
We want to first create our basic Marker Style object and set the few properties that won't change.
Creating Random Markers
Next, we want to add some markers to our map that the user can move around. We create a for loop that will repeat adding markers until it reaches 10 of them. For each marker of these markers, we give it a unique position, color, and index letter. We also set dragging of the marker to true in this step so that user can drag them.
Add Our Event Listeners for Roll Over, Roll Out, and Drag
Next, we need to add event listeners for the markers so that we know when the user interacts with them. We do this inside of our last for loop so that it gets added to all our markers.
Function to Show Target Marker's Position in Text Fields
The event listeners for Drag and Roll Over will call the same function because we want them to do same thing - show that targeted markers index letter and position. The difference is that the event listeners will fire at different times.
Function to Clear the Text Fields
Lastly, we don't a position to consistently to show. We only want it to show when a marker is rolled over or being dragged. So we have an event listener for roll out so that we clear the text fields.
Other Events for Markers
Markers also have other events that can be used in your applications. To see what they are take a look at the API Documentation in the com.afcomponents.umap.overlays.Marker class.
Complete Code
import com.afcomponents.umap.styles.MarkerStyle;
import com.afcomponents.umap.overlays.Marker;
import com.afcomponents.umap.types.LatLng;
import com.afcomponents.umap.types.LatLngBounds;
import com.afcomponents.umap.events.OverlayEvent;
// create new MarkerStyle
var style:MarkerStyle = new MarkerStyle();
style.fill = "rgb";
style.fillAlpha = 0.9;
style.strokeRGB = 0x0;
style.strokeAlpha = 1.0;
var pos:LatLng;
var bounds:LatLngBounds = umap.getBoundsLatLng();
var marker:Marker;
// create 10 random Markers
for (var i:uint = 0; i < 10; i++) {
style.fillRGB = Math.random() * 0xFFFFFF;
pos = new LatLng(bounds.southWest.lat + Math.random() * bounds.height, bounds.southWest.lng + Math.random() * bounds.width);
marker = new Marker({autoInfo: false, draggable:true});
marker.index = String.fromCharCode(65 + i);
marker.position = pos;
marker.setStyle(style);
umap.addOverlay(marker);
marker.addEventListener(OverlayEvent.DRAG, markerInfo);
marker.addEventListener(OverlayEvent.ROLL_OVER, markerInfo);
marker.addEventListener(OverlayEvent.ROLL_OUT, clearMarkerInfo);
}
function markerInfo (event:OverlayEvent) {
markerIndex.text = "Marker "+event.target.index+": ";
markerPosition.text = "Position is at ("+event.target.position.lat+", "+event.target.position.lng+")";
}
function clearMarkerInfo (event:OverlayEvent) {
markerIndex.text = "";
markerPosition.text = "";
}
import com.afcomponents.umap.overlays.Marker;
import com.afcomponents.umap.types.LatLng;
import com.afcomponents.umap.types.LatLngBounds;
import com.afcomponents.umap.events.OverlayEvent;
// create new MarkerStyle
var style:MarkerStyle = new MarkerStyle();
style.fill = "rgb";
style.fillAlpha = 0.9;
style.strokeRGB = 0x0;
style.strokeAlpha = 1.0;
var pos:LatLng;
var bounds:LatLngBounds = umap.getBoundsLatLng();
var marker:Marker;
// create 10 random Markers
for (var i:uint = 0; i < 10; i++) {
style.fillRGB = Math.random() * 0xFFFFFF;
pos = new LatLng(bounds.southWest.lat + Math.random() * bounds.height, bounds.southWest.lng + Math.random() * bounds.width);
marker = new Marker({autoInfo: false, draggable:true});
marker.index = String.fromCharCode(65 + i);
marker.position = pos;
marker.setStyle(style);
umap.addOverlay(marker);
marker.addEventListener(OverlayEvent.DRAG, markerInfo);
marker.addEventListener(OverlayEvent.ROLL_OVER, markerInfo);
marker.addEventListener(OverlayEvent.ROLL_OUT, clearMarkerInfo);
}
function markerInfo (event:OverlayEvent) {
markerIndex.text = "Marker "+event.target.index+": ";
markerPosition.text = "Position is at ("+event.target.position.lat+", "+event.target.position.lng+")";
}
function clearMarkerInfo (event:OverlayEvent) {
markerIndex.text = "";
markerPosition.text = "";
}
Setting up the UMap and Create Two Dynamic Text Fields
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.
In our application that we are going to build, we also are going to use dynamic text fields. These can be created using the text tool in the tools panel (Window > Tools) and then when they are created switching the text type from static text to dynamic text in the Properties Panel (Window > Properties > Properties). You will also need to style you text here and give them instance names - markerIndex and markerPosition.
Understanding the Plan for ActionScript
After we have our basic map and text field setup, we now want to use ActionScript to build our application that will add a random markers, lets user drag them, and display information about them.
- First, we want to create a basic Marker Style that will control some the basic information that we don't want to randomize.
- Next we want to create some randomly placed markers with different positions, index letters, and colors.
- We also want to add event listeners (roll over, roll out, and drag) for these markers.
- From drag and roll over we want to call a function that will display the position of the target marker in our text fields
- In our roll off function, we want to remove the text in the text fields.
We want to first create our basic Marker Style object and set the few properties that won't change.
import com.afcomponents.umap.styles.MarkerStyle;
// create new MarkerStyle
var style:MarkerStyle = new MarkerStyle();
style.fill = "rgb";
style.fillAlpha = 0.9;
style.strokeRGB = 0x0;
style.strokeAlpha = 1.0;
// create new MarkerStyle
var style:MarkerStyle = new MarkerStyle();
style.fill = "rgb";
style.fillAlpha = 0.9;
style.strokeRGB = 0x0;
style.strokeAlpha = 1.0;
Creating Random Markers
Next, we want to add some markers to our map that the user can move around. We create a for loop that will repeat adding markers until it reaches 10 of them. For each marker of these markers, we give it a unique position, color, and index letter. We also set dragging of the marker to true in this step so that user can drag them.
import com.afcomponents.umap.types.LatLng;
import com.afcomponents.umap.types.LatLngBounds;
var pos:LatLng;
var bounds:LatLngBounds = umap.getBoundsLatLng();
var marker:Marker;
// create 10 random Markers
for (var i:uint = 0; i < 10; i++) {
style.fillRGB = Math.random() * 0xFFFFFF;
pos = new LatLng(bounds.southWest.lat + Math.random() * bounds.height, bounds.southWest.lng + Math.random() * bounds.width);
marker = new Marker({autoInfo: false, draggable:true});
marker.index = String.fromCharCode(65 + i);
marker.position = pos;
marker.setStyle(style);
umap.addOverlay(marker);
}
import com.afcomponents.umap.types.LatLngBounds;
var pos:LatLng;
var bounds:LatLngBounds = umap.getBoundsLatLng();
var marker:Marker;
// create 10 random Markers
for (var i:uint = 0; i < 10; i++) {
style.fillRGB = Math.random() * 0xFFFFFF;
pos = new LatLng(bounds.southWest.lat + Math.random() * bounds.height, bounds.southWest.lng + Math.random() * bounds.width);
marker = new Marker({autoInfo: false, draggable:true});
marker.index = String.fromCharCode(65 + i);
marker.position = pos;
marker.setStyle(style);
umap.addOverlay(marker);
}
Add Our Event Listeners for Roll Over, Roll Out, and Drag
Next, we need to add event listeners for the markers so that we know when the user interacts with them. We do this inside of our last for loop so that it gets added to all our markers.
import com.afcomponents.umap.types.LatLng;
import com.afcomponents.umap.types.LatLngBounds;
import com.afcomponents.umap.events.OverlayEvent;
var pos:LatLng;
var bounds:LatLngBounds = umap.getBoundsLatLng();
var marker:Marker;
// create 10 random Markers
for (var i:uint = 0; i < 10; i++) {
style.fillRGB = Math.random() * 0xFFFFFF;
pos = new LatLng(bounds.southWest.lat + Math.random() * bounds.height, bounds.southWest.lng + Math.random() * bounds.width);
marker = new Marker({autoInfo: false, draggable:true});
marker.index = String.fromCharCode(65 + i);
marker.position = pos;
marker.setStyle(style);
umap.addOverlay(marker);
marker.addEventListener(OverlayEvent.DRAG, markerInfo);
marker.addEventListener(OverlayEvent.ROLL_OVER, markerInfo);
marker.addEventListener(OverlayEvent.ROLL_OUT, clearMarkerInfo);
}
import com.afcomponents.umap.types.LatLngBounds;
import com.afcomponents.umap.events.OverlayEvent;
var pos:LatLng;
var bounds:LatLngBounds = umap.getBoundsLatLng();
var marker:Marker;
// create 10 random Markers
for (var i:uint = 0; i < 10; i++) {
style.fillRGB = Math.random() * 0xFFFFFF;
pos = new LatLng(bounds.southWest.lat + Math.random() * bounds.height, bounds.southWest.lng + Math.random() * bounds.width);
marker = new Marker({autoInfo: false, draggable:true});
marker.index = String.fromCharCode(65 + i);
marker.position = pos;
marker.setStyle(style);
umap.addOverlay(marker);
marker.addEventListener(OverlayEvent.DRAG, markerInfo);
marker.addEventListener(OverlayEvent.ROLL_OVER, markerInfo);
marker.addEventListener(OverlayEvent.ROLL_OUT, clearMarkerInfo);
}
Function to Show Target Marker's Position in Text Fields
The event listeners for Drag and Roll Over will call the same function because we want them to do same thing - show that targeted markers index letter and position. The difference is that the event listeners will fire at different times.
function markerInfo (event:OverlayEvent) {
markerIndex.text = "Marker "+event.target.index+": ";
markerPosition.text = "Position is at ("+event.target.position.lat+", "+event.target.position.lng+")";
}
markerIndex.text = "Marker "+event.target.index+": ";
markerPosition.text = "Position is at ("+event.target.position.lat+", "+event.target.position.lng+")";
}
Function to Clear the Text Fields
Lastly, we don't a position to consistently to show. We only want it to show when a marker is rolled over or being dragged. So we have an event listener for roll out so that we clear the text fields.
function clearMarkerInfo (event:OverlayEvent) {
markerIndex.text = "";
markerPosition.text = "";
}
markerIndex.text = "";
markerPosition.text = "";
}
Other Events for Markers
Markers also have other events that can be used in your applications. To see what they are take a look at the API Documentation in the com.afcomponents.umap.overlays.Marker class.
Other Tutorials
