Flex: UMap TerraServer Demo

Yet another UMap demo. This is just a stripped version of the some of the code from a previous WMS demo. I have modified the WMS settings to point to the TerraServer WMS feed.

IFrame Map App

Right-click to view/download the source code.

I am having a bit of a rest from developing for the moment. I will get round to peoples requests for updates in a week or so.

Flex: UMap WMS Custom Provider Traffic Demo

Here is another UMap WMS Provider demo

This is the Glasgow traffic data from here and applied to a WMS feed from here.

This uses the UMap component from AFComponents.

IFrame Map App

Right-click to view the source.

The WMS feed is defined in the ‘DataModel.as’ class.

public static var WMS_TILE_URL:String = “http://www2.demis.nl/wms/wms.ashx”;

public static var WMS_TILE_LAYERS:String =
“Topography,Builtup%20areas,Coastlines,Waterbodies,Inundated,Rivers,Streams,
Railroads,Highways,Roads,Trails,Borders,Cities,Settlements,
Spot%20elevations,Airports,Ocean%20features”;

public static var WMS_LAYER_FORMAT:String = “Image/png”;

This doesn’t use the OSGR conversions of the previous demo and instead uses the straight WGS84 projection “EPSG:4326”.

Update #1

Updated to new version of UMap control 1.1 02/08/08. See here.

Flex: UMap WMS Custom Provider Demo

Aint it the way. You wait for one map demo and three come along at once. I have been trying out the UMap component from AFComponents. Here is the latest demo.

IFrame Map App

The first thing to note is that this is not using Google or Microsoft to provide the map tiles. I have implemented a custom tile provider class ‘WMSTileProvider’ which talks to a mapping server using the WMS protocol.

The map is supplied from here.

This tiles are from here and have been generated by scanning out-of-copyright Ordnance Survey maps and stitching them together. Very clever.

The AS3 UMap component provides a means to hook your own custom tile provider into the underlying map mechanism. There is a partial explanation of this on the forum here and here.

The forum posts are more of a signpost as to how you could go about plugging in a Custom provider for the map. There was no downloadable code, until now.

I have spent a fair bit of time trying to get this working and I have adopted one technique. There may be others. The main trick is to override all the overridable methods in your ‘Provider’ subclass.


public class WMSTileProvider extends Provider
{
public function WMSTileProvider(defaultData:Boolean = false,
settings:URLRequest = null,
language:URLRequest = null,
copyright:URLRequest = null)
{
super(defaultData, settings, language, copyright);
}

override public function getDefaultLanguage():String
{
return “EN”;
}

override public function getDefaultCopyright():String
{
return “(c) – OS NPE (1940s) – Public Domain”;
}

override protected function parseSettings(data:String):Boolean
{
return true;
}

override protected function parseLanguage(data:String):Boolean
{
return true;
}

override protected function parseCopyright(data:String):void
{
trace(data);
}

}

The next trick is to supply dummy requests for the language and copyright strings. Normally these would be php requests but I just changed them into xml files. As long as you override all the methods in the Provider subclass you won’t get any annoying exceptions.


var settings:URLRequest = new URLRequest("settings.xml?rand=" + Math.random());
var language:URLRequest = new URLRequest("language.xml?rand=" + Math.random())
var copyright:URLRequest = new URLRequest("copyright.xml?rand=" + Math.random());

_map.control.provider = new WMSTileProvider(false, settings, language, copyright);

You have to put something into language.xml and copyright.xml they can’t be empty.

The settings.xml file only need contain the minumum definition:



http://www.afcomponents.com/components/umap_as3/GoogleLogo.png

Not so complicated when you know how but not easy to work out from the UMap forum posts.

An additional hurdle for me was that the WMS feed required the boundaries of the tile view to be supplied in British National Grid (Easting and Northing) values. I had some old javascript kicking around (which I thought I’d lost) which implements WGS84 to OSGB conversions. I had half created a AS3 version of this a while back and now it became quite handy (this is bundled into the source code for those of you who might need it).

