Advanced Flash Components

Working with Markers: Methods

Updated: Feb 20, 2008 Views: 2617

Description: This tutorial will show you an example of using a Marker overlay method. In this example we will create an application that has button to add a random marker and then when one is added it will show a button that allows you to remove the last marker using a marker remove method.

The Complete Project

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;

// create new MarkerStyle
var style:MarkerStyle = new MarkerStyle();
style.fill = GeometryStyle.RGB;
style.fillAlpha = 0.9;
style.strokeRGB = 0x0;
style.strokeAlpha = 1.0;

btnRemove.visible = false;

function randomMarker (event:Event) {
    var bounds:LatLngBounds = umap.getBoundsLatLng();

    style.fillRGB = Math.random() * 0xFFFFFF;
    pos:LatLng = new LatLng(bounds.southWest.lat + Math.random() * bounds.height, bounds.southWest.lng + Math.random() * bounds.width);

    var marker:Marker = new Marker();
    marker.position = pos;
    marker.setStyle(style);
    umap.addOverlay(marker);

    btnRemove.visible = true;
}
btnRandom.addEventListener(MouseEvent.CLICK, randomMarker);

function removeMarker (event:Event) {
    marker.remove();
    btnRemove.visible = false;
}
btnRemove.addEventListener(MouseEvent.CLICK, removeMarker);

Setting up the UMap and Create Buttons

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 button. You can create you own custom buttons if you want, but for simplicity sake we just added the button component from the Components Panel (Window > Components > User Interface). We created two of them and gave them instance names of btnRandom and btnRemove.

Understanding the Plan for ActionScript

After we have our basic map and buttons setup, we now want to use ActionScript to build our application that will add a random marker and then also remove the last marker added.

First, we want to create a basic Marker Style that will control some the basic information that we don't want to randomize.
We also want to hide our remove button at first and only show it when you can remove a marker.
Now we want to create our add marker button event listener in which we will add a marker with a random position and color for our marker. We also want to show our remove button at this point.
Lastly, we want to add our remove marker button click event listener in which we will remove the last marker and then hide itself.

Creating Our Base Marker Style

We want to first create our basic Marker Style object and set the few properties that won't change like position and fill color.

import com.afcomponents.umap.styles.MarkerStyle;

// create new MarkerStyle
var style:MarkerStyle = new MarkerStyle();
style.fill = GeometryStyle.RGB;
style.fillAlpha = 0.9;
style.strokeRGB = 0x0;
style.strokeAlpha = 1.0;

Remove Button Hide

To simplify things for our user, we only want to show the remove marker button when the have the option to remove a marker. Initially, they don't have the ability to remove a marker because none exist yet, because of this we set the visibility of the button to false.

btnRemove.visible = false;

Button that Adds Random Marker

Now we want to add the script for our add a random marker button. We create an event listener on our button for when it is clicked and then call a function that will add our marker. Inside of this, we first want to get our lat lng bounds of the map so that we can pick a point inside. Next we create a random position using a little math formula. We also pick a random color. We then add our new marker with our style and position. Lastly, we set the remove marker visibility to true.

import com.afcomponents.umap.overlays.Marker;
import com.afcomponents.umap.types.LatLng;
import com.afcomponents.umap.types.LatLngBounds;

function randomMarker (event:Event) {
    var bounds:LatLngBounds = umap.getBoundsLatLng();
    pos:LatLng = new LatLng(bounds.southWest.lat + Math.random() * bounds.height, bounds.southWest.lng + Math.random() * bounds.width);

    style.fillRGB = Math.random() * 0xFFFFFF;


    var marker:Marker = new Marker();
    marker.position = pos;
    marker.setStyle(style);
    umap.addOverlay(marker);

    btnRemove.visible = true;
}

btnRandom.addEventListener(MouseEvent.CLICK, randomMarker);

Button to Remove the Last Marker

Now, we create our event listener and function for our remove button. Inside this function we use the remove method for our marker that we just created. We also want to hide our button again, because this marker doesn't exist anymore to delete.

function removeMarker (event:Event) {
marker.remove();
btnRemove.visible = false;
}
btnRemove.addEventListener(MouseEvent.CLICK, removeMarker);

Other Methods for Markers

Markers more methods 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.

AFComponents.com