/examples/GradientControl/src/GradientControlExample.mxml
Macromedia eXtensible Markup Language | 288 lines | 258 code | 30 blank | 0 comment | 0 complexity | cdea3294efbabf9dec7a635fa6000cc0 MD5 | raw file
1<?xml version="1.0" encoding="utf-8"?> 2<!-- Copyright 2009 Google Inc. 3Deme for a GradientControl Flash Google Maps API element. 4See index.html for more information. --> 5<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 6 xmlns:gvlt="com.google.maps.extras.gradients.*"> 7<mx:Script> 8 <![CDATA[ 9 import flash.net.URLRequest; 10 import flash.net.URLLoader; 11 import flash.events.Event; 12 13 import com.adobe.serialization.json.JSON; 14 15 import com.google.maps.Color; 16 import com.google.maps.LatLng; 17 import com.google.maps.MapMouseEvent; 18 import com.google.maps.MapType; 19 import com.google.maps.controls.PositionControl; 20 import com.google.maps.controls.ZoomControl; 21 22 import com.google.maps.overlays.EncodedPolylineData; 23 import com.google.maps.overlays.Polygon; 24 import com.google.maps.overlays.PolygonOptions; 25 import com.google.maps.overlays.Polyline; 26 import com.google.maps.overlays.PolylineOptions; 27 import com.google.maps.styles.FillStyle; 28 import com.google.maps.styles.StrokeStyle; 29 30 import com.google.maps.extras.gradients.GradientControl; 31 import com.google.maps.extras.gradients.GradientRule; 32 import com.google.maps.extras.gradients.GradientRuleList; 33 import com.google.maps.extras.gradients.MultiPolygonWithValue; 34 import com.google.maps.extras.gradients.ThematicOverlay; 35 36 private var valueDict:Object = {}; 37 private var geometries:Object = []; 38 private var borders:Array = []; 39 private var ruleList:GradientRuleList = null; 40 private var thematicOverlay:ThematicOverlay = null; 41 private var selectedCountry:String = "Russia"; 42 43 private function dataLoaded(event:Event):void { 44 var loader:URLLoader = URLLoader(event.target); 45 valueDict = JSON.decode(loader.data); 46 for each(var p:MultiPolygonWithValue in geometries) { 47 if (p.id in valueDict) { 48 p.amount = valueDict[p.id]; 49 } 50 } 51 countryClicked("Russia", null); 52 53 borders = [0, 10, 20, 50]; 54 borderSlider1.value = borders[1]; 55 borderSlider2.value = borders[2]; 56 57 createGradients(); 58 thematicOverlay = new ThematicOverlay(map, ruleList, geometries); 59 thematicOverlay.draw(); 60 61 borderSlider1.enabled = true; 62 borderSlider2.enabled = true; 63 countrySlider.enabled = true; 64 } 65 66 private function createGradients():void { 67 var g1:GradientRule = new GradientRule(); 68 g1.maxValue = borders[1]; 69 g1.minColor = Color.GREEN; 70 g1.maxColor = Color.YELLOW; 71 72 var g2:GradientRule = new GradientRule(); 73 g2.maxColor = 0xff7700; 74 g2.maxValue = borders[2]; 75 76 var g3:GradientRule = new GradientRule(); 77 g3.maxValue = borders[3]; 78 g3.maxColor = 0xff0000; 79 80 ruleList = new GradientRuleList([g1, g2, g3]); 81 82 gradientBar.borders = borders; 83 gradientBar.drawGradientRule(ruleList); 84 } 85 86 // From http://stackoverflow.com/questions/359635/flex-implementing-classic-curry-function-in-actionscript 87 public static function curry(func:Function, ... args:Array):* 88 { 89 var arity:int = func.length; 90 var currying:Function = function(func:Function, arity:int, args:Array):* 91 { 92 return function(... moreArgs:Array):* { 93 if(moreArgs.length + args.length < arity) 94 { 95 return currying(func, arity, args.concat(moreArgs)); 96 } 97 return func.apply(this, args.concat(moreArgs)); 98 } 99 } 100 return currying(func, arity, args); 101 } 102 103 private function countryClicked(country:String, event:MapMouseEvent):void { 104 selectedCountry = country; 105 countrySlider.value = valueDict[selectedCountry]; 106 changeCountryText(); 107 }; 108 109 private function polygonsLoaded(event:Event):void { 110 var loader:URLLoader = URLLoader(event.target); 111 var worldPolygons:Object = JSON.decode(loader.data); 112 for each(var country:Object in worldPolygons) { 113 var geometryWithValue:MultiPolygonWithValue = 114 new MultiPolygonWithValue(); 115 geometryWithValue.id = country.name; 116 geometryWithValue.addPolygonFromEncoded( 117 country.coordinates, 118 new PolygonOptions({ 119 strokeStyle: new StrokeStyle({ 120 alpha: 0 121 }), 122 fillStyle: new FillStyle({ 123 color: 0x0000ff, 124 alpha: 0.7}) 125 })); 126 geometryWithValue.addEventListener( 127 MapMouseEvent.CLICK, curry(countryClicked, country.name)); 128 129 geometries[country.name] = geometryWithValue; 130 } 131 var loader2:URLLoader = new URLLoader(); 132 loader2.addEventListener(Event.COMPLETE, dataLoaded); 133 loader2.load(new URLRequest("2005_per_capita_emissions.js")); 134 } 135 136 private function onMapReady(event:Event):void { 137 map.disableContinuousZoom(); 138 map.enableScrollWheelZoom(); //can't make it work on Mac OS X 139 140 map.addControl(new PositionControl()); 141 map.addControl(new ZoomControl()); 142 143 var loader:URLLoader = new URLLoader(); 144 loader.addEventListener(Event.COMPLETE, polygonsLoaded); 145 loader.load(new URLRequest("world_polygons.encjs")); 146 147 map.setCenter(new LatLng(30, 20), 2, MapType.NORMAL_MAP_TYPE); 148 149 150 } 151 152 private function changeCountryText():void { 153 var rounded:Number = Math.round(countrySlider.value * 100) / 100.0; 154 countryLabel.htmlText = selectedCountry + ": " + rounded.toString(); 155 } 156 157 private function countrySliderChanged():void { 158 geometries[selectedCountry].amount = countrySlider.value; 159 changeCountryText(); 160 thematicOverlay.draw(); 161 } 162 163 private function borderSlider1Changed():void { 164 borderSliderChanged(1, borderSlider1.value); 165 } 166 private function borderSlider2Changed():void { 167 168 borderSliderChanged(2, borderSlider2.value); 169 } 170 private function borderSliderChanged(index:int, value:Number):void { 171 borders[index] = value; 172 createGradients(); 173 thematicOverlay.gradientRule = ruleList; 174 thematicOverlay.draw(); 175 } 176 ]]> 177</mx:Script> 178 179<mx:HBox 180 paddingLeft="20" 181 paddingTop="20" 182 width="100%" 183 height="100%" 184 horizontalGap="0" 185 verticalGap="30" 186 backgroundColor="#ffffff"> 187 <mx:VBox 188 width="900" 189 height="100%" 190 horizontalAlign="center" 191 horizontalGap="10" 192 verticalGap="0" 193 backgroundColor="#ffffff"> 194 <mx:Text 195 color="#666666" 196 fontSize="20" 197 text="Gradient Control Demo: 2005 Greenhouse Gas Emissions per capita" 198 /> 199 <maps:Map 200 xmlns:maps="com.google.maps.*" 201 id="map" mapevent_mapready="onMapReady(event)" 202 width="900" 203 height="600" 204 /> 205 <gvlt:GradientBar width="900" height="15" id="gradientBar"/> 206 <mx:Label 207 color="#666666" 208 fontSize="20" 209 textAlign="center" 210 htmlText="Select transition point from green to yellow"/> 211 <mx:HSlider 212 width="900" 213 height="50" 214 id="borderSlider1" 215 liveDragging="true" 216 maximum="50" 217 minimum="0" 218 showDataTip="true" 219 tickInterval="10" 220 labels = "[0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50]" 221 enabled = "false" 222 change="borderSlider1Changed()" 223 /> 224 <mx:Label 225 color="#666666" 226 fontSize="20" 227 textAlign="center" 228 htmlText="Select transition point from orange to red"/> 229 <mx:HSlider 230 width="900" 231 height="50" 232 id="borderSlider2" 233 liveDragging="true" 234 maximum="50" 235 minimum="0" 236 showDataTip="true" 237 tickInterval="10" 238 labels = "[0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50]" 239 enabled = "false" 240 change="borderSlider2Changed()" 241 /> 242 <mx:Text 243 color="#666666" 244 fontSize="15"> 245 <mx:htmlText> 246 <![CDATA[Source: <a href="http://cait.wri.org/cait.php?page=yearly&mode=view&sort=val-desc&pHints=open&url=form&year=2005§or=natl&co2=1&ch4=1&n2o=1&pfc=1&hfc=1&sf6=1&update=Update">World Resources Institute</a>]]> 247 </mx:htmlText> 248 </mx:Text> 249 </mx:VBox> 250 <mx:VBox 251 paddingLeft="20" 252 horizontalAlign="center" 253 verticalAlign="top" 254 > 255 <mx:Text 256 color="#666666" 257 fontSize="20"> 258 <mx:htmlText> 259 <![CDATA[Click on a country <br>and move the slider <br>to change its value.]]> 260 </mx:htmlText> 261 </mx:Text> 262 <mx:Label 263 id="countryLabel" 264 color="#666666" 265 fontSize="20" 266 htmlText="Russia"/> 267 <mx:VSlider 268 width="50" 269 height="600" 270 id="countrySlider" 271 liveDragging="true" 272 maximum="100" 273 minimum="0" 274 showDataTip="true" 275 tickInterval="10" 276 labels = "[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]" 277 enabled = "false" 278 change="countrySliderChanged()" 279 /> 280 <mx:Label 281 id="unitsLabel" 282 color="#666666" 283 fontSize="10" 284 text="tons CO2 per capita"/> 285 </mx:VBox> 286</mx:HBox> 287 288</mx:Application>