GLine explained
Updated: May 18, 2007
Views: 3348
Description: In this tutorial we are going to explain how to add a line overlay to the map, change line styling, apply filters and trigger mouse events.
| Download source files |
GLine is a set of geo-points which are connected by a solid line. GLine is very similar to the GPoint in the sense that you can customize it's appearance, add event listeners and assign it to a specific map layer.
| |
GLine can be added by calling the addLine({points:Array}) method. Let's add a simple line connecting Denver, Colorado and Miami, Florida.
var linePoints:Array = new Array(); //Create array of points
linePoints.push({lat:39.740038,lng:-104.992272}); //Add Denver location
linePoints.push({lat:25.728989,lng:-80.237446}); //Add Miami location
gMap.addLine({points:linePoints}); //Create line
linePoints.push({lat:39.740038,lng:-104.992272}); //Add Denver location
linePoints.push({lat:25.728989,lng:-80.237446}); //Add Miami location
gMap.addLine({points:linePoints}); //Create line
| |
By default, the GLine that we added is black. We can modify it's thickness, color, transparency and even add a filter. Let's kick it up a notch with some sweet styles.
var linePoints:Array = new Array();
linePoints.push({lat:39.740038,lng:-104.992272});
linePoints.push({lat:25.728989,lng:-80.237446});
gMap.addLine({points:linePoints, strokeThickness:10, strokeAlpha:80, strokeRGB:0x00FF00});
gMap.setCenter({lat:33.017876,lng:-91.307373}, 4);
linePoints.push({lat:39.740038,lng:-104.992272});
linePoints.push({lat:25.728989,lng:-80.237446});
gMap.addLine({points:linePoints, strokeThickness:10, strokeAlpha:80, strokeRGB:0x00FF00});
gMap.setCenter({lat:33.017876,lng:-91.307373}, 4);
| |
The last thing that we need to do is to add event listeners so we can capture the line'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 GLine color whenever the user rolls over it.
var linePoints:Array = new Array();
linePoints.push({lat:39.740038,lng:-104.992272});
linePoints.push({lat:25.728989,lng:-80.237446});
var myLine = gMap.addLine({points:linePoints, strokeThickness:10, strokeAlpha:80, strokeRGB:0x00FF00});
function GEOMETRY_ON_ROLL_OVER(evnt:Object){
evnt.target.strokeRGB = 0xFF0000; //Change color
}
function GEOMETRY_ON_ROLL_OUT(evnt:Object){
evnt.target.strokeRGB = 0x00FF00; //Change color
}
function GEOMETRY_ON_RELEASE(evnt:Object){
evnt.target.strokeRGB = 0xFFFF00; //Change color
}
myLine.addEventListener("GEOMETRY_ON_ROLL_OVER", this); //Add Roll Over event listener
myLine.addEventListener("GEOMETRY_ON_ROLL_OUT", this); //Add Roll Out event listener
myLine.addEventListener("GEOMETRY_ON_RELEASE", this); //Add Release
linePoints.push({lat:39.740038,lng:-104.992272});
linePoints.push({lat:25.728989,lng:-80.237446});
var myLine = gMap.addLine({points:linePoints, strokeThickness:10, strokeAlpha:80, strokeRGB:0x00FF00});
function GEOMETRY_ON_ROLL_OVER(evnt:Object){
evnt.target.strokeRGB = 0xFF0000; //Change color
}
function GEOMETRY_ON_ROLL_OUT(evnt:Object){
evnt.target.strokeRGB = 0x00FF00; //Change color
}
function GEOMETRY_ON_RELEASE(evnt:Object){
evnt.target.strokeRGB = 0xFFFF00; //Change color
}
myLine.addEventListener("GEOMETRY_ON_ROLL_OVER", this); //Add Roll Over event listener
myLine.addEventListener("GEOMETRY_ON_ROLL_OUT", this); //Add Roll Out event listener
myLine.addEventListener("GEOMETRY_ON_RELEASE", this); //Add Release
| |