Truly a pure geeky rush when I saw the map tiles burst into life. It was worth all the hassle. Right-click to view the source.

There is a pretty long list of other WMS data providers here if you want to try creating a different WMS tile layer. If you do it would be good form to post it up onto the UMap forum.

Bugs

– Resizing the map window sometimes makes the tile disappear. No idea as of now what’s going on but I think it’s linked to the resize.

About the dataset

The Avebury data is supplied as a KML file. This is fetched and parsed by the application and then displayed on the map and in the right-hand data grid. The data was downloaded from here.

This is the original drawing William Stukeley made of the Avebury complex.

IFrame Map App

His drawing shows the main complex and the two avenues to the left and right before time and other thieves destroyed most of it. You can see most of the same features on the map view.

For some more information head here.

Update #1

Update #2

Flex: IFrame Map Demo

As requested here is an IFrame map demo. It took me a bit of time as it’s not that easy to put together. The application looks like this:

IFrame Map App

You will need the full project to examine as it isn’t just encapsulated by the Flex code. There is a load of javascript and the magic of FABridge to get your head around.

This is currently only a FlexBuilder2 project. I haven’t got around to converting it to FB3. The reason for this is that there are hooks into the required javascript from all sorts of places including the ‘index.template.html’ file. Recreating the project from scratch means these are blasted by the new project option in FB3 and it’s a bit of chore to generate all the required includes that the project needs.

Here is a (rough) diagram of how the javscript is arranged.

IFrame Map App

The ‘MapClient.js’ component presents a generalised API to the FABridge layer, this abstracts the implementation details of the map down into the controller component ‘MapOSController.js’. The controller implements the real details of whichever map is plugged in to the client. In this case it is OpenLayers whereas in flexTraffic I have a similar component which implements the map interface for a Google map.

Flex

Map communication from the Flex side takes the form of generating events which the ‘MapClient’ has registered listeners for (through FABridge). The advantage of this over using ‘ExternalInterface’ calls is that FABridge marshalls the objects across the Flex/Javascript layer and turns the Plain Old Flex Objects (POFO’s) into javascript objects complete with getters and setters for member variables. This is an extremely powerful mechanism.


flexApp.addEventListener("ResizeFrameEvent", function(event) {self.controller.resizeFrame(event.getWidth()-self.offset, event.getHeight()-self.offset)});
flexApp.addEventListener("CentreFrameEvent", function(event) {self.controller.centerOn(event.getLatitude(), event.getLongitude())});

See the ‘getWidth’ and ‘getHeight’ functions? These are generated automatically by Fabridge from the Flex event which the listener registered.


public class ResizeFrameEvent extends Event
{
public static const EVENT_RESIZE_FRAME:String = "ResizeFrameEvent"

public var width:Number;
public var height:Number;

public function ResizeFrameEvent(width:Number, height:Number):void
{
super (EVENT_RESIZE_FRAME, true);

this.width = width;
this.height = height;
}
}

Javascript

The javscript side communicates with the Flex app by calling Flex methods directly. The method function must be declared in the application mxml at the same level as the FABridge controller definition. Note that the functions which perform this direct communication are abstracted further by making them plugin functions to the controller at the client level.

self.controller.addMapViewChangedHandler(function(a,b,c,d)
{
var flexApp = self.frame.FABridge.flash.root();
flexApp.onMapViewChanged(a,b,c,d);
});

This application exhibits all of the tricks I have invented to embed an html page into a Flex application. If you are interested in using the Flex IFrame then I suggest if you understand this you will have mastered all of the techniques required to make something like flexTraffic. The demo doesn’t have that much of a wow factor but all of the magic is in the code. There is no quick dropin code to acheive this kind of thing, it takes a bit of inventiveness and graft.

Flex: UMap simple Flex demo

The UMap is a AS3 map which you can use with Flex. This is a simple demo.

Sample UMap App

I found myself playing around with this instead of having a clear idea of what I wanted to do. This is always a sign that I should just post it up. It’s lacking a few features like the ability to click on the datagrid row and make the infowindow for the target event popup.

