Lot of large organizations have offices around the world. Displaying those on map is visually appealing as well as allow users to interact with the map by clicking or hovering on a given region/country.
Examples: Display the sales figure, Display the Regional Heads / office addresses when a location is clicked on the map. Further more Data Form web part (aka Data View web part) can be configured on the same page to take input from the QueryString. The value for these QueryString Parameters can be configured on the Map (as shown in the example here).
Next Step: Just put this code in a Content Editor Web Part and see instant results.
Here is how it looks:
Visual feedback when mouse is over a region/country
Please let me know your feedback.
----------------------------------------
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
// Mohan Taneja, SharePoint Architect, STR Tech, LLC
google.load('visualization', '1', {'packages': ['geomap']});
google.setOnLoadCallback(drawMap);
function drawMap() {
var data = new google.visualization.DataTable();
data.addRows(3); // This is the total number of Regions Added below.
data.addColumn('string', 'Country'); // This is the code for the Country to display on the Map
// Could be any numeric value. Ideally I wanted to supress displaying this in tooltip but did not find any option.
data.addColumn('number', 'Location #');
data.addColumn('string','Comment'); // This becomes the Header for the ToolTip. Optional column
/*
Parameter description for setValue method below.
a) The first parameter denotes the Item number or simply put the record number. Since the array start from index 0, record number 1
is index 0, Record number 2 is index 1 and so on.
b) The second parameter is the column number. Since we configured 3 columns above in data.addColumn for each region/country
there are 3 rows i.e. one for each column i.e. 0, 1, 2
c) The third parameter are the value for different columns. Example: US, 1, 'Unites States of America'
Purpose of the Value column (in our example: the "Location #" column)
------------------------
The second Row for each country below is value of data type number. This is actually for range distribution and visualization of
values with different colors(shown as Data Value below). This value is important because it determines the color coding for different countries.
Examples: Population for countries, Sales for offices of a Multinational company. However if you do not have any specific data to
display you could use the method as I have done for this example i.e. pick up numbers from 0 to max number of region displayed.
The starting value of the range determines the first color from the options['colors'] setting below and
the final value determines the last color used. Example: We are using the values from 0 to 2. Hence 0 would correspond to
0xAE84F4, 1 would correspond to 0x84F491 and 2 would correspond to 0xF4DB84 in options['colors'] below. If there are more value ranges
say 0 to 10 then the code behind the scenes automatically determines the range of colors from first to last value for 3 color
specified in options.
c) The third parameter is optional and would show as header for the ToolTip when mouse is moved over the region.
*/
// Country 1
data.setValue(0, 0, 'US');
data.setValue(0, 1, 1); // Data Value
data.setValue(0, 2, 'Head Quarter - USA');
// Country 2
data.setValue(1, 0, 'CA');
data.setValue(1, 1, 2); // Data Value
data.setValue(1, 2, 'Canada');
// Country 3
data.setValue(2, 0, 'IN');
data.setValue(2, 1, 3); // Data Value
data.setValue(2, 2, 'India');
var options = {};
options['dataMode'] = 'regions'; // There are 2 modes. We are using regions
options['colors'] = [0xAE84F4, 0x84F491, 0xF4DB84]
options['showLegend'] = false; // This shows a Static Legend for value distribution with different colors.
var container = document.getElementById('map_canvas'); // This is the div control in which the Map will be displayed
var geomap = new google.visualization.GeoMap(container);
google.visualization.events.addListener(geomap , 'regionClick', OnRegionClicked); // Attach on on click handler for Region clicked
geomap.draw(data, options); // Draws the Map
};
// This is the function invoked when a specific location is clicked.
function OnRegionClicked(obj)
{
var region = obj.region; // gets the value of the region / Country selected. Example: US
var location = window.parent.location; // Get reference to parent window i.e. window which contains our web part.
var url = location.protocol + "//" + location.hostname + ":" + location.port + location.pathname + "?"; // Create the URL for SharePoint site
switch(region)
{
case 'US': // Based on region clicked, Send parameters to QueryString
url += "location=USA";
break;
case 'CA':
url += "location=CAN";
break;
case 'IN':
url += "location=IND";
break;
}
location.replace(url); // Redirect to this URL
}
</script>
<div id='map_canvas'></div>
