How to create a Google Heatmap in VB.NET
4.86/5 (4 votes)
A small sample showing how to create a Google Heatmap in ASP.NET/VB.NET
Introduction
This is a sample on how to create a Google Heatmap.
Background
A few weeks ago, I had to create a Goggle Heatmap showing where our customers resided. I found a good sample on how to get coordinates:
However, I found no sample on how to create the Heatmap. So I wrote this.
Using the Code
Start by creating an empty web in Visual Studio. Add the pages from below. After that, start the web and click GetData. Watch the results. Click again. The Heatmap then gets new data.
The ASP Page: Default.aspx
<%@ Page Language="VB"
AutoEventWireup="true" CodeFile="Default.aspx.vb"
Inherits="_Default" %>
<html>
<head id="Head1" runat="server">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Patient locations</title>
<style type="text/css">
.formatText
{
color: Green;
font-size: 11px;
font-family: Arial;
font-weight: bold;
}
html
{
height: 100%;
}
body
{
height: 100%;
margin: 0px;
padding: 0px;
}
#map_canvas
{
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?
v=3.exp&sensor=false&libraries=visualization"></script>
<script type="text/javascript">
var map, pointarray, heatmap, patdata;
//create a gradient
var gradient3 = [
'rgba(255,255,255,0)',
'rgba(0,43,255,1)',
'rgba(0,86,255,1)',
'rgba(0,127,255,1)',
'rgba(0,171,255,1)',
'rgba(0,213,255,1)',
'rgba(0,255,127,1)',
'rgba(0,255,255,1)',
'rgba(0,255,0,1)',
'rgba(127,255,0,1)',
'rgba(255,255,0,1)',
'rgba(255,213,0,1)',
'rgba(255,171,0,1)',
'rgba(255,127,0,1)',
'rgba(255,86,0,1)',
'rgba(255,43,0,1)',
'rgba(255,0,0,1)'
]
function initialize() {
//set some map options
var mapOptions = {
zoom: 10, //set the zoom level for the map
center: new google.maps.LatLng(59.3289, 18.06491), //center the map on Stockholm Sweden
mapTypeId: google.maps.MapTypeId.ROADMAP //set the type of map
};
//get a reference to the map area
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
// if you have data in the array, push data on the map
// the variable locationList is created and populated in the code-behind VB page
if (typeof locationList != 'undefined') {
patdata = [];
//split the array and insert the coordinates
for (var i = 0; i < locationList.length; i++) {
var args = locationList[i].split(",");
patdata.push(new google.maps.LatLng(args[0], args[1]));
}
pointArray = new google.maps.MVCArray(patdata);
heatmap = new google.maps.visualization.HeatmapLayer({ data: pointArray });
heatmap.setOptions({
//apply the gradient
gradient: heatmap.get('gradient') ? null : gradient3,
// set other options
maxIntensity: 10, //The maximum intensity of the heatmap
opacity: 0.9, //The opacity of the heatmap
radius: 20, //The radius of influence for each data point, in pixels.
dissipating: true //Specifies whether heatmaps dissipate on zoom
});
//set the map
heatmap.setMap(map);
}
//empty the array, just in case
locationList = [];
}
</script>
<script type="text/javascript">
var map;
function reload() {
// this function resets the map back to it's initial state
var myLatlng = new google.maps.LatLng(59.3289, 18.06491);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
}
</script>
</head>
<body style="margin: 0px; padding: 0px;" onload="initialize()">
<form id="Form1" runat="server">
<asp:button id="btnFetch"
text="Get Map" runat="server">
<input id="Submit1" type="submit"
value="Reset" onclick="reload()" />
<div style="padding: 0%;">
<div id="map_canvas" style="width: 100%; height: 100%;">
</div>
</div>
</form>
</body>
</html>
The code-behind in VB: Default.aspx.vb
Option Explicit On
Option Strict On
Imports System
Imports System.Collections.Generic
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub btnFetch_Click(sender As Object, e As EventArgs) Handles btnFetch.Click
' here you should insert a call to a database fetching coordinates
' something like Call Public Function GetLocationData
'I simulate the fetching of different data by setting a toggle variable in viewstate
Dim toggle As Boolean
If (Me.ViewState("toggle") IsNot Nothing) Then
toggle = CType(Me.ViewState("toggle"), Boolean)
Else
toggle = False
End If
'hardcoded values for example's sake
Dim oGeocodeList As List(Of String)
If Not toggle Then
oGeocodeList = New List(Of String)() From { _
" '59.4847444, 17.749211'", _
" '59.4209403, 17.797933 '", _
" '59.5150872, 17.6437817 '" _
}
Me.ViewState.Add("toggle", True)
Else
oGeocodeList = New List(Of String)() From {" '59.3289, 18.06491'"}
Me.ViewState.Add("toggle", False)
End If
Dim geocodevalues = String.Join(",", oGeocodeList.ToArray())
'here I inject a variable containing the coordinates in the page
ClientScript.RegisterArrayDeclaration("locationList", geocodevalues)
End Sub
End Class