Flex: Modest Maps Demo

I have been playing around with using Modest Maps in Flex. This is a Flash mapping solution which sits over existing providers of map tiles like Google, Yahoo etc.

Simple demo here.

Features

  • Use of Flex Modest Map.
  • OpenStreetMap layer.
  • Nice slider for zooming in and out.
  • I have had to modify the Flex ‘map.as’ file to add a ‘commitProperties’ method to get this to work. It seems to be missing this. Right click on the demo to ‘View Source’ or download the FlexBuilder project to get this modified version here.

  • Tooltips.
  • Markers with user definable icon.
  • The icon is embedded into the EventMarker class but could easily be passed as a parameter.

  • HTTPRequest to fetch XML.
  • E4X Parser to extract information from XML nodes.
  • Grid to hold traffic events.
  • Click on an item and it is centred in the map.

  • Marker event handler.
  • Click on a marker and it is highlighted in the grid.

    This uses a some sample data I collected from the BBC traffic feed for Strathclyde and in particular Glasgow.

    Flex builder project in zipped form here.

    If you have questions about the Modest Maps API then best place is to go here.

    Update

    I have updated the demo and source with changes to implement the selection of icon based on the traffic event severity.

    Flex: IFrame Demo Update

    As promised here are the previous demos with the need for the web server removed. I have seen the occasional security error popping up but you know how it is, they disappear and then you can’t reproduce the circumstances. Any problems download the code and email me your thoughts.

  • HTMLTest
  • This is the original demo. Server reliance removed. Go here

    Right click and choose ‘View Source’ to view the source code.

    Full Flexbuilder project here.

  • IFrameDemo
  • Brian Deittes original demo. Server reliance removed. Go here

    Right click and choose ‘View Source’ to view the source code.

    Full Flexbuilder project here.

  • SimpleHtml
  • Loads html page locally. Works a treat under Firefox. Doesn’t work at all launching from FlexBuilder under IE but does work when deployed as a web page, strange! Download the source code and tell me why. Go here

    Right click and choose ‘View Source’ to view the source code.

    Full Flexbuilder project here

    Things to remember

  • WMode=Opaque
  • The IFrame component will do all the gnarly stuff for you except the change to the Flash embedding code for switching the “wmode” to “opaque”. Go to the FlexBuilder demos and examine the ‘index.template.html’ code, do a string search for ‘wmode’. See these changes? Add them to your project.

    For a full explanation of what this is and why go here.

    Use of the IFrame is essentially punching a hole straight through your Flex application to the browser. The javascript helper functions are there to orientate the html iframe/div combination so that it always matches the ‘hole’ you have made. Think about this for a minute or two and you will realise what the limitations are and why.

  • Assign an id to your IFrame.
  • Failure to assign an id to the IFrame component will lead to unpredictable behaviour. The html iframe which holds the contents of the source url is tracked by the javascript functions from it’s id. The same id assigned to the Flex component.

  • Switch javascript on.
  • Don’t have javascript switched on? Where do I start? It won’t work because the component requires javascript helper functions which it embeds into the holder page when it’s instantiated. The embedded javascript is reused by multiple instances of the component. No javascript support and the IFrame will not work.

    Flex: IFrame with local file.

    I have been playing around with creating a demo app which runs as a file (instead of through a web server). Accessing a remote url as the ‘source’ value for the IFrame works perfectly but I have noticed strange behaviour if you access a local html file. Works fine in Firefox but I get a blank page under IE. I don’t have a fix for this yet but my feeling is that it is something to do with the security settings for IE. If I access the simple demo through the web server under IE it works as expected. It’s only if I load the flex app as a file!

    Anyone having problems, if you post a comment please state the browser you are using.

    I may not have not made it clear enough but the IFrame component requires a change to the html-template file for your app. Please examine this file in the demo apps to see the addition of – “wmode”, “opaque” and the appropriate places where this is added.

    I cannot state enough the importance of setting up your own localised web server. This just needs to point to a place on your disk where you can dump web pages and view them as served up by Apache. Anyone serious about web development will tell you the same thing. There is lots of help on the web on how to do this.

    Updated demo apps coming soon.

    GWT: Flex integration

    Well done to Christian Voigt for putting GWT and Flex together in a way that works. He has written a small library and demo plus a clear explanation on his blog page for those interested here.

    I have had a look at his solution and it makes mine look horribly over-engineered which I guess it is (plus it didn’t work properly). It’s been a while since I looked at this stuff and I haven’t a clue what I was thinking with my fancy controllers and such!

    Flex: flexTraffic Jam Cam Image Size

    I notice that the BBC have changed the default image size of their Jam Cams. I haven’t had time to update the application but I notice that if your click on the image selection twice it will expand to fit. I am so busy that this stuff has been relegated to the ‘todo’ list for now.

    Update

    This has been fixed but only on the flexTraffic site.