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.

Project Updates #1

After getting gwt-jsviz out the door I feel it’s time to take stock of my current list of on-going projects.

    gwt-jsviz

The gwt-jsvix API wrapper was something that I had been putting some time into on and off for quite a while so I am glad to have the first revision up and running. Already I have found stuff that I want to put into it. It’s just a case of getting round to it. The first version is purely a wrapper for the existing code, nothing else. I have a tabbed version of the demos but there is issues with this that I can see are going to take a wee while to resolve so anyone who wants to use this with GWT will have to stick with the vanilla version for now. It might seem a strange thing to bring to GWT but as soon as I saw Kyles demo of the music mashup I could see the potential for applying this to a combination of the Yahoo REST search API and the Timeline.There, I have given the game away and now someone will beat me to it. I am not surpised that Kyle Scholtz has been snapped up by Google as he is clearly a clever guy.

    gwtsimiletimeline

I am quite proud of this as it was my first open source project and it’s probably the most complete. The core javascript ‘widget’ is beautifully written by the guys at MIT and it’s no surprise that it was relatively easy to wrap up and slots into GWT with very little effort. I have received a request to enable the timeline to read it’s XML from a text string and this is what I hope to put some time into. My gut feeling is that it’s ‘doable’ and will extend the core component in pure GWT fashion.

    gwt-yui-ext

This is the most interesting (and time consuming) of all the GWT wrapper API’s I have attempted. I had a look at the source javascript, at the time I was writing the timeline stuff, and concluded that it was ‘doable’. In reality this has the the most real GWT code of them all as the way that it works involves manipulating the RootPanel DOM to hook into GWT.

I started off with the most complex of the demos the BorderLayout. This proved a good idea as a lot of what I gleaned from doing this went into the BasicDialogPanel and LayoutDialogPanel.

I have focussed on the original demos as this is the acid test for wrapping them to the GWT platform. There is still work to do on the current list of demos which is why I haven’t put them into a new release. Anyone wanting the code for these should just go to the source trunk and get the latest source image.

I am a bit undecided on the targets for this library. There are a a few bugs in the current demos which need addressing so I think I will try to get those fixed for now.

    WORK IN PROGRESS

– gwtsimiletimeline: Timeline to read text XML

– gwt-jsviz: JSViz to have tabbed example.

– gwt-yui-ext:
. DialogPanel and LayoutDialog have bug where the background can become the focussed view stopping any further interaction with the main dialog.
.There are issues with the resizable component namely, the transparent handles doesn’t work under IE and the animation for the control doesn’t work at all. I might drop some of this stuff from the next release.
.The grid need a better example of inserting data.
.The dialog examples need to show non-modal dialogs.

Not too onerous a list.

    Other Stuff

I had started to look at integrating Flex with GWT using the FABridge. I have big ideas for this but little time so we’ll see how it goes.

Also, I knocked together an example of integrating MapBuilder with GWT which I will get around to adding to the links on the top right in due time.

    In conclusion

I think that probably the best way to proceed will be to try and incorporate as much of this technology into the gtraffic site. It’s a great test bed and I can see ways that all this stuff could fit into it (yes even gwt-jsviz, just you wait and be amazed/baffled).

Roadworks and VMS

My web stats indicate not many people actually look at the VMS signs data layer which is probably just as well as there is an issue with the XML feed. The roadworks is not up to date either but this is less of an issue as they are mostly long running types of events which are unlikely to have changed much from 1 Dec when feeds went down.

I am working on this.

gTraffic.info v2.1 Online

I have finally integrated the GWT Simile timeline into the gTraffic.info site. Clicking on a traffic region will cause the timeline tab to appear. The items on the tab are hooked into the map markers so that clicking on the severity icon from the timeline bubble will flip to the map tab and highlight the appropriate marker.

Basically you are now able to browse the traffic incidents both geographically and temporally which I think is a first for a road traffic site and may well be a first on the web as a whole.

I have changed the layout of the help tabs as well. Looks a bit better now.

Timeline screenshot.

Here is a screenshot of Simile timeline implemented in GWT.

Timeline

You can zoom in using IE ctrl+/- or in Firefox right click and choose ‘View Image’.

The timeline can indicate at a glance if there are a lot of long running events like roadworks in a region or if there are many events groups around the same point in time. Events grouped together can sometimes be related like an accident then causing congestion.