The Flex application embeds the component in a wrapper called DisplayObjectWrapper from here.

I am working on some other mapping related demos including a full IFrame example which should show off the techniques I developed for flexTraffic.

I can’t seem to get the source view to work for some reason. You can download the full Flexbuilder3 project from here.

I noticed a post on the UMap forum talking about memory leaks when using UMap with Flex but I haven’t had a good chance to test this out. If anyone can confirm this it would be a bit of a downer as I was hoping to use this component more.

Update #1

I have made a few ‘improvements’ to the demo application. The marker class ‘EventMarker’ is has been redesigned to subclass from a new ‘CustomMarker’.


public class EventMarker extends CustomMarker
{
private var trafficEvent:EventVO = null;
private var infoWindowStyle:InfoWindowStyle = null;
...
}

This now stores a reference to it’s associated Traffic event object as well as a default style for the infowindow.

The ‘CustomMarker’ class implements

– Custom embedded icon (no shadows). This overlays the underlying Sprite which it makes invisible. The Flex marker doesn’t support the ‘style.icon = ‘ so this is a bit of a hack to get around this. The icons looks clipped I think because of the edges of the map tiles. Weirdly Modest Maps does this as well.

– Icon as a local path. There is a bug somewhere here. If you activate this you will see that the number of icons reported is double what it should be. Also the images appear and disappear as you zoom in and out of the map. Shadows work though!

– Tooltips have been added. The styling for these is the bog-standard Flex styling for tooltips.

As well as this CustomMarker I have tried to link the grid clicks to the markers by a kind of double-latch mechanism (can’t remember the proper name for this). Basically the data object gets a reference to it’s associated marker. When you click on a row in the grid it generates a marker click and the appropriate infowindow should open. Alas, there is yet another bug here. I have placed a trace statement into the point at which the infowindow gets opened.


public function openMarkerInfoWindow():void
{
// Open infowindow
trace(trafficEvent.summary);

// infowindow.
this.openInfoWindow(
{ title:trafficEvent.category, content:trafficEvent.summary },
infoWindowStyle);
}

The trace reports the summary correctly but the infowindow does not always display the correct string. It appears to get stuck on a previous value.

I will keep plugging away.

Update #2

I have discovered that most of the flaky behaviour goes away if you remove the MarkerManager from controlling the marker layer.

– Infowindows popup correctly all the time from grid row clicks.
– You can use the image urls for images and the icons behave correctly (and with cool shadows).

This is a step forward but it’s a shame as the MarkerManager is kind of an essential feature for something like a traffic map where the volume of markers can get quite large.

Update #3

I have switched off the problematic code for now.

– Custom image markers loaded from local disk.
– Click on a marker and the appropriate row in the grid is highlighted.

Flex: Prefuse Flare Force Directed Graph Demo

Prefuse Flare is a visualisation library for AS3.

Sample App

This is a demo I have been cobbling together for about a week now. Right click to examine the source code.

I am extremely impressed at how well designed and implemented the Flare library is. There are, however, a few problems.

The edges sometimes get left behind when dragging the graph. I would like to get to the bottom of this as it’s a bit of a showstopper.

The DataSprite class which is a base class for the graph nodes always calls it’s renderer in the constructor. You can reassign the node renderer when you build the graph (to say use images instead, see below) but it’s too late as the node will have draw it’s default shape.

There are also a few things I have added.

– Modified Button class with the ability to anchor it’s position and display tooltip text.

– EdgeLabelLayout ‘operator’ class which keeps EdgeLabel objects positioned at the mid-point of the graph edges.

– ShapePalette and ImageRenderer classes to implement rendering PNGs on the nodes. I have left the functionality switched-out for now as the library code always renders the default node shape regardless if you plug in a different node renderer.

This is a bit of a try-out to see if I could reimplement the Social Graph Browser with a different graph component. I really like the Flare library and hope to use it more.

Update #1
The issue with the DragControl has been resolved. You can pass in a predefined filter function to limit the items which can be selected:

