Thunderhead Explorer

There is this great sample in our code gallery where a Google Streetview is integrated with a map based on the Flex API for AGS. However, what I wanted is to have the street view to be part of the map, not an HTML sibling element. Found this project (flex-iframe) on google code, where you can display an HTML page inside a flex application. So I went ahead and merged the two projects. One of the requirements is to modify the template html file that is generated by Flex Builder with additional javascript code that enables the bridging between the flash and javascript world. I was not thrilled with fooling around with generated code, then I remembered the JavaScript flex tag by Abdul Qabiz . This flex element enables you to put javascript code _in_ a flex application, and on initialization it will be "evaled" and injected into the parent document DOM. So I merged all three projects together and this is you get. Check out it and tell me what you think. And like usual, the sou...

Was kinda ticked that TitleWindow did not have a resizable property :-( Found this reference when I googled "ResizableTitleWindow" - but was way too heavy. I just needed a _simple_ resizable title window, where I can grab the lower right corner and drag it to resize the window. Then I remembered that flexlib has a MDI package and I was always impressed with the code quality :-) Found the most excellent code for the MDIWindow component with resizable behaviour and additional features that I did not need. Here is my yet simplified derived version. And like usual, you can down the source code from here . BTW, I leave it as an "exercise" to the reader to add a visual element to the title window to indicate that it is resizable.

MassDOT issued a visualization challenge , where it is calling on developers to use released CharlieCard data to visualize "A Day in the Life of the MBTA". The following three applications use the Flex API for ArcGIS as a response to this challenge. The first application (click here to view it) consists of two maps. The first map contains a dynamically generated heat layer that morphs based on the selected hour. The second map is an isometric projection, but the T lines are represented in a schematic layout rather than a geographical layout. A schematic layout is what you see when you step up to a metro map at the station. You, the user, can rotate the schematic map by holding down the left mouse and dragging it left or right (no zoom in, sorry). At the bottom of the application is a horizontal slider. As you drag the slider, you are changing the "current" hour and minutes of the day. On the geographic map, the heat layer will reflect the CharlieCard counts per st...

In this post, I will demo how to load a local shapefile from your hard drive, and overlay it on an map whose base layer is derived from a remote ArcGIS server. Using the Flash Player 10 FileReference API, this task is fairly easy. However, I did not want the user to be prompted for each imported file as a shapefile is composed of a .shp file holding the geometry and a .dbf file holding the attributes. So, the idea is to zip the shp and dbf and load the zip, and then let the application unzip the content and parse the shp and dbf entries. The application is using the Flex API for AGS and makes use of two wonderful as3 library; the shp library from Edwin van Rijkom , and a zip library from David Chang . In this application, I created a custom geometry to take advantage of the coordinate array format in the shapefile reducing the impedance and taking advantage of the "compression". Well, this not truly compressed - this an array of x,y,x,y,etc... rather than an array of MapP...

