Mansour Raad & Anthony Jayaprakash - Yet Another Mapping Framework, NOT!

1. Yet Another Mapping API - Not ! Mansour Raad mraad@esri.com

4. www.esri.com/ﬂex

5. www.esri.com/ﬂex

8. ArcGIS Services • Map Tiles ESRI / Virtual Earth (token) • Geocoding / Reverse • Query / Identify • Routing with Barriers and Time Windows • Buffer / Projection • GeoProcessing

9. You & ArcGIS Blaze PHP Local AGS .Net

10. Map “Hello World”

11. Map “Hello World” 1.<?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> 2.<mx:Application 3. xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot; 4. xmlns:esri=quot;http://www.esri.com/2008/agsquot; 5. layout=quot;absolutequot; 6. > 7. <esri:Map id=quot;mapquot;> 8. <esri:ArcGISTiledMapServiceLayer url=”http://host/rest/map”/> 9. </esri:Map> 10.</mx:Application>

12. Map “Hello World” 1.<?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> 2.<mx:Application 3. xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot; 4. xmlns:esri=quot;http://www.esri.com/2008/agsquot; 5. layout=quot;absolutequot; 6. > 7. <esri:Map id=quot;mapquot;> 8. <esri:ArcGISTiledMapServiceLayer url=”http://host/rest/map”/> 9. </esri:Map> 10.</mx:Application>

13. 1.<?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> 2.<mx:Application 3. xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot; 4. xmlns:esri=quot;http://www.esri.com/2008/agsquot; 5. layout=quot;absolutequot; 6. > 7. <esri:Map id=quot;mapquot; openHandCursorVisible=quot;falsequot; zoomSliderVisible=quot;falsequot;> 8. <esri:ArcGISTiledMapServiceLayer id=quot;layerquot; url=quot;{cb.selectedItem.url}quot;/> 9. </esri:Map> 10. <mx:ComboBox id=quot;cbquot; dataProvider=quot;{[ 11. {label:'Imagery',url:'http://host/rest/Image'}, 12. {label:'Physical',url:'http://host/rest/Physical'} 13. ]}quot;/> 14.</mx:Application>

16. GeoProcessing DriveTimes

21. 1. <esri:Geoprocessor id=quot;gpquot; url=quot;<GeoProcessesorURL>quot; showBusyCursor=quot;truequot;/> 2. <esri:Map id=quot;mapquot; openHandCursorVisible=quot;falsequot; mapClick=quot;mapClickHandler(event)quot;> 3. <esri:extent> 4. <esri:Extent xmin=quot;-95.41quot; ymin=quot;38.86quot; xmax=quot;-95.1quot; ymax=quot;39.06quot;> 5. <esri:SpatialReference wkid=quot;4326quot;/> 6. </esri:Extent> 7. </esri:extent> 8. <esri:ArcGISTiledMapServiceLayer url=quot;<MapServiceURL>quot;/> 9. <esri:GraphicsLayer id=quot;polygonLayerquot; graphicProvider=quot;{gp.executeFirstFeatureSet.features}quot;> 10. <esri:renderer> 11. <esri:UniqueValueRenderer attribute=quot;ToBreakquot;> 12. <esri:UniqueValueInfo value=quot;1quot;> 13. <esri:symbol> 14. <esri:SimpleFillSymbol alpha=quot;0.5quot; color=quot;0xFF0000quot;/> 15. </esri:symbol> 16. </esri:UniqueValueInfo> 17. <esri:UniqueValueInfo value=quot;2quot;> 18. <esri:symbol> 19. <esri:SimpleFillSymbol alpha=quot;0.5quot; color=quot;0x00FF00quot;/> 20. </esri:symbol> 21. </esri:UniqueValueInfo> 22. <esri:UniqueValueInfo value=quot;3quot;> 23. <esri:symbol> 24. <esri:SimpleFillSymbol alpha=quot;0.5quot; color=quot;0x0000FFquot;/> 25. </esri:symbol> 26. </esri:UniqueValueInfo> 27. </esri:UniqueValueRenderer> 28. </esri:renderer> 29. </esri:GraphicsLayer> 30. <esri:GraphicsLayer id=quot;pointLayerquot;/> 31. </esri:Map>

