FusionMaps XT uses the FusionCharts jQuery plugin that takes care of all the products of FusionCharts Suite XT including FusionMaps XT.

FusionCharts jQuery plugin also provides a custom jQuery selector :FusionCharts which you can use to select all the maps rendered using FusionCharts jQuery plugin or using FusionCharts JavaScript Class. You can use this custom selector as a conventional jQuery selector.

In this page we will learn how to use :FusionCharts custom selector to select and manipulate map settings.

To select all maps in a page you will need to use $(":FusionCharts") selector. The code snippet below shows how to select all the maps inside a page and set a common fill color(fillColor map attribute) to all selected maps:

$(":FusionCharts").attrFusionCharts( { fillColor: "FF00FF" } );

To select all maps in an HTML element you will need to use either :FusionCharts selector as a part of a composite selector query or using find jQuery method. The code snippets below show various way which you can use to select maps in HTML elements:

$("div :FusionCharts").attrFusionCharts( { fillColor: "FF00FF" } );

The above selector finds all maps inside all DIV HTML elements.

$("div :FusionCharts").attrFusionCharts( { fillColor: "FF00FF" } );

The above selector finds all maps inside all DIV HTML elements.

$("#topRow :FusionCharts").attrFusionCharts( { bgColor : "ecdecd", showBorder:1, borderColor:"880000" } );

The above selector finds all maps inside all HTML elements having 'topRow' as ID.

$(".myFusionCharts :FusionCharts").attrFusionCharts( {bgColor : "ecdecd", showBorder:1, borderColor:"880000"} );

The above selector finds all maps inside all HTML elements with class name - "myFusionCharts".

$("#bottomRow").find(":FusionCharts").attrFusionCharts( {bgColor : "deeccd", showBorder:1, borderColor:"008800"} );

The above selector finds all maps inside all HTML elements with "bottomRow" as ID.

$("span.myFusionCharts").find(":FusionCharts").attrFusionCharts( {bgColor : "ecdecd", showBorder:1, borderColor:"880000"} );

The above selector finds all maps inside all SPAN HTML elements with class name - "myFusionCharts".

$("div#dashboard #upper:visible").find(":FusionCharts").attrFusionCharts( {bgColor : "ecdecd", showBorder:1, borderColor:"880000"} );

The above selector finds all maps inside all visible DIV HTML elements having "upper" as ID and all these elements are contained in DIV elements with "dashboard" as ID.