How to create a Google Heatmap in VB.NET

Michael Rosqvist

Rate me:

4.86/5 (4 votes)

19 Dec 2013CPOL

21.5K

489

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

ASP.NET

<%@ 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

VB.NET

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, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Michael Rosqvist

Web Developer

Sweden

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.