How do I add Javascript onClick() handler to county maps?

[TerryONolley]

FusionMaps does 99.9% of what I need. But after poring through the documentation I can not find out how to do something I thought would be very simple.

 

 

 

I need to add an onClick() handler to the county-level map views. When a county is clicked on, I need to initiate a remote scripting call to a web service and unhide a DIV that will display the data returned for the county clicked on.

 

 

 

Since the map is a Flash object, I am guessing that you can't have a DIV floating on top of the map and any mouse events will be handled by Flash and not JS.

 

 

 

This product is great for updating and displaying maps based on existing data - but how do you use the maps as an interface to updating the data? The Javascript API seems to only deal with displaying data.

 

 

 

If I knew what I was trying to do was impossible then I could drop any further consideration of purchasing this product. If it is possible, how do you add a simple onClick handler to the county map view?

 

 

 

Basically, the onClick handler would pass the county clicked on to a web service which would return data about that county. I would then display a hidden DIV and use that data to check checkboxes within that DIV. As the user then checked and unchecked the checkboxes, I would potentially change the color of the county on the state map and when the user hit the "Save" button in the DIV I would send the checkbox states back to the web service and re-hide the DIV - returning the system state to what it was before the county was clicked on.

 

 

 

To do that in Javascript on an HTML page would only take a few dozen lines of code and about 10 minutes (assuming the web service already exists - which it does).

 

 

 

How do I do that with this product?

 

 

 

Or do I need to attack it from the Flash side? Hiding and un-hiding a Flash object that does the same thing?

 

 

 

What I want to avoid if possible is adding a frame to hold the DIV with the checkboxes because that looks very ugly.

 

 

 

Thanks!

[saptarshi]

Hello,

 

 

 

Welcome to the forum and apologies for the delayed response on our part.

 

 

 

Yes, it is possible to unhide a DIV using a JavaScript function call.

 

 

 

To do this you have to use drill down to invoke a JavaScript method which will then do the required unhiding of the DIV.

 

 

 

Have you tried doing this? Please see the documentation page here:

 

 

 

http://www.fusioncharts.com/maps/docs/Contents/DrillDown/JavaScript.html

 

 

 

Hope this helps.

[TerryONolley]

Thank you so much! That did the trick. I am now able to call my JS function from the county map.

 

 

 

I do have another question - what is the most efficient way to change the colors of specific counties or states based on run-time changes to data?

 

 

 

I am hoping that changing the color of a single county can be done without requiring a full page refresh.

 

 

 

In my application, clicking a county now invokes the proper JS function and I am able to display the div which accepts user input and calls another JS function when the user wishes to save the data. I send that data to a web service which updates the database.

 

 

 

This brings me to the last piece of the puzzle - now that the server-side data has been updated, how do I update the client-side (FusionMaps) data to reflect this change and how do I change the color of the county that was just clicked on in the most efficient way? I don't want to have to do a full page refresh if at all possible.

 

 

 

Thanks again for the help!!!

[Rahul Kumar]

Hi TerryONolley,

 

I am afraid, the color of the specific country/states can't be changed at run time as of now.

 

To change the color you would need to pull the xml data again to the map from the server.

 

But instead of reloading the complete page you can just reload the map data to change the color of specific country/states using setDataURL method, which works like AJAX.