Sometimes customers are interested to display a map of regions or countries with conditional coloring applied. But those map extensions and programs are quite expensive… I want to present you a way where you can do the same - for no money - with all the advantages of a public and open map engine.
The requirements:
- an existing internet connection
- a version of the epoly.js file
- the coordinates preferably in xml format.
First of all we need to generate a key to authenticate our site properly to google. Using a key generated for a different site than our will fail with an error message.
The signup can be done at:
http://code.google.com/intl/de-CH/apis/maps/signup.html
Then we need a placeholder in our report like this
<div id="map_canvas" style="position:relative;width: 700px; height: 300px;"></div>
The map gets initialized by
<script type="text/javascript">
google.load("jquery", "1");
google.load("maps", "2.x");
function resizeMapContainer(w,h)
{
$("#map_canvas").width(w).height(h);
map.checkResize();
}
</script>
If the browser is ready and compatible we start
$(document).ready(function () {
if (GBrowserIsCompatible()) {
var polys = [];
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(42.16,-100.72),4);
map.addControl(new GScaleControl());
mapOv = new GOverviewMapControl();
map.enableScrollWheelZoom();
map.enableDoubleClickZoom();
map.enableContinuousZoom();
map.setUIToDefault();
// Workaround resize Issue with Google Maps (API 2.x)
window.resizeBy(-1, -1);
Now we want to make the polygons…. We read the coordinates from the states.xml file and put an overlay on the map….
// Read the data from states.xml
var request = GXmlHttp.create();
request.open("GET", "states.xml", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = GXml.parse(request.responseText);
// ========= Now process the polylines ===========
var states = xmlDoc.documentElement.getElementsByTagName("state");
// read each line
for (var a = 0; a < states.length; a++) {
// get any state attributes
var label = states[a].getAttribute("name");
// read each point on that line
var points = states[a].getElementsByTagName("point");
var pts = [];
for (var i = 0; i < points.length; i++) {
pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")),parseFloat(points[i].getAttribute("lng")));
}
if (states[a].getAttribute("name")==labels[a])
{
var poly = new GPolygon(pts,"#000000",1,1,colours[a],0.5,{clickable:false});
polys.push(poly);
map.addOverlay(poly);
}
}
// ================================================
}
}
request.send(null);
}
});
In my case the overlay result looks like this. States are colored by a revenue rank based on the Gosales DW Model. „Pretty cool!“
and even movable and zoomable !
Since the rendering and applying of the polygons is done on client side you should not do this for reports which are running on an old machines and / or slow internet connections.
You should somehow make sure that your report data matches the appropiate data in the xml. Best would be a matching id in the xml file according to the id to the data in the report. In my example I helped myself out by just checking the name of the state
if (states[a].getAttribute("name")==labels[a])
(labels[a] holds the report result name and colours[a] the suitable color for that region – if those match the state can be colored)
If you have questions do not hesitate to contact me.
Hv fun!