25. 1.<mx:Script> 2. <![CDATA[ 3. import com.esri.ags.tasks.FeatureSet; 4. import com.esri.ags.Graphic; 5. import com.esri.ags.events.MapMouseEvent; 7. private function mapClickHandler(event:MapMouseEvent):void 8. { 9. const graphic:Graphic = new Graphic(event.mapPoint); 10. pointLayer.clear(); 11. pointLayer.add(graphic); 12. const featureSet:FeatureSet = new FeatureSet([graphic]); 13. gp.execute({quot;Input_Locationquot;: featureSet, quot;Drive_Timesquot;: quot;1 2 3quot;}); 14. } 15. ]]> 16.</mx:Script>

26. 1.<mx:Script> 2. <![CDATA[ 3. import com.esri.ags.tasks.FeatureSet; 4. import com.esri.ags.Graphic; 5. import com.esri.ags.events.MapMouseEvent; 7. private function mapClickHandler(event:MapMouseEvent):void 8. { 9. const graphic:Graphic = new Graphic(event.mapPoint); 10. pointLayer.clear(); 11. pointLayer.add(graphic); 12. const featureSet:FeatureSet = new FeatureSet([graphic]); 13. gp.execute({quot;Input_Locationquot;: featureSet, quot;Drive_Timesquot;: quot;1 2 3quot;}); 14. } 15. ]]> 16.</mx:Script>

27. Demo Sample 1-2 DriveTimes

28. Many Children Layers

29. Many Graphic Layers

30. GraphicLayer

31. GraphicLayer • graphicProvider • ArrayCollection • renderer • graphic with no symbol

32. Graphic

33. Graphic • UIComponent • Flex life cycle management • geometry • symbol • attributes

34. Graphic/Geometry

35. Graphic/Geometry • Geometry - base class • MapPoint • Polyline • Polygon

36. Polyline/Polygon

37. Polyline/Polygon • Multi Part Geometry • Islands of Hawaii

38. Graphic/Symbol

39. Graphic/Symbol • Symbol - base class • Draws geometry of Graphic • Uses Flash Drawing API

40. Graphic/Attributes

41. Graphic/Attributes • Any Object ! • Attach any dynamic property to Graphic

42. Geometry/Symbol

43. Geometry/Symbol • [Bindable] Properties • Dispatch CHANGE event

44. Demo Sample 3-7

45. LCDS

46. LCDS • Remote Objects • Messaging • Data Services

47. Feature

48. Feature • Serializable server side object • Properties • featureID:int; • geometry:IGeometry; • attributes:ASObject;

