Using FXG Assets as Custom Markers in Google Maps

Pamela Fox‘s talk at Web09 got me all hyped up on using custom map markers in Google Maps and it’s possible in Degrafa but I figured with Catalyst and Illustrator out there supporting FXG, it should be possible in FXG as well. Luckily the answer is “mostly yes”.

I’m hoping to do a deep dive on FXG later but I’ll give the main points here. There’s a difference between MXML Graphics and FXG. They use the same tags but MXML Graphics can be altered at runtime. FXG files are more like static assets that can’t change. This means you get a bit more performance because they’re optimized at compile time. Using MXML graphics as marker icons isn’t possible because there doesn’t seem to be a way to get a DisplayObject from MXML Graphic assets. But in the latest nightly builds of the Flex 4 SDK you can treat FXG assets just like an image or SWF and reference it that way in your code. That makes using FXG for custom markers simple. It also means it’s very easy for a designer and a developer to work together and be able to use things like source control while the designer and developer are each working in their tools. The screencast below shows what I mean.

The first thing you need to do is create an FXG file. This can be done with Illustrator or Fireworks CS4, just create some artwork and save as an FXG. Note that you can take any freely licensed SVG file and turn it into FXG using Illustrator CS4. Once you’ve got that, drop the FXG file into your Flex project. It’s a good idea to follow normal class naming conventions with the first letter being capitalized.

Once that’s done you can create an instance of that asset like you would any other ActionScript class and then set the icon property of your MarkerOption class to your FXG asset. In the case below I’ve got an FXG file called HikerIcon in the assets folder.

	import assets.HikerIcon;
 
	// this is in the onMapEvent handler
	var hikerIcon:HikerIcon = new HikerIcon();
	var markerOptions:MarkerOptions = new MarkerOptions();
	markerOptions.icon = hikerIcon;
	markerOptions.tooltip = "FXG Test";
	markerOptions.iconAlignment = MarkerOptions.ALIGN_HORIZONTAL_CENTER;
	markerOptions.iconOffset = new Point(0,0);
 
	marker = new Marker(map.getCenter(), markerOptions);
	map.addOverlay(marker);

That’s it, you’re all set. As I mentioned, I did a screencast below that talks more about the workflow for designers and developers using FXG. Because FXG is XML-based, it fits with how developers think about the project and can be modified if need be by developers inside of Flex Builder. But since these are graphical assets, designers have the option to make changes just like they would be able to with other external images. Since this is a big screencast, I suggest you click on this link to watch it instead of trying to view it in the small area below (or use full screen mode).

Ryan Stewart – Mountaineer Coding

Just an average guy trying to drink above average beer.