Advanced Flash Components

Working With Marker Manager

Updated: Mar 13, 2008 Views: 2228

Description: This tutorial will cover adding layers, adding markers to those layers, creating a marker manager, and using the marker manager to group those markers in layers based on their distance from one another.

The Complete Project

Complete Code

import com.afcomponents.umap.core.UMap;
import com.afcomponents.umap.styles.MarkerStyle;
import com.afcomponents.umap.styles.GeometryStyle;
import com.afcomponents.umap.display.markermanager.MarkerManager;
import com.afcomponents.umap.display.markermanager.ExpandedGroupPattern;
import com.afcomponents.umap.types.LatLng;
import com.afcomponents.umap.overlays.Marker;
import com.afcomponents.umap.overlays.Layer;

// Create Map and set Center

umap.setCenter(new LatLng(51,10),3);

// Creating Marker Manager and set properties
var markMan:MarkerManager = new MarkerManager();
markMan.expandedGroupRadius = 50;
markMan.groupRadius = 50;
markMan.markerActualSize = 10;
markMan.markerZoomScale = 0.9;
markMan.fading = true;
markMan.autoClose = true;
markMan.animation = true;

//Create Layers
var France:Layer = new Layer();
var Germany:Layer = new Layer();
var GB:Layer = new Layer();
var Spain:Layer = new Layer();

// Create Styled Markers
var style:MarkerStyle = new MarkerStyle({fill:GeometryStyle.RGB,fillRGB:0xFF0000});
var Berlin:Marker = new Marker({position:new LatLng(52.52,13.41),index:"B",name:"Berlin",autoInfo:true},style );
var Potsdam:Marker = new Marker({position:new LatLng(52.389,12.99),index:"P",name:"Potsdam"}, style);
var Frankfurt:Marker = new Marker({position:new LatLng(52.342,14.5678),index:"F",name:"Frankfurt"}, style);
var Dresden:Marker = new Marker({position:new LatLng(51.062,13.732),index:"D",name:"Dresden"}, style);
var Hamburg:Marker = new Marker({position:new LatLng(53.5468,10.0195),index:"H",name:"Hamburg"}, style);
var Rostock:Marker = new Marker({position:new LatLng(54.104,12.1508),index:"R",name:"Rostock"}, style);

style = new MarkerStyle({fill:GeometryStyle.RGB, fillRGB:0x00FF00});
var Paris:Marker = new Marker({position:new LatLng(48.854409,2.332031),index:"P",name:"Paris"}, style);
var Reims:Marker = new Marker({position:new LatLng(49.236066,4.034912),index:"R",name:"Reims"}, style);
var Lyon:Marker = new Marker({position:new LatLng(45.687565,4.847900),index:"L",name:"Lyon"}, style);

style = new MarkerStyle({fill:GeometryStyle.RGB, fillRGB:0x0000FF});
var London:Marker = new Marker({position:new LatLng(51.546842,-0.117920),index:"L",name:"London"}, style);
var Oxford:Marker = new Marker({position:new LatLng(51.792134,-1.216553),index:"O",name:"Oxford"}, style);

style = new MarkerStyle({fill:GeometryStyle.RGB, fillRGB:0xFFFF00});
var Madrid:Marker = new Marker({position:new LatLng(40.460107,-3.655518),index:"M",name:"Madrid"}, style);
var Lisboa:Marker = new Marker({position:new LatLng(38.750435,-9.159668),index:"L",name:"Lisboa"}, style);
var Granada:Marker = new Marker({position:new LatLng(37.261587,-3.633545),index:"G",name:"Granada"}, style);
var Palma:Marker = new Marker({position:new LatLng(39.568216,2.628662),index:"P",name:"Palma"}, style);

// Add Markers to Correct Layers
Spain.addOverlay(Madrid);
Spain.addOverlay(Lisboa);
Spain.addOverlay(Granada);
Spain.addOverlay(Palma);

France.addOverlay(Paris);
France.addOverlay(Reims);
France.addOverlay(Lyon);

Germany.addOverlay(Berlin);
Germany.addOverlay(Potsdam);
Germany.addOverlay(Frankfurt);
Germany.addOverlay(Dresden);
Germany.addOverlay(Hamburg);
Germany.addOverlay(Rostock);
Germany.addOverlay(France);

GB.addOverlay(London);
GB.addOverlay(Oxford);

// Add Marker Manager to Map
umap.addManager(markMan);

// Add Layers and Add Marker Man to Layers
umap.addOverlay(Spain);
markMan.addLayer(Spain);

umap.addOverlay(France);
markMan.addLayer(France);

umap.addOverlay(Germany);
markMan.addLayer(Germany);

umap.addOverlay(GB);
markMan.addLayer(GB);

Setting up the UMap and Adding Markers

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.

Also marker sure you have reviewed either the Working with Overlays: Adding a Marker or the Getting Started: Adding Markers to UMap tutorials and have a basic understanding of how to add a marker to the stage and create a style object that will change the appearance of your marker.

Overview of this Tutorial

In this tutorial, we are going to create and use the marker manager inside of layers to group markers. This tutorial will require a large amount of ActionScript, so before we jump right in, let's get an understanding of what we are trying to accomplish.

