(untagged)

How to create a Google Heatmap in VB.NET

Michael Rosqvist

0.00/5 (No votes)

19 Dec 2013

A small sample showing how to create a Google Heatmap in ASP.NET/VB.NET

Download HeatMap.zip - 3.6 KB

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:

http://www.codeproject.com/Tips/355796/Google-Geocoding-and-Reverse-Geocoding

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

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here