Thunderhead Explorer

Following the last post, It would be nice to inspect the clustered set of map points when say the set is less than a dozen or so. In this post, I'm demonstrating something I call a FlareSymbol, which is a Symbol sub-class, where like before, the number of clustered points is shown. But, when you click on the cluster, it flares out to show the individual map points. Each flared point can react to say a mouse click to popup an info window showing its attribute values. When you click again on the cluster, it collapses the map points back to its center. Here it is in action. And like usual, you can download the source from here .

Was asked "what is the best way to display 20,000 markers on a map ?". Well, displaying all 20K map points does not make whole lot of sense, as you just see nothing, just a blanket of markers. A smarter approach is to cluster the points and display the clusters. Somebody pointed me to mapeed , and asked me to duplicate this using the Flex API for AGS. Here it is. I've loaded 20,000 map points from geonames and created dynamically clusters based on the scale of the map and its extent. BTW, this is all client side processing - gotta love the JIT in Flash Player :-) [Update] Sooo many people asked me for the source code of the app - here it is. Any feedback is more than welcome.

In this post, I'm demonstrating how to move a vertex of a polygon to modify its geometry. The application displays a graphic with a simple fill symbol. When the user clicks the Start Edit button, the symbol of the graphic is assigned to a new custom symbol instance, where the outline of the polygon is rendered as a line and the vertexes as little squares. While holding the mouse down over a square, a user can move the vertex to a new location on the map. The user can repeat this process over other vertexes until the Stop Edit button is clicked. You can see the application in action here . And like usual, the source is available from here .

Location based Services applications are requiring more and more that the geographical coordinates (or at least the neighborhood) of the user be automatically detected to create a more seamless and streamlined experience. Google Gears with its geolocation API and Mozilla Labs with its Geode project are making the W3C geolocation specification a reality. With such democratization of services, it would be nice to have geolocation as a native function in the flash player, so would be a JSON parser (but that is a topic of conversation for another day). Until then, we have to rely on the browser's capabilities to feed that information into the player. This can easily achieved using the ExternalInterface class. In this post, I adopted the geolocation W3C specification and implemented an ActionScript class to wrap the Gears and Geode javascript functions so they can be invoked from a Flex application. Make sure to install Gears and/or Geode to test this application. Using FlexBuild...

Due to the ubiquitous nature of geographical data in shapefile format, I want to embed a shapefile in a flex application and display it as a layer in a map. This work is borrowed and modified from Edwin van Rijkom . The modifications include the generation of Geometry subclasses based on the Flex API for ArcGIS Server . So, to get started, I created a ShpLayer class that is a subclass of GraphicsLayer . I initialized this layer's symbol property with an instance of ShpSymbol which is my own custom symbol (more on this later). This way, I do not have to assign a symbol to each added Graphic instance. Internally, when a graphic is rendered, and that graphic has a null symbol property, it inherits its parent's symbol property value. This is an easy way to globally change the symbology of a graphic layer, without having to explicitly iterate through all its children :-) The fact that I've created my own custom symbol is yet another demonstration of the extensibility of ...

Checkout this ESRI podcast about the Flex API for ArcGIS Server. Hope you like it :-)

In this sample , I'm demonstrating how to roll you own draw tool using the Flex API for ArcGISServer . I'm attaching mouse listeners to the map and based on the selected tool, I'm drawing a polyline, a circle or a geodetic circle. For the latter, I'm using the undocumented (subject to changes) ProjUtils class to enable me to calculate the distance in meters between two lat/lon values. In addition, this class has the capability to calculate a lat/lon value for a given lat/lon origin, radius and azimuth. When using this sample, watch out for boundary condition (too close to the poles or crossing the date line) as this is a very simple implementation. How to handle these conditions will be another post :-) as usual, you can download the source from here . Have fun, and hope to see some of you at MAX next week.

