Last week I realized that I could create map markers using the Google Maps API for Flash and the Degrafa framework. I believe creating interactive markers in MXML this way is much easier than the alternatives.
I whipped up this example app, which shows how to extend OverlayBase and implement the IMarker interface. Read here for my comments about extending OverlayBase. The IMarker interface is mostly self explanatory, however, there were a couple of methods I did not bother implementing.
I'd also like to mention that in my experiments I was able to add numerous Flex components to a Google Map: Canvas, Panel, Button, TextInput, etc! It's quite wonky, but it works to some degree. More on this later...
Caveats with these markers
- Need to figure out how to change the "z order" (or child order) of markers when they are clustered close together (like the real Marker class does).
- If using these w/MarkerManager, you need to modify the method signatures in MarkerManager to accept IMarker instead of Marker.
- These are the result of an afternoon's experiments, the code is not necessarily optimal.
I'm still wrapping my head around all the things you can do with Degrafa. The more I work with it, the more I like it.
Cheers,
Sunil
14 comments:
This is very interesting Sunil, thanks for posting. I'm interested in using Flex to display markers for objects pointing into a specific direction. I think what you have done here shows that it's potentially possible even though I'm still pretty much a Flex neophyte. I love Degrafa too, I've used their gauges before on a Dashboarding project we did, had to customize them a little, they are very well done.
Look forward to seeing you develop this more I think it will help me a lot in my new project.
D.
This is really nice effort. Can you please make me underst and with this how can we add Image and give some label text to it to fomr the marker.
Thank you for you help on this.
This is really nice effort. Can you please make me understand with this how can we add Image and give some label text to it to form the custom marker.
Thank you for you help on this.
Sandy, it's pretty easy to add custom images and labelt text to a marker. Check out markerOptions.icon and markerOptions.tooltip methods.
Sunil I'm particularly interested in the possibility of rotating a custom image, do you know if that is posible? It looks like you are either rotating or simulating rotation in your example with one of your custom icons but i can't really follow your code to figure out what you are doing.
J
Penetrating a bit deeper in your code I can see you are using the Degrafa controls to rotate the 'SpinnyLines' Marker, so I guess Degrafa supports that. Would it be possible to do this with a custom image?
i.e. a .png or a .jpg etc.
@Sandy unless you are trying to do something fairly complicated, Jean is right ... you can make simple markers with images using the MarkerOptions class.
@Jean for rotation, I used a Flex AnimateProperty (i.e. a tween) to change the rotation of the marker icon. Note, I also used a Degrafa RotateTransform to draw the spinny lines, but this is unrelated to the spin effect on mouse over.
That's why I think this is such a cool approach, because you can do all the fun and easy Flex stuff (effects, view states, MXML markup, etc) to create markers.
Sunil, yeah it is a cool approach. What I'd like to actually do is change the direction of a custom Marker image based on some data. I've found some examples of using the Flex AnimateProperty but not really what I'm looking for. Is it possible to say, rotate a Marker 45 degrees?
I mean for example if your marker is custom image of a a triangle ....
I was experimenting with the rotate effect based on this example
http://livedocs.adobe.com/flex/3/html/help.html?content=behaviors_05.html
And attempted to use that code to rotate a marker. Which compiled fine but when I clicked a button to rotate the Marker i got this strange error message: TypeError: Error #1006: dispatchEvent is not a function.
I don't know what that means...
I'm late to the party. Can you give some details on how to implement the setOptions interface from IMarker? I've been trying for ages. It seems in your code the latLng is set not via a getter/setter. I tried that way too for the MarkerOptions but no success.
Thanks
HI Brian,
If you want to implement the setOptions() method your marker would need to have the logic to process a MarkerOptions object and then render itself appropriately.
For example, MarkerOptions has a "radius" property to specify the radius of the marker. So in your setOptions() method, you would get the radius and set some internal property on your Degrafa marker to use the proper radius.
My examples were simple enough that I didn't want to re-invent all that functionality. I think you should be able to take a similar approach and get the parameters to configure your marker in some other way.
Hope that helps :)
Awesome example...just what I was looking for!
Thanks!
This is very good , many thanks for sharing GoogleMaps and Degrafa looks very interesting.
Post a Comment