new DragControl(this,Filters.isNodeSprite);

Right-click to view updated source.

Update #2
I have created an AIR version of this demo which uses the latest version of the Flare library. All of the issues in this original demo have been fixed. Go here.

Flex: Social Graph Browser with Favicons

There is a new version of the Social Graph Browser application.

Sample App

This now has added ‘favicon’ goodness!

After all the graft required to add support for 4,8 and 24bpp bitmap types to the flexlib IconLoader class I wasn’t sure if it was going to be worth all the groundwork but I have to say I reckon this looks pretty good.

This is a graph front end to the Google Social Graph API. It presents the same sort of information you can fetch from the example applications but on a connected graph.

You can find a full FlexBuilder2 project here.

You can find a full FlexBuilder3 project here.

These are complete the complete projects. If you have FB2 or Fb3 the instructions to get them to run are:

Update #1
Probably the last update I’ll make. I have added the ability to double cllick on a favicon and it will requery the Google API for the supplied URI. I.e. it will perform a search on that node. I wanted to implement back and forward buttons for the queries but I find that I’ve run out of steam. If you want to go back you must select ‘Edges In’, requery where you came from and it should appear as one of the nodes.

Update #2
There is a whole bunch of stuff I am supposed to be getting on with as regards the IFrame component but I can’t help myself from coming back to this application and tweaking it.

I have now hooked the grid into the visible nodes of the graph so the grid rows represent all the nodes you can see. I have removed the ‘double-click to navigate’ from the node icons and instead you now double click the row in the grid to indicate where you want to navigate to. Remember your original root node is always in the list but if you navigate away from this you should always be able to go back by selecting ‘Edges In’ and double clicking the node you jumped from. As I have said before this interface is pretty experimental and I am just trying out new things. The best ideas should stick.

Update #3
Some of the favicons for obvious sites like ‘linkedin’ weren’t getting loaded. This was due to a fault in the regular expression used to parse the source url and turn it into one which can fetch the favicon for the site. This was the reason for some of the blank favicons on the end of nodes. The other that some sites use GIF files and not ICO files. Currently GIF files are not handled.

Update #4
I have made quite a few fixes to this plus I have generated a Flex3 version of the project.

– Graph builder generates all the nodes with relationships then tries to join the primary nodes (those generated from valid urls in the initial query) with a relationship and then as a plain edge. The reason for this was that urls in the query were not appearing on the graph unless there was a proper relationship.

– I have had to modify the base graphing library to fix an irritating bug where the mouse-up wasn’t getting captured when dragging the graph.

– GIF icons will cause the graph builder to attempt to match an appropriate icon for the relationship.

– If you switch the favicon proxy off it will use default icons.

– I am no longer using the socgraph proxy script since Google have deployed a crossdomain.xml file for the endpoint. The switch is still there though.

Update #5
I should really stop fannying around with this and do some work on the IFrame but I am starting to get bloody minded about this – I will get this working with no errors if it kills me.

– Definitive bug fix for loading icon (for now at least). There should be _no_ more exceptions to do with these anymore.

– Integrated a new edge renderer. This one now indicates the direction of the label relationship. Can’t decide if this looks better or worse than the old one.

– I _think_ the bug where dragging the graph gets stuck is fixed.

I started to bring in some of the other layouts that are available for flexvizgraphlib but there are issues with the rendering of the labels so I had to leave them out for now.

Bugs
– The autofit seems flaky as to when it gets applied.
– From a large graph, if you make a query with no nodes the old node connectors sometimes ‘ghost’ i.e. they are still there.
– I am seeing occasional query failures. Strangely this never happened with the proxy.
A query with a large number of nodes will cause your browser to come to a standstill. Try focussing your search to ‘Edges In’ or on a particular uri.
The IconLoader is still occasionally throwing errors for parsing icons. As I see them I will try to track them down. If your site causing an exception mail/comment me and I will try and figure out what’s going on.
I am sometimes seeing an exception from the processing of the graph data. Haven’t tracked that one down yet. It happens after a query but before the graph has been drawn.
Nodes which should get the default favicon don’t have anything. I think this is because the favicon is being returned but the bitmap is corrupt or blank. Strange.