Release Imminent

Version 2.0 of the new gTraffic website is now functionally complete. I have been working on a new feature which I think is pretty cool but I have been trying to fit in the development to lunchtimes and evenings and I am struggling to finish it. It’s going to be a surprise. All I will say that it is in keeping with the general idea of a ‘mashup’. I might have to put up a holding page whilst I complete it as I believe Google will discontinue the version 1 map, which the site currently uses, tomorrow.

I haven’t tried deploying a GWT site before but I _think_ everything should work okay as I have been running it though a localised installation of Apache server and it seems alright.

gTraffic v2.0

I have been making steady progress on the next version of gTraffic.info. This has become important as I mentioned previously that Google are due to terminate the v1.0 map control. I never managed to fix the straight html version of the site which uses v2.0 of the map and instead embarked on a rewrite using Googles GWT library. I have to say this was a bit of risk but it has paid off as the site now looks the business. Screenshots soon.

Moving forward

I have finally cracked the problems I was having with rewriting gTraffic code for the v2.0 of the Google maps API. I was getting a null value back as a the xml document when a layer of the road data was requested. I could not figure out what was wrong as it only did it if you selected a ‘region’ from the panel, the map was fine. Well, I am still not sure what is the cause but it seems that any ‘GXmlHttp’ object you create has to have global scope. As soon as I made the request object global the problem went away. This has been bugging me for about two weeks and was putting me off from working on the site so hurray!

So whats changed? A few things..

– the new API calls are use instead.

– ditched GxMarker class as it wasn’t compatible with the v2.0 maps.

– redesigned the xml format for the layers. The new format is much tidier and has lost the flabby extraneous stuff which wasn’t needed.

On the down side there are a few things about the new version of the maps I don’t like:

– really slow compared to v1.o.

– they flipped the zoom level meaning which was thoroughly annoying.

– the infowindows don’t clear when you click elsewhere on the map. This is frustrating as you have to pull the whole infowindow into view to close it from the x icon.

They added support for tooltips but they are a bit crap so I have used a different approach. The new tooltips are not transparent anymore which was always something that was a bit of accident rather than design.

So, how long will it take me to finish? Let me get back to you on that one.

The road ahead

I thought I was finished with the TPEG DOM parser but I started to write some example apps and I confess I have got bogged down. I could release the code tomorrow but I am so close to finishing some cool examples that I cannot bring myself to do it without polishing them up to something worth looking at.

The deadline for the version 1 API for Google Maps looms and I am hoping that I will finish this parser stuff off before I have to look at this. I might have to put the parser stuff on hold. This is a shame cos I really think there is a lot of interesting bits in the examples. AJAX, Python, the DOM and some interesting Python tricks . The way I hear it Google are going to yank the V1 API any day so if the site goes down then you will know why. Rest assured I am working on it!

Thanks to everyone for their kind words on StumbledUpon and in email. I hear you and will try to make the site as good as it can be.

The new site might not look too different (until I get time to look at it) but I have cracked the problem of categorising events (the XML is so generalised) so that you will be able to see the exact reason for an event like ‘Traffic Lights’, ‘ Heavy Load’ etc. Before it was all a little bit general.

Outages

I have been noticing some outages of this site and the gtraffic site recently. My initial thought was that it was my ISP but I have tracked the problem down to the URL ‘forwarding’. This has got me thinking about moving the URL’s over to my main ISP but can’t decide what to do. Apologies to everyone who uses gtraffic. I hope this was just a glitch.

The TPEG dom parser is basically finished but I can’t bring myself to release it with out polishing up a few things. Interestingly one of the examples I had in mind was the generation of html for mobile phones. I was looking at the prototypes section of the bbc backstage site and noticed that a Tom Dyson has done something with this already here. I like his implementation, simple and straightforward. My plan is to generate something similar for the gtraffic site using the new parser code. The new parser is able to tease the event category from the TPEG xml (something which isn’t that easy). So (somehow) you should be able to sort the results for a particular severity, category etc. That’s the plan anyway.

I have ditched the idea of an AJAX rss reader for the RSS generated traffic data as it’s way too complicated to get bogged down in just now. I have spent enough time working on this stuff and I need to revamp the gtraffic site to use Google Maps API 2.0.

← Previous PageNext Page →