Was asked if there is a way to serialize the geometries of a Flex client application using for example BlazeDS . And the answer is 'yes'. All geometries are tagged with a [RemoteClass] metadata. Here is the break down (BTW - this is subject to change in the next version): SpatialReference com.esri.ags.ASSpatialReference MapPoint com.esri.ags.geometry.ASPoint Polyline com.esri.ags.geometry.ASPolyline Polygon com.esri.ags.geometry.ASPolygon Here is for example the Java side of MapPoint : package com.esri.ags.geometry; import com.esri.ags.ASSpatialReference; public class ASPoint implements IASGeometry { public double x; public double y; public ASSpatialReference spatialReference; } The following is a very simple client application that calls a RemoteObject to save a MapPoint instance: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout=...

This year, I will be a speaker at MAX 2008 . The session title is 'Delivery of a Mission-Critical RIA for NATO' and is held on Tuesday at 4:30. Hope to see you all there.

This week, while in Redlands for a holistic lab session on the Flex API for ArcGIS Server , a user showed me the following gem. Using the new Flash Player 10 FileReference class, you can create an image snapshot of a map component and save it locally to a file, without a server side service. To compile the application using FlexBuilder, you need to adjust your compiler SDK to version 3.2. <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:esri="http://www.esri.com/2008/ags" layout="vertical" > <mx:Script> <![CDATA[ import mx.graphics.ImageSnapshot; import mx.graphics.codec.JPEGEncoder; private function clickHandler() : void { const decoder: JPEGEncoder = new JPEGEncoder(); map.logoVisible=false; map.scaleBarVisible=false; map.zoomSliderVisible = false; const imageSnapshot:ImageSna...

So... if you are given a latitude and a longitude values and you want to find a nearby place, then you have to check out GeoNames . They have a web API that you can access for free (as in beer :-) Here is a simple usage of the API using the Flex API for AGS: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:esri="http://www.esri.com/2008/ags" layout="absolute" > <mx:Script> <![CDATA[ import com.esri.ags.geometry.MapPoint; import com.esri.ags.Graphic; import com.esri.ags.events.MapMouseEvent; import mx.rpc.events.ResultEvent; private function mapClickHandler( event : MapMouseEvent ) : void { const urlVar : URLVariables = new URLVariables(); urlVar.lat = event.mapPoint.y.toFixed( 6 ); urlVar.lng = event.map...

If you like FlexUnit , then you really wanna check out Fluint . It does the basic unit test assert stuff, but my favorite is the sequence testing. This is where it blows FlexUnit out of the water. Great job Mike, Jeff and Mike, you have a new convert !

Flex modules are very cool. In the AWS/X days, wrote a whole OSGi -like framework based on modules. So for this new project that I'm working on, I decided to reuse them again. Wrote a simple test case to remind myself how to use them with new Flex Builder, which BTW makes building modular application really easy. No more link reports CLI (well...it does it for you internally :-). So in my smart way (NOT) wrote the following: public function loadModule() : void { const info : IModuleInfo = ModuleManager.getModule( "TestModule.swf"); info.addEventListener( ModuleEvent.READY, readyHandler ); info.load(ApplicationDomain.currentDomain); } private function readyHandler( event : ModuleEvent ) : void { trace( event.type ); } Whenever I invoked the loadModule() function at the application creation complete, no trace would appear in my console. WT(bleep). Kept looking at the code, and re-launching the application, assuming that this time it will do it (come on, you...

I'm pleased to announce that we just released the Flex API for ArcGIS Server. Check it out here , and make sure to tell us what you think. Good or bad. I'm already on the road preaching the cool stuff you can do with it :-). BTW, it works on Flash Player 10 (though this is not "officially" supported), taking advantage of the speedier JIT and AVM. Check out the samples and the associated source codes to see how it works in MXML and AS3. Happy Mapping All :-)

I'm looking for a fast JSON decoder in AS3, and I'm really hoping that the next Flash player will have native JSON functions like IE8 . The as3 core library has a decoder. Tested it on a one megabyte JSON String and it took almost 4 seconds to decode on my MacBook Pro. Wow ! There has to be a better way. Couple of former life ago, was really into lex/yacc and flex/bison. BTW - I laughed so hard when I read the name of the first link when I googled 'lex yacc' - The generated "C" code was very fast. So one of the "modern" way to write a lexical analyzer/parser is to use ANTLR . ANTLR has an option to target ActionScript . I Found a JSON grammar reference and made simple adjustments for AS3. Ran the ANTLR Tool on the 'g' files and compiled the generated AS files into a test harness. BTW - Had to adjust by hand the generated AS3 code, as it did not compile out-of-the-box :-( I passed a set of test cases for the exception of escaped string co...

So...I was asked to investigate what will it take to output data in AMF to an existing REST endpoint. The idea is that, with just a path info switch, the endpoint can output XML, JSON or AMF i.e. http://server/rest/service/json, http://server/rest/service/amf. And no , a direct BlazeDS integration is not an option :-( So after looking at the BlazeDS source code (you gotta love open source :-) I homed in on the Java15Amf3Output class. It take an output stream as a property and has a writeObject method. Cool ! So given an Address instance: package com.esri.webamf; import java.io.Serializable; public class Address implements Serializable { private String m_addr; private String m_city; public Address() { } public String getAddr() { return m_addr; } public void setAddr(final String addr) { m_addr = addr; } public String getCity() { return m_city; } public void setCity(final String city) { ...

We refactored the Symbol class for the next release of the Flex api for ArcGIS Server so it can be easily customized. Here is a simple custom symbol: package com.esri.symbol { import com.esri.ags.Map; import com.esri.ags.geometry.Geometry; import com.esri.ags.geometry.MapPoint; import com.esri.ags.symbol.Symbol; import flash.display.Sprite; /** * Simple custom class with variable color property. */ public class CustomSymbol extends Symbol { private var m_color : Number; /** * Constructor * @param color optional color. Default 0xFF0000 */ public function CustomSymbol( color : Number = 0xFF0000 ) { m_color= color; } [Bindable] /** * Bindable color property. dispatch Event.CHANGE on change. * Graphic objects are CHANGE event listeners, and will invalidate their display list * upon the receipt of the event. */ public function get color() : Number { return m_color; } ...

The following is a simple sample that shows how to skin, style and reposition the map navigation control. All is done using CSS: Navigation { borderSkin : ClassReference("NavBorderSkin"); showScaleInDataTip: true; paddingLeft: 6; paddingRight: 2; paddingTop: 2; paddingBottom: 2; top: 30; left: NaN; right: 30; } NavigationMinusButton { disabledSkin: Embed(source="assets/globe_icon.png"); downSkin: Embed(source="assets/globe_icon.png"); overSkin: Embed(source="assets/globe_icon.png"); upSkin: Embed(source="assets/globe_icon.png"); } NavigationPlusButton { disabledSkin: Embed(source="assets/home_icon.png"); downSkin: Embed(source="assets/home_icon.png"); overSkin: Embed(source="assets/home_icon.png"); upSkin: Embed(source="assets/home_icon.png"); } Note that I have to set the value of left to NaN to override the default value...

Once you have generated your tiles from a map services, you can move these tiles to Amazon S3 . I used the S3Fox Firefox extension to move the files from my local system to S3. In addition, make sure to copy the JSON map service metadata to a file named "MapServer" (without quotes of course :-). You can access these tiles using the Flex API for ArcGIS server as follows: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:esri="http://www.esri.com/2008/ags" xmlns:s3="com.esri.s3.*" layout="absolute" > <esri:Map> <s3:S3ArcGISTiledMapServiceLayer url="http://s3.amazonaws.com/your_map_service/MapServer"/> </esri:Map> </mx:Application> And here is the implements of S3ArcGISTiledMapServiceLayer class: package com.esri.s3 { import com.esri.ags.layers.ArcGISTile...

Here is an example of how to skin the border of an InfoWindow using degrafa . This can be done using CSS by defining a skinBorder to InfoWindow as follows: InfoWindow { padding-left : 5; padding-right : 5; padding-top : 5; padding-bottom : 5; tip-width : 3; tip-length : 3; border-skin : ClassReference("IWBorderSkin"); } The IWBorderSkin is a sub-class of a degrafa GraphicBorderSkin. Like usual, you can download the source from here .

A lot of AS3 value object generators assume that you have the source code. However sometimes you are not privy to this information :-( So here is a java program that reads the content of a jar file and creates AS3 VOs. Like this post, I'm using StringTemplate to generate the files. And this other post was very helpful too. I'm using IntelliJ as my IDE and it lets me generate an executable jar. The following is the usage: java -jar class2as3.jar jarPath packageName outputPath You can download the source code from here .

This is demonstration of a very simple custom symbol to render a graphic component on a map. Here is the application: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:esri="http://www.esri.com/2008/ags" xmlns:test="com.esri.test.*" layout="absolute" > <esri:Map> <esri:GraphicsLayer> <esri:graphicProvider> <mx:ArrayCollection> <esri:Graphic> <esri:geometry> <esri:MapPoint x="45" y="45"/> </esri:geometry> <esri:symbol> <test:CustomSymbol/> </esri:symbol> </esri:Graphic> </mx:ArrayCollection> ...

Doug McCune (one of my all time Flex heroes) contributed heavily to SpatialKey , which looks and works great. Got to see it last week at 360|Flex in San Jose. I've been wanting to do something similar, but in 3D! Dabbled a bit with Papervision3D , but wanted to get into it, and that was the perfect opportunity. The idea that I had was to read a country shapefile , and thematically map all the cities in that country based on some attribute. And do all that on the client using Flex. I did a little bit of research, and here is a list of sites that "inspired" me: http://blog.papervision3d.org/ http://code.google.com/p/vanrijkom-flashlibs/ http://www.darronschall.com/weblog/archives/000273.cfm http://www.seld.be/ http://blog.zupko.info/?p=150 And here is a snapshot of the result: You can download the source code of the application from here . And you can see a sample demo here .

In a previous post, I showed how to bind the output of a query task to a graphic layer. The graphic layer had a default symbol that was used to render the graphic features. In the following example, I would like to symbolize each feature based on an attribute value. We could use the symbolFunction property of a graphic layer, however this function is called on each graphic feature and does not have a "grand picture" of the full set. This is the case of a quantile distribution, where the features are rank-ordered and equal number of features are placed in colored bucket. Here is the result: Each country is color coded based on a quantile distribution of its area property over a specified number of classes. Here is the code: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:esri="http://www.esri.com/2008/ags" xmlns:sample="com.esri.ags.sample.*" layout="abs...

Was tasked to build a Flex based 3D multi-nodal routing application for ESRI's International User Conference. Check out it here . The application enables the user to select a starting and ending room, then an optimized route is calculated using an ArcGIS GeoProcess task. The returned features are rendered in 3D and symbolized based on the floor level and the transition type, such as escalator, stairs or elevator. The floor and room outlines are derived from embedded shapefiles . I used Papervision3D for the the 3D rendering. Though this was my first time dabbling with Papervision, the learning curve was easy and having access to the source code made it more approachable.

Just got approved to be there . Hope to connect with some of you guys !

Short of using BlazeDS for asynchronous event notification, RSS is nice "standard" way to publish events. And since XML is a first class citizen in AS3, then parsing the feed is relatively easy. Yes, sure, I can use this syndication library, but it does not give me the control that I need over the feed items, specially over custom tags. One of these custom tags refer to GeoRSS , where you can add a geographical reference to the RSS entries. The geo tags can be of the form of points, lines or polygons. Here is a sample of a GeoRSS feed in JSP, where on every request a random lat/lon point value is generated. This can easily be extended to get the values from a database or a GPS source: <%@ page contentType="text/xml" language="java" %> <% final double lat = -45.0 + 50.0 * Math.random(); final double lon = -45.0 + 50.0 * Math.random(); %> <feed xmlns="http://www.w3.org/2005/Atom" xmlns:georss="http://www.georss.org/georss...

Point locations in the new Flex API for AGS are rendered using a Symbol subclass. One of these classes is the InfoSymbol, where an info window (callout) will be displayed anchored at the point location. Developers can specify the content of the symbol as a DisplayObject sublcass. The InfoSymbol was inspired from the FIG: Callout Component . Below is a sample. Click on it to see it in action, and you can download the source code from here .

This is one of my favorite usage of the API in pure MXML. I'm taking advantage of data binding to represent the output of a Query Task in graphical and textural format. In this application, I've created a QueryTask to a specific layer (countries) in an ArcGIS service (world). The QueryTask has a Query child specifying that the geomerty of the features should be returned, in addition to all the attribute fields. The application UI consists of a side by side map and data grid, and below those is a text field to define a "where" clause, and a button to execute the query. The map has two layers, a dynamic layer to show the world and a graphic layer to show the selected countries. When a user clicks the Query button, the Query "where" attribute is populated (via binding) with the textfield content and the QueryTask is executed. Upon a successful result, the graphic layer will be populated with new graphic objects and the data grid will contain new rows. The bin...

Ok gang, sorry for the long silence. We have been busy here @ ESRI with building the Flex API for ArcGIS Server . We will be announcing the public beta at the user conference this week and here is the link. Download it, try it out and give us some feedbacks.

Check out this entry - pretty cool implementation of the AGS Flex API - our prayers and thoughts go out to the folks that perished in this terrible incident - Peace. Blogged with the Flock Browser

Check it out at http://labs.adobe.com/technologies/flashplayer10/ Blogged with the Flock Browser

The SpringSource folks announced the beta release of an Application Platform . This is very cool, where in the past you had to have a web server to start up Spring. And if you are a big fan of OSGi and Spring-DM (like I am) you know what a pain it was to wedge all that together. And if you think about it, it was a chicken and egg problem. Well no more, this platform does it "right", where it starts the JVM, the OSGi platform ( Equinox ), the new Dynamic Module Kernel™ (dm-Kernel) and then the bundles. Remember back when SpringSource bought or aligned (do not remember which) with the Tomcat folks, well Tomcat is now a web bundle. This is very cool - next is to move it onto EC2 .

I'm a big fan of Unit Testing and Continuous Integration . Peter Martin blogged about how to achieve this for Flex. Basically, he created an Ant task that starts a server socket connection and forks a browser that launches a flexunit based application. The application opens a client socket connection back to the server and streams the flexunit results in JUnit XML format. The server reads the xml stream and writes it on the local disk. Notice that all of this is done so that a flex application in a browser can write to the local disk. Pretty clever, but this is where AIR makes life a bit easier. A Flex application using AIR can write to a local disk drive. Since the source code of JUnitTestRunner was available (thanks Peter), I was able to 1) learn something and 2) adjust the sendResults function to write the result to disk. private function sendResults() : void { for each (var report : Object in reports) { var xml : XML = createXMLReport(report); var utf...

Not to say that I predicted this at the last JavaONE - but JBoss is going to be based on OSGi and now so is Glassfish . Too cool - you will see more and more web servers will be based on OSGi and with Spring-DM to wire your POJOs - That is how you write enterprise software. Blogged with the Flock Browser

Joe Berkovitz just release a flex code coverage tool - this is very cool - have to use it in my ant build before calling flexunit . Blogged with the Flock Browser

Read Trim Down Windows to the Bare Essentials on lifehacker. Have to try this on my Mac. Blogged with the Flock Browser

Check out this article: Adobe - Developer Center : Improving Flex application performance using the Flash Player cache

Just got back from ESRI's Developer Summit in Palm Spring, where I presented the ArcGIS Server Flex API. You can download my presentation from here . This API is intended to be released post 9.3 and will be based on the REST protocol and is very closely modeled after the JavaScript API. In the presentation, I showcased how to build a map application and how to create dynamic and tiled layers. In addition, I added graphic layers with adjustable graphics and demonstrated how to subclass a GraphicLayer to create a GeoRSS layer.

So I was happy building my project in Flex Builder , till I committed my code and CruiseControl complained that I cannot build it ! See, CC uses compc (the command line compiler) to compile the module and it was returning: unable to resolve 'assets/cross_cursor.png' for transcoding. Here is what the code looked liked. [Embed(source="assets/cross_cursor.png")] So I said to my self, "Oh come on! I thought you can handle pngs. Poop !" - Googled the error and found this link. And the solution was to add a "/" in front of "assets": [Embed(source="/assets/cross_cursor.png")] Now I'm happier :-)

This examples shows how to place a label on the map. Actually, you can place any UIComponent. But make sure to set the width and height of the component :-) <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:awx="http://www.arcwebservices.com/2007/awx" xmlns:test="com.esri.test.*" layout="absolute" > <test:LabelStyle id="labelStyle"/> <awx:Framework apiKey="19640523"/> <awx:Map createDefaultLayers="false"> <awx:MarkerLayer> <test:LabelMarker geoX="45" geoY="45" style="{labelStyle}"/> </awx:MarkerLayer> </awx:Map> </mx:Application> The LabelStyle places the overlay on the map in pixel coordinates. package com.esri.test { import com.esri.aws.awx.geom.PathType; import com.esri.aws.awx.map.layer...

Check out this mailto: RFC. var urlRequest : URLRequest = new URLRequest( "mailto:?subject=MySubject&body=MyBody"); navigateToURL( urlRequest, "_self" ); Make sure to add the _self target to not open a blank browser window.

Here is a sample that shows how to call the Find service from AWXBridge.  Try 'Disneyland' (no quotes :-) <html> <head> <title>Find Sample</title> <style> body { margin: 0px; } </style> </head> <body> <div id="awx" style="width:100%; height:500px;"> <a href="http://www.adobe.com/go/getflashplayer">Download latest Adobe Flash Player</a> </div> <input id="placeInput" type="text"> <input type="button" value="Find" onclick="doFind()"> <script type="text/javascript" src="http://api.arcwebservices.com/awx/v4/awxbridge-4.0.js"></script> <script language="JavaScript" type="text/javascript"> var m_root; var m_map; function onCreationComplete() { try { m_root = FABridge.awx.root(); ...

Check this out - way too funny for the dog lovers out there :-)

I've seen a lot of interest lately in using AWX within an AJAX application. The preferred way is to use the AWXBridge API. This is based on Adobe's FABridge technology, and relies on a set of patterns to "bridge" the JavaScript and ActionScript world. Check out this example to see it in action. Here is a quick primer: A JavaScript root object is created to refer to an embedded Flex application - the FABridge property, in this case 'example', is a reference to the DIV id where the Flex application SWF will reside. var flexApp = FABridge.example.root(); Any ActionScript object with an empty constructor can be created from JavaScript using its full name: var chart = FABridge.example.create("mx.charts.ColumnChart"); An AS object public property can be retrieved from JS using a getter function, where the name of the function is based on the property name prefixed with "get" and the first letter of the property is uppercased: flexApp.getSlid...

This is done by setting the mouseHandler property on a map instance to an implementation of the IMouseHandler interface. The IMouseHandler interface has the classic mouseUp, mouseDown, mouseMove abstract functions. In addition, there are two abstract functions; set map() and cleanup(). The cleanup method is called on any previously set handler before a new mouse handler is set. A map reference is "injected" (a al IoC) onto the mouse handler when it is assigned to the map using the setter function. AWX provided a base implementation (BaseMouseHandler) that has a protected helper function to convert a stage mouse location to a GeoPoint. Another provided implementation, BaseOverlayMouseHandler associates a mouse handler with a map layer. This class can be used to draw overlays on map using the mouse such as redlines and rubberband rectangles. The following implementation enables a user to draw a geodesic circle on the map. You can see it in action here . Select the "Dra...

ESRI shapefiles are fairly ubiquitous. That is why I keep getting requests like this “Hey, I would like to render my local shapefiles on top the AWX map, can I do that ?” And I reply “Sure...but !” - Remember the security sandbox of the flash player; 1 - you can only communicate with the server that hosts the swf, or with a host that has a crossdomain.xml file, and 2 - there is no way that you can access your local disk drive directly - So, let’s turn these two restrictions into assets :-) I’m luck enough to run on a Mac, which comes with Apache Web Server built in. So, if I place a crossdomain.xml file at the base url of my local server, then I can access my local shapefiles. Cool eh ? Next, found this AS3 library that can read the shp and dbf file given a ByteArray instance. Here is a code snippet that I used on a project to overlay the continents shapes on top of the map. private function onCreationComplete( event : FlexEvent ) : void { var urlStream : URLStream = new URLStream(...