heatmapapi.com Create your own heat maps using HeatMapAPI. Integrate heat map images into Google Maps or other GIS systems. Heat maps are rendered real-time.

Google Example with Javascript (Large Data Set Method)

This is an example of how to use our API with Google Maps using Javascript when sending more than 50 or so data points. This example creates 1000 random points, and submits with Javascript then using our helper API loads it into a Google Map. We now have an update for Google Maps V3.

Our examples show how to integrate our API with Google maps, however you can use whatever GIS system you choose. If you choose to use Google, you should obtain your own license for Google maps if required per the Google Terms of Use. A free or paid license for HeatMapAPI doesn't include any license for Google Maps. Google Maps is not required, our API works with other GIS systems too, this is just an example.

Note: In order to get around submitting large data sets across domain names, you will will need to process your requests through a proxy page on your server that accesses our web service directly server-side. This is required because most web browsers impose restrictions on cross-browser connections across domains when websites use AJAX calls with XMLHttpRequest. This example below is an implemtation of this, so read closely, it can be a bit more tricky.

If you are passing in small data sets (< 50 points), try using the Small Data Set Method.

Step 1 - Create a web page with Google Maps
Follow the instructions on http://code.google.com/apis/maps/, and create a basic map. I'd suggest for testing, you make your map 400x300.
Step 2 - Aquire a HeatMapAPI Key
Visit this page to get a free HeatMapAPI key. It will be sent via email to you. Please don't share keys, just simply get a new one.
Step 3 - Link Scripts
Add the following to your HTML page, note that the Large Data Set Method, uses different script files:
<script src="http://www.heatmapapi.com/javascript/HeatmapAPI2.aspx?k=(YOUR HEATMAPAPI KEY HERE)" type="text/javascript"></script>

<script src="http://maps.google.com/maps?file=api&v=2&key=(YOUR GOOGLE KEY HERE)" type="text/javascript"></script>

<script src="http://www.heatmapapi.com/javascript/HeatmapAPIGoogle2.js" type="text/javascript"></script>

Notice that in this example we use HeatmapAPI2.aspx and HeatmapAPIGoogle2.js above, which is different than the small set method.

Step 4 - Add Hidden Fields
You'll need to add the following hidden form fields on your page.
<input type="hidden" id="HMMapdata" />
<input type="hidden" name="HMImageURL" id="HMImageURL" />

Step 3 - Load Google and Init Heat Maps API
<script type="text/javascript">
var m = null;
function loadGoogle()
{
 if (GBrowserIsCompatible())
 {
  m = new GMap2(document.getElementById("map"));
  m.addControl(new GLargeMapControl());
  m.addControl(new GMapTypeControl());
  m.setCenter(new GLatLng(39.03, -103.96), 12);
  initHeatmap();
 }
 else
  alert('Your Internet browser is not compatible
    with this website.');
}

setTimeout('loadGoogle()', 1);

function initHeatmap()
{
 // Heatmap Scripts
 try
 {
  var myHM = new GEOHeatmap();
  myHM.Init(400, 300);

  // Generate random lat/lon and value points

  var d= "";
 for(p=0;p<1000;p++)
 {
  var rLatD=Math.floor(Math.random()*1000);
  var rLonD=Math.floor(Math.random()*1000);
  var rValD=Math.floor(Math.random()*10);
  var sVal = (39+(rLatD/15000)) + "," +
   (-104+(rLonD/15000)) + "," +
    (rValD) + ",";
  d += sVal;
 }
  document.getElementById("HMMapdata").value = d;
  myHM.SetBoost(2); // Optional, make it 'smoother n bigger'
  myHM.SetDecay(0); // Optional, slow growth for adjacency

  //NOTE YOU NEED TO CREATE YOUR OWN PROXY PAGE
  //See the documentation under web services for an example


  var proxyURL = 'http://yourwebsite.com/YourProxy.aspx';

  myHM.SetProxyURL(proxyURL); // Optional
                                            // for cross-domain
  var preUrl = myHM.GetURL();

  // Now render in our Google Map
  var heatmapOverlay = new HMGoogleOverlay(preUrl);
  m.addOverlay(heatmapOverlay);
 }
 catch(e)
 {
  alert(e.Message);
 }
}
The Example:



Copyright 2008-2012, HeatMapAPI.com