GPoint Styling explained
Updated: May 17, 2007
Views: 8519
Description: Examples of GPoint styling and advanced styling techniques. Learn how to apply filters to location points, change appearance properties, use gradients and more.
| Download source files |
To get going, let's create a map and add several points. Drag an instance of GMap Component to the stage and give it an instance name ( in this example we use gMap ). Now, let's add location points using addPoint(point:Object); method:
gMap.addPoint({lat:48.856583,lng:2.350903, name:"Paris, France"});
gMap.addPoint({lat:45.463622,lng:9.188175, name:"Milano, Italy"});
gMap.addPoint({lat:52.523742,lng:13.41190, name:"Berlin, Gernamy"});
gMap.addPoint({lat:52.260015,lng:21.020021, name:"Warsaw, Poland"});
gMap.addPoint({lat:45.463622,lng:9.188175, name:"Milano, Italy"});
gMap.addPoint({lat:52.523742,lng:13.41190, name:"Berlin, Gernamy"});
gMap.addPoint({lat:52.260015,lng:21.020021, name:"Warsaw, Poland"});
| |
As you can see, we added several points over Europe. Now, let's pass additional parameters in the GPoint object that will set a unique fill and stroke color for each point. We are going to use following parameters:fill, fillRGB, fillAlpha, stroke, strokeRGB, strokeAlpha.
gMap.addPoint({lat:48.856583,lng:2.350903, name:"Paris, France", fill:true, fillRGB:0x00FF00, fillAlpha:30, stroke:true, strokeRGB:0x0000FF, strokeAlpha:80});
gMap.addPoint({lat:45.463622, lng:9.188175, name:"Milano, Italy", fill:true, fillRGB:0xFFFF00, fillAlpha:50, stroke:true, strokeRGB:0xFF00FF, strokeAlpha:80});
gMap.addPoint({lat:52.523742, lng:13.41190, name:"Berlin, Gernamy", fill:true, fillRGB:0x00FFFF, fillAlpha:100, stroke:true, strokeRGB:0x0000FF, strokeAlpha:80});
gMap.addPoint({lat:52.260015, lng:21.020021, name:"Warsaw, Poland", fill:true, fillRGB:0xFF00FF, fillAlpha:100, stroke:true, strokeRGB:0x000000, strokeAlpha:80});
gMap.addPoint({lat:45.463622, lng:9.188175, name:"Milano, Italy", fill:true, fillRGB:0xFFFF00, fillAlpha:50, stroke:true, strokeRGB:0xFF00FF, strokeAlpha:80});
gMap.addPoint({lat:52.523742, lng:13.41190, name:"Berlin, Gernamy", fill:true, fillRGB:0x00FFFF, fillAlpha:100, stroke:true, strokeRGB:0x0000FF, strokeAlpha:80});
gMap.addPoint({lat:52.260015, lng:21.020021, name:"Warsaw, Poland", fill:true, fillRGB:0xFF00FF, fillAlpha:100, stroke:true, strokeRGB:0x000000, strokeAlpha:80});
| |
Along with colors, we can modify GPoint size and stroke thickness with strokeThickness and radius parameters.
gMap.addPoint({lat:48.856583, lng:2.350903, name:"Paris, France", fill:true, fillRGB:0x00FF00, fillAlpha:100, stroke:true, strokeRGB:0x0000FF, strokeAlpha:80, strokeThickness:1, radius:7});
gMap.addPoint({lat:45.463622, lng:9.188175, name:"Milano, Italy", fill:true, fillRGB:0xFF0000, fillAlpha:100, stroke:true, strokeRGB:0x000000, strokeAlpha:80, strokeThickness:2, radius:8});
gMap.addPoint({lat:52.523742, lng:13.41190, name:"Berlin, Gernamy", fill:true, fillRGB:0xFFFF00, fillAlpha:100, stroke:true, strokeRGB:0x0000FF, strokeAlpha:80, strokeThickness:3, radius:9});
gMap.addPoint({lat:52.260015, lng:21.020021, name:"Warsaw, Poland", fill:true, fillRGB:0xFF00FF, fillAlpha:100, stroke:true, strokeRGB:0x000000, strokeAlpha:80, strokeThickness:4, radius:10});
gMap.addPoint({lat:45.463622, lng:9.188175, name:"Milano, Italy", fill:true, fillRGB:0xFF0000, fillAlpha:100, stroke:true, strokeRGB:0x000000, strokeAlpha:80, strokeThickness:2, radius:8});
gMap.addPoint({lat:52.523742, lng:13.41190, name:"Berlin, Gernamy", fill:true, fillRGB:0xFFFF00, fillAlpha:100, stroke:true, strokeRGB:0x0000FF, strokeAlpha:80, strokeThickness:3, radius:9});
gMap.addPoint({lat:52.260015, lng:21.020021, name:"Warsaw, Poland", fill:true, fillRGB:0xFF00FF, fillAlpha:100, stroke:true, strokeRGB:0x000000, strokeAlpha:80, strokeThickness:4, radius:10});
| |
Next, we need to apply Flash Filters to each GPoint and add the index parameter.
First, we need to create a Filter object. I am going to use Flash 8 Drop Shadow Filter. Once a filter is created, you can add it to the GPoint using filters parameter.
var ds:DropShadowFilter = new DropShadowFilter(5,45,0x000000,.70,4,4,1,1,false,false,false);
gMap.addPoint({lat:48.856583,lng:2.350903, name:"Paris, France", fill:true, fillRGB:0x00FF00, fillAlpha:100, stroke:true, strokeRGB:0x0000FF, strokeAlpha:80, strokeThickness:1, radius:7, index:"A", filters:[ds]});
gMap.addPoint({lat:45.463622, lng:9.188175, name:"Milano, Italy", fill:true, fillRGB:0xFF0000, fillAlpha:100, stroke:true, strokeRGB:0x000000, strokeAlpha:80, strokeThickness:2, radius:8, index:"B", filters:[ds]});
gMap.addPoint({lat:52.523742, lng:13.41190, name:"Berlin, Gernamy", fill:true, fillRGB:0xFFFF00, fillAlpha:100, stroke:true, strokeRGB:0x0000FF, strokeAlpha:80, strokeThickness:3, radius:9, index:"C", filters:[ds]});
gMap.addPoint({lat:52.260015, lng:21.020021, name:"Warsaw, Poland", fill:true, fillRGB:0xFF00FF, fillAlpha:100, stroke:true, strokeRGB:0x000000, strokeAlpha:80, strokeThickness:4, radius:10, index:"D", filters:[ds]});
gMap.addPoint({lat:48.856583,lng:2.350903, name:"Paris, France", fill:true, fillRGB:0x00FF00, fillAlpha:100, stroke:true, strokeRGB:0x0000FF, strokeAlpha:80, strokeThickness:1, radius:7, index:"A", filters:[ds]});
gMap.addPoint({lat:45.463622, lng:9.188175, name:"Milano, Italy", fill:true, fillRGB:0xFF0000, fillAlpha:100, stroke:true, strokeRGB:0x000000, strokeAlpha:80, strokeThickness:2, radius:8, index:"B", filters:[ds]});
gMap.addPoint({lat:52.523742, lng:13.41190, name:"Berlin, Gernamy", fill:true, fillRGB:0xFFFF00, fillAlpha:100, stroke:true, strokeRGB:0x0000FF, strokeAlpha:80, strokeThickness:3, radius:9, index:"C", filters:[ds]});
gMap.addPoint({lat:52.260015, lng:21.020021, name:"Warsaw, Poland", fill:true, fillRGB:0xFF00FF, fillAlpha:100, stroke:true, strokeRGB:0x000000, strokeAlpha:80, strokeThickness:4, radius:10, index:"D", filters:[ds]});
| |
That is about it, you can see the complete list of GPoint properties here.