Flex: FaviconGrabber – Remote icon fetch

This application FaviconGrabber loads a remote icon from a specified url.

Sample App

This was developed to test out the technique of pulling a favicon from a remote url for display in a Flex application. The application I had in mind was the Social Graph Browser where the favicon for a results urls would be embedded into the graph nodes (where available). I thought that pulling favicon files from a site would be simple to do but it turned out to be a bit of an adventure.

Firstly you can’t use HTTPService to get the icon directly. If you run the app locally it will fetch the data but since the service only deals with xml and text it will throw a ‘decode’ error. I.e the binary data in the icon contains bytes which are not accepted by the service. What’s more if you deploy the request to the web site it will simply throw a security error since this is an illegal type of operation unless the remote site has a crossdomain.xml file.

My final recourse was to write a Python cgi script to fetch the icon and then encode it into Base64. This is an encoding scheme which lets you embed binary data into xml. You can see the script bundled into the source.

Okay, so I had my Base64 encoded data. I can use HTTPService to execute the script and get the data back. Flex has a built in class Base64Decoder which you can use to decode the result of the proxy query. i.e.

var decoder:Base64Decoder = new Base64Decoder();
decoder.decode(encodedData);
var rawData:ByteArray = decoder.flush();

Having got the data I realised that I had no means to display it. The ICO format is not a format that AS3 recognises.

A bit of a rummage around the internet and I discovered that flexlib has an IconLoader class which will display ICO format files. The problem is that it will only do it from an embedded resource or local url. It doesn’t take raw data.

This was already starting to become a pain in the backside for what was supposed to be a ‘nice to have’ feature of an application that was pretty esoteric to begin with. Still I soldiered on.

After modifying the IconLoader class to take raw data I got the Facebook icon working. Ah that sweet feeling of success how fleeting it is! The next icon I tried was from google. Didn’t work. Eh! Tracing through the code in debug mode it turned out that IconLoader didn’t support that particular icon format (8 bits per pixel [bpp] as it turns out). In fact all it supports is the easy peasy 32 bits per pixel which handily enough matches the AS3 bitmap format exactly. Since most of the favicons I subsequently looked at were either 8bpp or 4bpp I was well and truly stuffed.

There was nothing for it but to write the code for loading the other icon types into the control. This was a bit of work and I am now on familiar terms with Microsoft bitmap formats. More so than I wanted to be. I will be submitting this code back into flexlib so that others can use it. The extended component is bundled with the source for FaviconGrabber. It now supports 4bpp, 8bpp, 24bpp and of course 32bpp Windows icon formats.

Application here.

Source code here.

All that and I still haven’t incorporated it on the graph! That’s my next task.

Update
– Fixed bug in loading multiple icons from the same ICO image.
– Altered FaviconGrabber to accept any url. You don’t have to stick ‘favicon.ico’ onto the end. Just put in the url and it will attempt to get the associated favicon.

Flex: IFrame demos updated to Flexbuilder 3 & Other stuff

Flex IFrame

I have updated the IFrame demos source code to Flexbuilder 3. You can find them on the project page here.

A recent correspondence reminded me that there is a problem with loading local html when developing with Flexbuilder. I haven’t figured out the problem yet but if you use IE as your browser with Flexbuilder then local html doesn’t render. If you deploy it to a web server it works fine, aaargh!

I am thinking that it has to be an IE security setting but after a fair bit of playing around with the settings I am none the wiser. My advice is to use Firefox for now.

You can set the default browser for execution/debugging through the Flexbuilder preferences settings:

Window-Preferences/General/Web Browser.

Choose Firefox (assuming you have it installed). If you don’t have Firefox installed then I suggest as a web developer you do.

If you are using the IFrame then I would like to hear from you. I know some people have employed it in various ways. If you make general improvement that you think would benefit others then email me and I will include it into the demo sources.