A customer emailed me asking me how to create a horizontal map slider using the Flex API for AGS . The Map component has a property navigationClass to enable users to define a custom navigation class. <esri:Map navigationClass="com.esri.sample.MyNavigation"> In this sample, I defined a reference to the class com.esri.sample.MyNavigation which is a subclass of the Navigation class. public class MyNavigation extends Navigation { public function MyNavigation() { mx_internal::layoutObject.direction = BoxDirection.HORIZONTAL; navigationSliderClass = MyNavigationSlider; } /** * Override the order of the components. */ override protected function addZoomInZoomOutComponents(zoomInButton:UIComponent, zoomOutButton:UIComponent):void { addChild(new Spacer()); addChild(zoomOutButton); addChild(zoomInButton); addChild(new Spacer()...

Not sure if some of you have see the 3D in-door routing application that I did for the ESRI 2009 User Conference. I used Papervision3D for this app, and was a lot of fun to develop. A couple of weeks before the conference, I decided to implement the same app on an iPhone using Obj-C. Being a newbie in the latter, I ramped up quickly on the language (got quickly over my hang ups on bracket, and kinda like the language :-). I started to look at the 3D built-in engine that uses a derivative of OpenGL and thought that I will not have the time to get this up and running. So I started to look for simpler alternatives. I read Keith Peters' most excellent AdvancED ActionScript 3.0 Animation book and used his A* implementation for client side routing application with barriers. check it out here . The next chapter in the book is all about isometric projection. This is exactly what I needed, an isometric view of the CDCC floors and rooms with a small twist, where the user can rotate th...

My friend and colleague _extraordinaire_ Kerry Coffin been working with the Flex API for AGS , and send me the following list of samples: Linear Grid : This app shows a linear grid distance (miles, km etc) on a geographic map. Zoom In; pan north and south;change the number of grids;etc. Notice the grid width displayed. Also change the units. Graticule : This app shows a Lat/Lon graticule in a web Mercator map. Zoom in continually. Notice how the graticule adjusts. SimpleGraticule : This app shows a Lat/Lon graticule in a Geographic map. Zoom in continually. Notice how the graticule adjusts. Quad Tree : This app shows a quad tree component that can index and search points in a client app. Add a bunch of points (Pick add 10K points). Drag the mouse to search. Try adding 10K more. Search again. The app shows you how the indexing is done. Polynomial transformation : This app shows how to warp any image and overlay it on a map. (polynomial transformation) Press show resulting image. C...

Yes - just finished a native iPhone application (not using Safari) that uses the ArcGIS Server REST endpoint to create a 3D path between rooms in the San Diego Convention Center for the 2009 User Conference - this is _not_ an officially endorsed application (Yet :-) but for me, it was a great experience to see if I can get the iPhone to connect to AGS and render the result path in 3D as vector graphics. Yes, vector graphics - this is _not_ an image - if you drag your finger across the screen, the SDCC floor will rotate to give you a different perspective of the path. Cool eh ? Will be showing up at the UC on Monday, so stop by the Flex booth if you wanna see it live and have an AR version on the browser - AR you ask ? Just stop by :-) Here are some screenshots of the app - looking forward to seeing a lot of u there.

Was tasked to load an EXIF image with GPS info onto a map using the Flex API for AGS . So I first looked around for existing AS3 libraries and found ExifInfo . Downloaded it and tried it, but somehow it failed loading some EXIF images. Then I remembered a JavaScript library that a colleague pointed it out to me. So I ported the code to AS3 (optimization will come later) and here is the result. I used picasa to load some images and geo-tagged them using Google Earth (that is from the Tools menu BTW) and it worked pretty well. I borrowed some ideas and code from the author of ExifInfo and made my own EXIF mxml enabled class. Like usual here is the source code. BTW - There is a TextInput field at the bottom of the application, enter the url of your image (make sure that you have a crossdomain.xml at the base of your url) and if the image has EXIF GPS info, the map will display it. Try "assets/sample1.jpg" and hit enter.

We are proud to release the 1.2 version of the flex API for AGS - check it out here . New stuff include the support for Virtual Earth map tiles and geocoding. There is also now support for Network Analyst routing/sequencing with time windows and lots of bug fixes and enhancements. Hope you all like it.

As promised - just finished my presentation and here it is - have fun. Oh, here is the abstract: In this session we will demonstrate the Flex Mapping API For ArcGIS Server, where we will deconstruct live real-world mapping applications and algorithms such as dense clustering, auto labeling of features, collaborative editing, real-time asset tracking and client/server collaborative Geo-Processing. In addition, we will demonstrate how to create your own layer, geometry and symbol extensions for superior rendering performance taking advantage of the FP10 drawing API.

Here is yet another clustering application. This is very similar to GeoCubes . It is based on a simple but effective algorithm, where the map extent is divided into "cubes". Given a map point from a set, the associated cube that it lies above is selected and the cube internal count is incremented. After processing all map points, the set of cubes with an internal count greater that one are displayed. Here is the application in action. And like usual, the source code is here .

Just finished reading Keith Peter's ActionScript 3.0 Animation book , and I very highly recommend it. Chapter 4 is all about pathfinding using A* but is based on a tiled grid network. So I adjusted it, in such a way that the nodes and arcs are derived from street features off a shapefile. The resulting application enables you to select a starting and ending street intersection and a path is displayed. In addition, you can add street barriers so that the calculated path will go around the defined barriers. The nodes and arcs are spatially indexed. This enables live reverse geocoding as the mouse moves - that means that once the mouse is close enough to a street segment, a snap point is calculated and based on the side of the street, an interpolated address is calculated and displayed. Check out the application here , make sure to zoom in to enable snapping and path finding. Again, once you move close enough to a street segment, a snap point is displayed and the address is displaye...

Google released a java version of the AppEngine . So I was very excited and wanted to see if I can host an application based on the Spring BlazeDS Integration framework. All was fine until I deployed the application and got a "Class Not Found" Exception. Looking at the log found the following: java.lang.management.ManagementFactory is a restricted class. Please see the Google App Engine developer's guide for more details. Check the docs and there is a list of "white-list" classes, and java.lang.management is not there :-(. Was so close! oh well, back to EC2 :-)

A colleague of mine asked me if there was a way to put arrows at the end of drawn polylines. My answer was "Not out of the box directly :-( but you can create your own line style subclass :-) And here is an implementation in action. Check out the source code here .

While in Redlands last week, I was working with a client on how to create a heat map of an annual precipitation data over the US. He had about 11.5K map points with precipitation values and wanted to render this data very efficiently on the client browser using the new Flex API and wanted to have control over the rendering criteria. We loaded the data onto SqlServer and fronted it with WebORB (since he was a .Net dude, I'm a Java dude and would have used BlazeDS ) to enable RemoteObject interaction. The idea here is to bulk load the data using SQL onto some structure and AMF it to the client. On the client side, we take advantage of that structure and use the Flash graphic primitives to render it. Turn out the most efficient structure is composed of 3 arrays holding the x, y and precipitation values. Since on the client we did not need to interact with each value, I created a custom layer that sub-classes Layer to render the 11 thousand values on a bitmap, and then the bitmap is...

I just got accepted to speak at 360|Flex Indy! The show will be going down May 18-20, 2009. You can check out the other great 49 speakers on the schedule at: http://360conferences.com/360flex/downloads/schedule.pdf It's looking like it's gonna be another great 360|Flex conference, especially with yours truly speaking. Tickets are cheaper on a first come, first serve basis! So buy your tickets asap at http://360flex.eventbrite.com to get the best possible price. See you there and you better go to my session!

Found a historic map of Boston collected by David Rumsey, and thought it would be nice to be able to put this map on a current map. As the image needs to be scaled, rotated and translated, I wrote a custom symbol ( OverlaySymbol ) to enable the scaling, rotation and translation when the map extent changes. So all that is cool, but the problem was coming up with OverlaySymbol properties. So I wrote the OverlayEditor application that enables you to load the image and using a instance of Flex Object Handles , you can stretch, move and rotate the image. Once you are satisfied with the parameters, you can view the source code of a sample application that you can save and compile with a reference to the OverlaySymbol.as code. You can check out the application here . You can load an image of Mount Etna in Sicily. And like usual you can download the source code from here .

I'm very proud to announce that we just released the 1.1 version of the Flex API For ArcGIS Server . Check it out, and tell us what you think. Happy mapping all.

Though sometimes an ArcGIS map service extends the full world, an application that uses this map service will want to restrict the extent to a way smaller extent. In this post, I will be talking about how to achieve this. Check out the application in action. Note that when you pan the map, it "springs" back to the initial extent. And even after you zoom in, the spring is still in effect. So how did I do this is as follows: I created a sub class of the Map class. In the constructor, I added a LOAD event listener. The LOAD event handler adds two EXTENT_CHANGE event listeners, where one of them is at a lower priority to guarantee that it will called last. This low priority listener sole purpose is to get and save the map extent as the initial extent. In addition, the initial scale is computed and saved too. Now, upon an extent change, we check if the initial extent intersects the new extent. if it does, then we compute the horizontal and vertical overlap distance and we ad...

In this post I'm demonstrating how to use Cocomo 's data messaging to enable collaborative mapping. One or more map application can share their active extent and whiteboard using the mouse. Though the application is not very sophisticated, it demonstrates the extensibility of the flex api and the power of Cocomo. BTW, I highly recommend that you read Ryan's blog post on how to get started with Cocomo. Using the CocomoDevConsole, I created a CollectionNode and named it 'cocomoMap', and I added two non-persistant Nodes . The application uses the node 'cocomoMapExtent' to publish and receive active map extents, and the node 'cocomoMapPoints' is used to publish and receive drawn polylines. One of the cool things that I like in Cocomo, is that you can register a class with the MessageItem registry to enable the publishing and receiving of message bodies in 'native' format. So, I registered the class SpatialReference , MapPoint , Polyline and...

I will be speaking at 360|Flex this year in Indianapolis. But this time, it was decided to let the community vote on subjects/speakers. So...I'm asking for your vote . The Title of the session is Yet Another Flex Mapping API - NOT! where we will demonstrate the Flex Mapping API For ArcGIS Server, where we will deconstruct live real-world mapping applications and algorithms such as dense clustering, auto labeling of features, collaborative editing, real-time asset tracking and client/server collaborative Geo-Processing. In addition, we will demonstrate how to create your own layer, geometry and symbol extensions for superior rendering performance taking advantage of the FP10 drawing API. Vote here and vote often.

In this post, I will be demonstrating how to label map points using the flex API for AGS. This work is strongly based on Kevin Mote’s “Fast Point-Feature Label Placement For Dynamic Visualization”. In this application, I’m loading city data from a shapefile. The city attributes contain the city name and rank. Rank is a number between 1 and 7 where 1 indicates a very populated city and 7 indicates a much lesser populated city. Upon a map load event, the shapefile is read and the cities with a rank less or equal to 3 are selected then sorted in descending rank order. Each shapefile record is converted into a LabelGraphic and added to a list. A LabelGraphic is a subclass of Graphic and has a TextField as a child. A ExtentChange event listener is added to the map, in such a way that whenever the map extent changes, a LabelManager is created to manage the LabelGraphics in the visible extent. A LabelManager has a spatial index (a trellis per Mote’s) to quickly locate label candidates (mo...