/examples/GradientControl/src/GradientControlExample.mxml

  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&sector=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>