We need to create our marker manager and set properties of it.
Next, we need to create our layers.
We also need to create all our of markers.
Then, we need to add each of these markers to the layer they belong in.
Then we need to add the marker manager that we created to the map.
Lastly, we need to add each layer to the map and to our marker manager.

Set Center and Zoom to See Marker Manager

All of our points that we will create will fall in Europe so our first step is to center the map on Europe and choose a zoom level that will show our group markers. As you zoom in you will see the marker manager changing groupings.

umap.setCenter(new LatLng(51,10),3);

Creating Marker Manager and Setting Properties

Now, we are going to want to create our Marker Manager object and set a few properties of it. These are things like the radius at which we group object and the radius at which they expand around. For more information about the properties that you can set with the marker manager please take a look at the API Documentation in the com.afcomponents.umap.display.markermanager.MarkerManager class.

var markMan:MarkerManager = new MarkerManager();
markMan.expandedGroupRadius = 50;
markMan.groupRadius = 50;
markMan.markerActualSize = 10;
markMan.markerZoomScale = 0.9;
markMan.fading = true;
markMan.autoClose = true;
markMan.animation = true;

Create Our Layers

Next, we are going to create the four layers that we will use in this tutorial. We create these layers to control the way our grouped. For this tutorial, we use different countries each of which will have several markers add to them.

var France:Layer = new Layer();
var Germany:Layer = new Layer();
var GB:Layer = new Layer();
var Spain:Layer = new Layer();

Create Styled Markers

Now, we create our markers based on cities inside each of these countries. We will also style each of these groups with a different color.

var style:MarkerStyle = new MarkerStyle({fill:GeometryStyle.RGB,fillRGB:0xFF0000});
var Berlin:Marker = new Marker({position:new LatLng(52.52,13.41),index:"B",name:"Berlin",autoInfo:true},style );
var Potsdam:Marker = new Marker({position:new LatLng(52.389,12.99),index:"P",name:"Potsdam"}, style);
var Frankfurt:Marker = new Marker({position:new LatLng(52.342,14.5678),index:"F",name:"Frankfurt"}, style);
var Dresden:Marker = new Marker({position:new LatLng(51.062,13.732),index:"D",name:"Dresden"}, style);
var Hamburg:Marker = new Marker({position:new LatLng(53.5468,10.0195),index:"H",name:"Hamburg"}, style);
var Rostock:Marker = new Marker({position:new LatLng(54.104,12.1508),index:"R",name:"Rostock"}, style);

style = new MarkerStyle({fill:GeometryStyle.RGB, fillRGB:0x00FF00});
var Paris:Marker = new Marker({position:new LatLng(48.854409,2.332031),index:"P",name:"Paris"}, style);
var Reims:Marker = new Marker({position:new LatLng(49.236066,4.034912),index:"R",name:"Reims"}, style);
var Lyon:Marker = new Marker({position:new LatLng(45.687565,4.847900),index:"L",name:"Lyon"}, style);

style = new MarkerStyle({fill:GeometryStyle.RGB, fillRGB:0x0000FF});
var London:Marker = new Marker({position:new LatLng(51.546842,-0.117920),index:"L",name:"London"}, style);
var Oxford:Marker = new Marker({position:new LatLng(51.792134,-1.216553),index:"O",name:"Oxford"}, style);

style = new MarkerStyle({fill:GeometryStyle.RGB, fillRGB:0xFFFF00});
var Madrid:Marker = new Marker({position:new LatLng(40.460107,-3.655518),index:"M",name:"Madrid"}, style);
var Lisboa:Marker = new Marker({position:new LatLng(38.750435,-9.159668),index:"L",name:"Lisboa"}, style);
var Granada:Marker = new Marker({position:new LatLng(37.261587,-3.633545),index:"G",name:"Granada"}, style);
var Palma:Marker = new Marker({position:new LatLng(39.568216,2.628662),index:"P",name:"Palma"}, style);

Add Markers to Layers

Now that we have created our markers and styled them with a color, we now need to add them into their correct layer.

Spain.addOverlay(Madrid);
Spain.addOverlay(Lisboa);
Spain.addOverlay(Granada);
Spain.addOverlay(Palma);

France.addOverlay(Paris);
France.addOverlay(Reims);
France.addOverlay(Lyon);

Germany.addOverlay(Berlin);
Germany.addOverlay(Potsdam);
Germany.addOverlay(Frankfurt);
Germany.addOverlay(Dresden);
Germany.addOverlay(Hamburg);
Germany.addOverlay(Rostock);
Germany.addOverlay(France);

GB.addOverlay(London);
GB.addOverlay(Oxford);

Add Marker Manager to Map

Next, we need to add our marker manager that we created earlier to our map.

umap.addManager(markMan);

Add Layers and Add Marker Manager to Layers

Lastly, we need to add each of our layers to our map and also to our marker manager.

umap.addOverlay(Spain);
markMan.addLayer(Spain);

umap.addOverlay(France);
markMan.addLayer(France);

umap.addOverlay(Germany);
markMan.addLayer(Germany);

umap.addOverlay(GB);
markMan.addLayer(GB);

NOTE: Don't Forget to Import Classes

Component Info

UMap (AS 3.0)

Knowledge Base

Forum