49. public class Feature implements Serializable { private int m_featureId; private IGeometry m_geometry; private ASObject m_attributes; public Feature() { } public int getFeatureId() { return m_featureId; } public void setFeatureId(final int featureId) { m_featureId = featureId; } ...

50. public class MapPoint implements IGeometry { private double m_x; private double m_y; private SpatialReference m_spatialReference; public MapPoint(){ } public MapPoint(final double x, final double y){ m_x = x; m_y = y; } public double getX(){ return m_x; } public void setX(final double x){ m_x = x; } ...

51. DS Assembler • ﬁll • createItem • getItem • updateItem • deleteItem

52. private int m_featureId = 1; private Map<Integer, Feature> m_map = new ConcurrentHashMap<Integer, Feature>(17); public Collection fill(final List fillParameters) { return m_map.values(); } public Object getItem(final Map map) { return m_map.get(map.get(quot;featureIdquot;)); } public void createItem(final Object newVersion) { final Feature Feature = (Feature) newVersion; Feature.setFeatureId(m_featureId++); m_map.put(Feature.getFeatureId(), Feature); } public void updateItem(final Object newVersion, final Object prevVersion, final List changes) { final Feature Feature = (Feature) newVersion; m_map.put(Feature.getFeatureId(), Feature); } public void deleteItem(final Object prevVersion) { final Feature Feature = (Feature) prevVersion; m_map.remove(Feature.getFeatureId()); }

58. data-management-conﬁg.xml

59. data-management-conﬁg.xml <destination id=quot;featurequot;> <properties> <factory>spring</factory> <source>featureAssembler</source> <scope>application</scope> <use-transactions>false</use-transactions> <metadata> <identity property=quot;featureIdquot;/> </metadata> <network> <paging enabled=quot;falsequot; pageSize=quot;10quot;/> </network> </properties> </destination>

60. Back To The Client :-)

61. package com.esri.cats { import com.esri.ags.SpatialReference; import com.esri.ags.geometry.MapPoint; import flash.net.registerClassAlias; import mx.core.IMXMLObject; public class ClassAliasRegistry implements IMXMLObject { public function initialized(document:Object, id:String):void { registerClassAlias(quot;com.esri.cats.MapPointquot;, MapPoint); registerClassAlias(quot;com.esri.cats.SpatialReferencequot;, SpatialReference); } } }

62. package com.esri.cats { import com.esri.ags.SpatialReference; import com.esri.ags.geometry.MapPoint; import flash.net.registerClassAlias; import mx.core.IMXMLObject; public class ClassAliasRegistry implements IMXMLObject { public function initialized(document:Object, id:String):void { registerClassAlias(quot;com.esri.cats.MapPointquot;, MapPoint); registerClassAlias(quot;com.esri.cats.SpatialReferencequot;, SpatialReference); } } }

63. 1.package com.esri.cats 2.{ 3. import com.esri.ags.geometry.Geometry; 5. [Managed] 6. [RemoteClass(alias=quot;com.esri.cats.Featurequot;)] 7. public class Feature 8. { 9. public var featureId:int; 10. public var geometry:Geometry; 11. public var attributes:Object; 12. 13. public function Feature() 14. { 15. } 16. 17. } 18.}

64. 1.package com.esri.cats 2.{ 3. import com.esri.ags.geometry.Geometry; 5. [Managed] 6. [RemoteClass(alias=quot;com.esri.cats.Featurequot;)] 7. public class Feature 8. { 9. public var featureId:int; 10. public var geometry:Geometry; 11. public var attributes:Object; 12. 13. public function Feature() 14. { 15. } 16. 17. } 18.}

65. 1.<cats:ClassAliasRegistry/> 2.<mx:ArrayCollection id=quot;featuresquot; 3. collectionChange=quot;collectionChangeHandler(event)quot;/> 4.<mx:DataService id=quot;dsquot; destination=quot;featurequot;/> 5.<esri:Map id=quot;mapquot; load=quot;ds.fill(features)quot;> 6. <esri:GraphicsLayer id=quot;graphicsLayerquot;/> 7. <esri:GraphicsLayer id=quot;pointLayerquot;> 8. <esri:symbol> 9. <esri:SimpleMarkerSymbol color=quot;0xFFFF00quot;/> 10. </esri:symbol> 11. </esri:GraphicsLayer> 12.</esri:Map>

70. private function collectionChangeHandler(event:CollectionEvent):void { switch (event.kind) { case CollectionEventKind.RESET: doReset(event); break; case CollectionEventKind.UPDATE: doUpdate(event); break; } }

71. private function doReset(event:CollectionEvent):void { graphicsLayer.clear(); m_graphicsDict = new Dictionary(); for each (var feature:Feature in features) { var graphic:Graphic = new Graphic(feature.geometry, null, feature); graphic.buttonMode = true; graphic.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); graphic.toolTip = String(feature.attributes.coords).replace(quot; quot;, quot;nquot;); graphicsLayer.add(graphic); m_graphicsDict[feature.featureId] = graphic; } }

74. private function doUpdate(event:CollectionEvent):void { for each (var propertyChangeEvent:PropertyChangeEvent in event.items) { var feature:Feature = propertyChangeEvent.target as Feature; if (propertyChangeEvent.property === quot;geometryquot;) { var graphic:Graphic = m_graphicsDict[feature.featureId]; if (graphic) { graphic.geometry = feature.geometry; } } } }

