Recently i came across for one requirement with my client where he wants to see density of his shops across US. For example he has a lot of branches of his coffee shops across US like in CA, TX, MB etc. He want to see a good way on map to see density of his branches. I found the way how to show this, this type of maps are called HeatMaps.
Heat Maps are used to show density of your prouduct, services and any useful information on Geaographical area, based on your addresses.
The another example may be like, i want to know Starbucks shops across the US and want to know which area has density (number of shops) more.
So, i created one example in Salesforce VF page to show, how we can make it.
1. Copy paste below code in your VF page
<apex:page showHeader="false" sidebar="false">
<script src="http://www.heatmapapi.com/javascript/HeatmapAPI.aspx?k=86123b76-2190-4a4b-b182-86e7199b0406" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA09SA9e7gW5A4Mpy3VCJQjxQfiV3Wc4AiuMkI_RwI0dk2dVyy7hQWusr2PE1VCubWNkTco2njprfSxg" type="text/javascript"></script>
<script src="http://www.heatmapapi.com/javascript/HeatmapAPIGoogle.js" type="text/javascript"></script>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var m = null;
var batch = "";
var myHM = null;
var request = GXmlHttp.create();
var TOTAL_COUNT = 0;
var INDEX = 0;
function loadGoogle()
{
if (GBrowserIsCompatible())
{
m = new GMap2(document.getElementById("map"));
m.setCenter(new GLatLng(38.5, -95.8), 3);
m.setUIToDefault();
initHeatmap();
}
else
alert('Your Internet browser is not compatible with this website.');
}
function initHeatmap()
{
// Heatmap Scripts
try
{
myHM = new GEOHeatmap();
myHM.Init(400, 400); // Must be same as map size, or same ratio
addMarkersFromXml();
}
catch(e)
{
alert(e);
}
}
function addMarkersFromXml(){
request.open('GET', '/apex/data', true);
request.onreadystatechange = function() {
//alert(request.readyState);
if(request.readyState == 4) {
var xmlDoc = request.responseXML;
var markers = xmlDoc.documentElement.getElementsByTagName("store");
TOTAL_COUNT = markers.length;
INDEX = 0;
for(var i=0; i < markers.length; i++){
var state = markers[i].getAttribute("state");
var density = "1";//markers[i].getAttribute("density");
geocoder = new GClientGeocoder();
var address = state;
geocoder.getLatLng(address,
function(point) {
if (!point) {
} else {
fullVal = point.lat().toFixed(5) + "," + point.lng().toFixed(5) + "," + density + ",";
batch += fullVal;
INDEX++;
if(INDEX >= TOTAL_COUNT){
startMap();
}
}
});
}
}
}
function startMap(){
document.getElementById("HMMapdata").value=batch;
myHM.SetData(batch);
myHM.SetBoost(.5); // Optional, see documentation
myHM.SetDecay(0); // Optional, see documentation
//var proxyURL = "http://localhost/proxy.php";
//myHM.SetProxyURL(proxyURL);
var preUrl = myHM.GetURL();
// Now render in our Google Map
var heatmapOverlay = new HMGoogleOverlay(preUrl);
m.addOverlay(heatmapOverlay);
}
request.send(null);
}
</script>
<apex:sectionHeader subtitle="Heat Map using Google Map" title="Aslam Bari (http://www.aslambari.com)"/>
<body onload="loadGoogle();">
<input type="hidden" id="HMMapdata" />
<input type="hidden" id="HMImageURL" name="HMImageURL"/>
<div id="map" style="width:400px;height:400px;"></div>
</body>
</apex:page>
2. Create another page called "data" and copy paste below code in that. Note: this page contains the addresses of your shops, offices etc which we want to see as density. So, change accordingly
<apex:page sidebar="false" showHeader="false" contentType="text/xml">
<stores>
<store state="IN,US"></store>
<store state="KY,US"></store>
<store state="WA,US"></store>
<store state="MB,US"></store>
</stores>
</apex:page>
Note: you need to go http://www.heatmapapi.com to get new Free API key and also for google free api key to get your code work.
Here is the working example of this. Click to see.
http://labsprojects-developer-edition.ap1.force.com/HeatMapExample
Hope you will need this sometime in your project.
Thanks
Aslam Bari
6 comments:
Interesting stuff sir!!!
This is very useful for the business. Good stuff.
Nandini
keep going !!!!
Really Very useful...
Heatmap is a great tool to design a webpage more interactive and creative to capture visitors attention. It do tells the problem area of the webpage which needs to be improved and redesigned. Thanks for writing such a wonderful post.
Density of your product, services and any useful information on Geaographical area, based on your addresses.
digital signature FAQ
Post a Comment