Social Graph Browser

Sample App

As I don’t have any updates as yet to show I thought it might be worth mentioning that I have been working on this to extend the rendering of the nodes to show ‘favicons’. I thought this would be straightforward but it’s turned out to take more focus than the entire graph browser took to write.. and it’s still not complete. I have 75% of it done but I am finding myself immersed in documentation for icon file formats which was something I hadn’t expected.

As part of this I have created an application called Favicongrabber which demonstrates the technique. It’s not for everybody as it uses a Python script to download the icon and compress it to Base64 which is then decoded on the Flex side (somebody please tell me there is an easier way). I am completely bloody minded at finishing stuff so I hope to have something to show soon which I think is probably going to be of interest to anyone who want to grab images from remote sites using AS3 and in particular ‘favicons’.

Flex: Social Graph Browser

I have created a Social Graph Browser application.

Sample App

This is a graph front end to the Google Social Graph API. It presents the same sort of information you can fetch from the example applications but on a connected graph.

You can read up on the Social Graph and what it is here.

In short, Google have applied their web crawlers to collect semantic link information which are links between things. The links not only provide a connection but they also describe relationships between these things. Semantic links underpin the next generation of the internet and are a big deal in social networks as they are a means to track relationships.

The Browser uses the same Flex framework as the the SPARQL browser. The two core components which do all the work though are the parser which extracts data from the JSON data and the algorithm to build the graph.

This application uses flexvizgraphlib for the graph component.

You can find a full FlexBuilder2 project here. This is licensed under the MIT license. The reason for this is that it was just easier given that the 3rd party components used are under the same license.

  • JSON Parser
  • The Google Social Graph API uses JSON to return data to any request made through the graph endpoint. This format is convenient for bog-standard web pages but a little more work under Flex. I had to use the JSON parser which is bundled with the corelib library. This serialised the returned JSON into AS3 Objects. This AS3 strutures were processed further to generate node information. I could not use the serialised AS3 structures in the manner given in most of the Noddy Flex JSON examples that are kicking around. This is because the structures were heavily nested and used a great deal of name paired behaviour between keys and objects (look at the code).

  • Graph Algorithm
  • There are different approaches to building a visual graph to represent the JSON graph data. You can see a couple of them here and here. I liked Victors the best as has provided a good test bed to try out things which is the osocial web site. The osocial site is just the right size to provide data which can be queried with the Google API and represented on the graph when developing.

    Basically the approach I have taken is:

    – Build all the nodes at the start.
    – Interate through all the relationships and draw the edges between nodes and label the edges with the appropriate associations. If a node already has an association when processing edges then move on. I make the assumption that a doubly connected node will have the same association although I don’t believe this will hold true for all cases. This means we may be losing associations.

  • Uses
  • You should be able to use this to the sort of stuff described here and display the graph for it.

  • Usage
  • Okay, a few notes on getting the best from this.

      If you deselect all the checkboxes for query conditions your results nodes will not be connected.
      Try moving the separation length slider up and down to expand or contact the number of visible nodes.
      To get an expanded graph deselect the ‘autofit’ checkbox and move the ‘Link Length’ slider up and down.
      The graph can get out of hand if there are a lot of edges. Try selecting the ‘Follow Me’ checkbox only.
      Pointing the browser at myspace is pointless as you will get an unmanageable number of results. A better approach is to pick a particular myspace page and query that instead.
      Blue circles represent result or ‘primary’ nodes (as I call them).
      Grey stars represent ‘Edges Out’
      Blue stars represent ‘Edges In’
      You will only see ‘claimed’ or ‘claims’ nodes when the ‘Follow Me’ checkbox is selected. If you select this you will see that the result node list (on the left) expands to produce follow nodes.

  • Known Bugs
    1. If no node appears after making a query try flicking the ‘Separation’ slider up and down.
  • Update 0.0.2
  • – Fixed error when blank search issued.
    – Fixed About box problem where application unreachable.
    – Added in ability to switch between graph types Normal/Force Directed

    ← Previous PageNext Page →