The FusionTablesLayer in the Google Maps API is a bit of a black box. Fusion Tables generates a clickable tile overlay to use place in your Maps API application, but you don't get direct to change anything. If you want to change data, you have to do server side calls. However, the FusionTablesLayer does give you access to row data on click, which allows you to do interesting things server side.
In my sample interactiveftlayer, I use a Fusion Table of Google's corporate addresses. The table has a simple Color column, with values of 0 or 1. In the Fusion Tables map visualization for the table, I configured the Marker Icon such that values of 0 are green, and 1 are blue. The color means nothing of course about the actual office.
In interactiveftlayer, I suppress the InfoWindow by adding a suppressInfoWindows: true option to the layer initialization. I then add an event listener to the layer that captures the click event on the layer. This gives me row information about the feature clicked. I then send a XMLHttpRequest to the server (in this case App Engine) with the other color (1 if the color is 0, 0 if it is 1). After the response from the XMLHttpRequest, I reload the layer.
There's one tricky part, and hopefully we can find a way to improve this on the Maps API end. The FusionTableLayer is cached by the browser. Which means that even if the data has changed, the layer stays the same, at least at zoom levels visited while it was visible. This includes, BTW, not only the images but the row data associated with them. In order to defeat that caching, I append a Where parameter to the layer selecting for a Id greater than a random number from -1000 to 0. Since I know all Ids are greater than 0, I can do this. I'm not proud of that strategy, but it works.
3 comments:
Hey Mano!
"The FusionTableLayer is cached by the browser. Which means that even if the data has changed, the layer stays the same, at least at zoom levels visited while it was visible."
I was noticing this on my demo from the maps code jam today...I thought maybe it was just me! btw/ Thanks again for directing this, it was a great time.
(as you already know) I used this to finally find a way to embed iframes into the gMaps balloon. My goal was to make simple locational data (cities for example) and start enriching them with more web content in the balloon.
code example (thanks for your help with this): https://docs.google.com/leaf?id=0B8a6H3uxLM1RYjJjNWRjNjktOWFlNC00OGRhLTlmOTgtNTc4NDA0ZDNjOTU1&hl=en
Thanks Wes, very nice
Good post but i have a problem.
When i click on the markers the color don't change.
The console says that the page /ChangeColor don't find.. where is the problem ? don't work the XMLHttpRequest ?
Post a Comment