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 .NET

The following is an example of how to use our API with Google Maps using Microsoft .NET. This example passes in the name of a table found in a SQL Server database located in our server. We call a specific URL that uses .NET server-side code to get back the image then using our helper API loads it into the 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.

This table has over 7,000 rows to represent this traffic.

Step 1 - Create a web page with Google Maps
Follow the instructions on http://code.google.com/apis/maps/documentation/javascript/, and create a basic map. I'd suggest for testing, you make your map 400x300.
Step 2 - Get 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 3a - Link Scripts
Add the following 2 scripts to your HTML page, after your google script link:
<script type="text/javascript" src="http://www.heatmapapi.com/Javascript/HeatmapAPIGoogle3.js"></script>
<script type="text/javascript" src="http://www.heatmapapi.com/Javascript/HeatMapAPI3.aspx?k=YOUR KEY FROM STEP 2"></script>
Step 3b - Use JQuery
If your not already linking in jQuery, you'll need to do that:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

Step 4 - Load Google and Init Heat Maps API
<script type="text/javascript">
var myHeatmap = new GEOHeatmap();
var myData = null;
$(function() {

// configure HeatMapAPI
myHeatmap.Init(400, 300); // set at pixels for your map
myHeatmap.SetBoost(0.8);
myHeatmap.SetDecay(0); // see documentation
myHeatmap.SetData(''); // data comes from proxy page
myHeatmap.ImageURL('YourGetImagePage.aspx?k=0');
// Note do not declare a proxy use ImageURL instead

// set up Google map, pass in the heatmap function
var myLatlng = new google.maps.LatLng(38.5, -121.8);
var myOptions = {
 zoom: 11,
 center: myLatlng,
 mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
google.maps.event.addListener(map, 'idle', function(event) {
 myHeatmap.AddOverlay(this, myHeatmap);
});
});
</script>

The Example:

Feel free too zoom around to see how it works.
Step 5 - Get Image from your Page
Response.Buffer = true;
Response.Expires = -1;
Response.ContentType = "image/png";

double lat1 = Convert.ToDouble(Request["lat1"]);
double lat2 = Convert.ToDouble(Request["lat2"]);
double lon1 = Convert.ToDouble(Request["lon1"]);
double lon2 = Convert.ToDouble(Request["lon2"]);

GenericDataAccess d = new GenericDataAccess(System.Configuration.ConfigurationManager.ConnectionStrings["mydatabase"].ToString());
string sql = "SELECT [" + "Latitude" + "], [" + "Longitude" + "], [" + "Traffic1" + "] FROM [" + "Kansas_Traffic" + "]";
sql += " WHERE Latitude Between " + lat2 + " AND " + lat1;
sql += " AND Longitude Between " + lon1 + " AND " + lon2;

GEOHeatMap.Heatmap hm = new GEOHeatMap.Heatmap(Convert.ToInt16(Request["w"]), Convert.ToInt16(Request["h"]), lat1, lat2, lon1, lon2, 1, 0, 1);
DataSet ds = d.GetData(sql); // Call to your DB here

hm.SetDataFromDataSet(ref ds);
ds.Dispose();

Bitmap bmp = hm.Render();
System.IO.MemoryStream imageStream = new System.IO.MemoryStream();
bmp.Save(imageStream, System.Drawing.Imaging.ImageFormat.Png);
long len = imageStream.Length;
Byte[] imageBytes = new Byte[len + 1];
imageStream.Position = 0;
int totalRead = imageStream.Read(imageBytes, 0, (int)len);

imageStream.Close();
bmp.Dispose();

string path = Server.MapPath("heatmaps");
string file = Guid.NewGuid().ToString() + ".png";
string fullPath = path + "\\" + file;
bmp.Save(fullPath);

imageStream.Close();
bmp.Dispose();

string baseURL = "http://www.yourwebsite.com/";

Response.Write(baseURL + "heatmaps/" + file);




Copyright 2008-2012, HeatMapAPI.com