77. 1.private function mouseDownHandler(event:MouseEvent):void 2.{ 3. const graphic:Graphic = event.target as Graphic; 4. if (graphic) 5. { 6. m_feature = graphic.attributes as Feature; 7. m_graphic.geometry = map.toMapFromStage(event.stageX, event.stageY); 8. pointLayer.add(m_graphic); 9. map.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); 10. map.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); 11. } 12.} 14.private function mouseMoveHandler(event:MouseEvent):void 15.{ 16. m_graphic.geometry = map.toMapFromStage(event.stageX, event.stageY); 17. event.updateAfterEvent(); 18.} 20.private function mouseUpHandler(event:MouseEvent):void 21.{ 22. m_feature.geometry = m_graphic.geometry; // ALL DS FM is Here :-) 23. m_feature = null; 24. pointLayer.clear(); 25. map.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); 26. map.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); 27.}

80. Demo CATS

81. “Lots” Features

83. Spatial Index

84. Spatial Index • RTree • QuadTree • Grid / Trellis • Simple • Efﬁcient (points) • Good enough !

86. 0,0 width,height

87. Xmax,Ymax 0,0 width,height Xmin,Ymin

90. Cy 3 2 1 0 Cx 0 1 2 3

91. Cy (1,3) 3 (3,2) 2 (3,2) 1 (0,0) 0 Cx 0 1 2 3

92. Cx & Cy > 0 int

93. Cx & Cy < 216

94. Dict[(cx<<16)|cy]

95. Cluster : Geometry

96. Cluster : Geometry • Original X • Original Y • Cluster X • Cluster Y • count

97. ClusterSymbol : Symbol

98. ClusterSymbol : Symbol • Draws a Cluster geometry instance • Flash drawing API • beginFill - based on cluster count • drawRoundedRect - based on Cx,Cy

99. Demo DrawSymbol Code

101. Adaptive Clustering

102. Adaptive Clustering • JIT • “Smart” algorithm - all client side. • React to map extent change

104. Given set of map points

105. Given set of map points Assign map point to cluster set

106. Given set of map points Assign map point to cluster set do

107. Given set of map points Assign map point to cluster set do spatial index clusters

108. Given set of map points Assign map point to cluster set do spatial index clusters for each cluster Ci

109. Given set of map points Assign map point to cluster set do spatial index clusters for each cluster Ci ﬁnd adjacent clusters Cj

110. Given set of map points Assign map point to cluster set do spatial index clusters for each cluster Ci ﬁnd adjacent clusters Cj if Cj is close enough to Ci

111. Given set of map points Assign map point to cluster set do spatial index clusters for each cluster Ci ﬁnd adjacent clusters Cj if Cj is close enough to Ci assign Cj map points to Ci

112. Given set of map points Assign map point to cluster set do spatial index clusters for each cluster Ci ﬁnd adjacent clusters Cj if Cj is close enough to Ci assign Cj map points to Ci remove Cj from cluster set

113. Given set of map points Assign map point to cluster set do spatial index clusters for each cluster Ci ﬁnd adjacent clusters Cj if Cj is close enough to Ci assign Cj map points to Ci remove Cj from cluster set adjust Ci location

114. Given set of map points Assign map point to cluster set do spatial index clusters for each cluster Ci ﬁnd adjacent clusters Cj if Cj is close enough to Ci assign Cj map points to Ci remove Cj from cluster set adjust Ci location repeat while overlapping clusters exist

115. Adjusting Ci location

116. Adjusting Ci location Ci Wi

117. Adjusting Ci location Ci Cj Wj Wi

118. Adjusting Ci location Ci Cj Wj Wi

119. Adjusting Ci location Ci=(Ci Wi+CjWj)/WiWj Wi+Wj

120. Demo ClusterApp

122. HeatMaps are Bitmaps !

123. 1.<?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> 2.<view:PrepApplication 3. xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot; 4. xmlns:esri=quot;http://www.esri.com/2008/agsquot; 5. xmlns:controller=quot;com.esri.controller.*quot; 6. xmlns:view=quot;com.esri.view.*quot; 7. layout=quot;verticalquot; 8. paddingLeft=quot;0quot; 9. paddingRight=quot;0quot; 10. paddingTop=quot;0quot; 11. paddingBottom=quot;0quot; 12. > 13. <controller:LoadCommand/> 14. <view:PrepSlider/> 15. <view:PrepMap> 16. <view:extent> 17. <esri:Extent xmin=quot;-143.141073quot; ymin=quot;14.930875quot; xmax=quot;-48.0570833quot; ymax=quot;57.649769quot;/> 18. </view:extent> 19. <esri:ArcGISTiledMapServiceLayer 20. url=quot;http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServerquot;/> 21. <view:PrepLayer/> 22. </view:PrepMap> 23.</view:PrepApplication>

124. 1.<?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> 2.<view:PrepApplication 3. xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot; 4. xmlns:esri=quot;http://www.esri.com/2008/agsquot; 5. xmlns:controller=quot;com.esri.controller.*quot; 6. xmlns:view=quot;com.esri.view.*quot; 7. layout=quot;verticalquot; 8. paddingLeft=quot;0quot; 9. paddingRight=quot;0quot; 10. paddingTop=quot;0quot; 11. paddingBottom=quot;0quot; 12. > 13. <controller:LoadCommand/> 14. <view:PrepSlider/> 15. <view:PrepMap> 16. <view:extent> 17. <esri:Extent xmin=quot;-143.141073quot; ymin=quot;14.930875quot; xmax=quot;-48.0570833quot; ymax=quot;57.649769quot;/> 18. </view:extent> 19. <esri:ArcGISTiledMapServiceLayer 20. url=quot;http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServerquot;/> 21. <view:PrepLayer/> 22. </view:PrepMap> 23.</view:PrepApplication>

125. PrepLayer : Layer

126. PrepLayer : Layer • Subclass Layer • Override updateLayer • Invoked by updateDisplayList • create bitmap - lock/unlock • bitmap.ﬁllRect each heat map point • graphic.bitmapFill / drawRect

127. PrepLayer

128. PrepLayer • Kept data in 2 arrays • x = [] • y = [] • Easy to AMF • toScreenX/Y built-in functions

129. Demo PrecipitationApp

131. Street Tracing

132. Street Tracing • A* • Create nodes and edges • Deﬁne barriers • Reverse geocoding • Custom layer - faster rendering

133. A* / Path Finding

134. Streets

135. Streets

136. “Street” Graph

137. “Street” Graph • Intersection - nodes • Street Segment - edge • Travel distance or time - cost

138. Nodes/Edges/Barriers

139. Nodes/Edges/Barriers C A E B D

142. Street Info n St M ai

143. Street Info 200 n St M ai 100

144. Street Info 200 199 n St M ai 100 101

145. ReverseGeocoding

146. ReverseGeocoding Main St Left 100-200 Right 101-199

147. ReverseGeocoding Main St Left 100-200 Right 101-199 t

148. ReverseGeocoding Main St Left 100-200 Right 101-199 t

149. ReverseGeocoding Main St Left 100-200 Right 101-199 t d

150. ReverseGeocoding Main St Left 100-200 Right 101-199 t d 153 Main St

151. Distance Calculations

152. Distance Calculations C B A

153. Distance Calculations C B P A

154. Distance Calculations AC • AB r= ∣AB∣2 C B r P A

155. Distance Calculations AC • AB r≺0 beyond A ↤ r= ∣AB∣2 C B r P A

156. Distance Calculations AC • AB r≺0 beyond A ↤ r= ∣AB∣2 r≻0 beyond B ↦ C B r P A

157. Distance Calculations AC • AB r≺0 beyond A ↤ r= ∣AB∣2 r≻0 beyond B ↦ C 1 Ax Bx Cx A= 2 Ay By Cy B r P A

158. Distance Calculations AC • AB r≺0 beyond A ↤ r= ∣AB∣2 r≻0 beyond B ↦ C 1 Ax Bx Cx A= 2 Ay By Cy height B r P A

159. Distance Calculations AC • AB r≺0 beyond A ↤ r= ∣AB∣2 r≻0 beyond B ↦ C 1 Ax Bx Cx A= 2 Ay By Cy height B r P base A

160. Distance Calculations AC • AB r≺0 beyond A ↤ r= ∣AB∣2 r≻0 beyond B ↦ C 1 Ax Bx Cx A= 2 Ay By Cy height B P base×height r A= base 2 A

161. Distance Calculations AC • AB r≺0 beyond A ↤ r= ∣AB∣2 r≻0 beyond B ↦ C 1 Ax Bx Cx A= 2 Ay By Cy height B P base×height r A= base 2 A AP=rAB

162. 1.override protected function updateLayer():void{ 2. const model:Model = Model.instance; 3. graphics.clear(); 4. graphics.lineStyle(1, 0); 5. model.streetGrid.search(map.extent, streetHandler); 6.} 8.private function streetHandler(street:Street, data:Object = null):void{ 9. for each(var path:Array in street.shpPolyline.paths){ 10. var index:int = 0; 11. var lastX:Number = toScreenX(path[index++]); 12. var lastY:Number = toScreenY(path[index++]); 13. graphics.moveTo(lastX, lastY); 14. while(index < path.length){ 15. var currX:Number = toScreenX(path[index++]); 16. var currY:Number = toScreenY(path[index++]); 17. if( currX !== lastX || currY !== lastY){ 18. graphics.lineTo(currX, currY); 19. lastX = currX; 20. lastY = currY; 21. } 22. } 23. } 24.}

168. Demo StreetTrace

169. When Will I Use This ?

170. Q&A http://thunderheadxpler.blogspot.com mraad@esri.com

Mansour Raad & Anthony Jayaprakash - Yet Another Mapping Framework, NOT!

Recommended

Recommended

More Related Content

Similar to Mansour Raad & Anthony Jayaprakash - Yet Another Mapping Framework, NOT!

Similar to Mansour Raad & Anthony Jayaprakash - Yet Another Mapping Framework, NOT! (20)

More from 360|Conferences

More from 360|Conferences (20)

Recently uploaded

Recently uploaded (20)

Mansour Raad & Anthony Jayaprakash - Yet Another Mapping Framework, NOT!