GPolygon explained
Updated: May 19, 2007
Views: 3708
Description: This tutorial explains how to add a polygon overlay to the map, change shape styling, apply filters and trigger mouse events.
| Download source files |
GPolygon is a set of geo-points which define a shape. GPolygon is very similar to the GPoint and GLine in the sense that you can customize it's appearance, add event listeners and assign it to a specific map layer.
| |
GPolygon can be added by calling the addPolygon({points:Array}) method. Let's add a simple shape.
var shape:Array = new Array(); //Create array of points
shape.push({lat:50,lng:-100});
shape.push({lat:-50,lng:-100});
shape.push({lat:-50,lng:100});
shape.push({lat:50,lng:100});
gMap.addPolygon({points:shape}); //Add polygon
shape.push({lat:50,lng:-100});
shape.push({lat:-50,lng:-100});
shape.push({lat:-50,lng:100});
shape.push({lat:50,lng:100});
gMap.addPolygon({points:shape}); //Add polygon
| |
By default, the GPolygon that we added is blue with 50 opacity and a black border. We can modify it's color, transparency and even add a filter.
var shape:Array = new Array();
shape.push({lat:50,lng:-100});
shape.push({lat:-50,lng:-100});
shape.push({lat:-50,lng:100});
shape.push({lat:50,lng:100});
import flash.filters.DropShadowFilter;
var ds:DropShadowFilter = new DropShadowFilter(5,45,0x000000,.50,5,5,1,1,false,false,false);
gMap.addPolygon({points:shape, stroke:false,fillRGB:0xFF00FF,fillAlpha:60, filters:[ds]});
shape.push({lat:50,lng:-100});
shape.push({lat:-50,lng:-100});
shape.push({lat:-50,lng:100});
shape.push({lat:50,lng:100});
import flash.filters.DropShadowFilter;
var ds:DropShadowFilter = new DropShadowFilter(5,45,0x000000,.50,5,5,1,1,false,false,false);
gMap.addPolygon({points:shape, stroke:false,fillRGB:0xFF00FF,fillAlpha:60, filters:[ds]});
| |
The last thing that we need to do is to add event listeners so we can capture the polygon's button events. We are going to add GEOMETRY_ON_ROLL_OVER, GEOMETRY_ON_ROLL_OUT and GEOMETRY_ON_RELEASE events. Also, let's change the GPolygon color whenever the user rolls over it.
var shape:Array = new Array();
shape.push({lat:50,lng:-100});
shape.push({lat:-50,lng:-100});
shape.push({lat:-50,lng:100});
shape.push({lat:50,lng:100});
var shape = gMap.addPolygon({points:shape, stroke:false,fillRGB:0xFF0000,fillAlpha:50});
shape.addEventListener("GEOMETRY_ON_ROLL_OVER", this);
shape.addEventListener("GEOMETRY_ON_ROLL_OUT", this);
function GEOMETRY_ON_ROLL_OVER(evnt:Object){
evnt.target.fillRGB = 0xFFFF00;
}
function GEOMETRY_ON_ROLL_OUT(evnt:Object){
evnt.target.fillRGB = 0xFF0000;
}
shape.push({lat:50,lng:-100});
shape.push({lat:-50,lng:-100});
shape.push({lat:-50,lng:100});
shape.push({lat:50,lng:100});
var shape = gMap.addPolygon({points:shape, stroke:false,fillRGB:0xFF0000,fillAlpha:50});
shape.addEventListener("GEOMETRY_ON_ROLL_OVER", this);
shape.addEventListener("GEOMETRY_ON_ROLL_OUT", this);
function GEOMETRY_ON_ROLL_OVER(evnt:Object){
evnt.target.fillRGB = 0xFFFF00;
}
function GEOMETRY_ON_ROLL_OUT(evnt:Object){
evnt.target.fillRGB = 0xFF0000;
}
| |
Other Tutorials
