Visualize the Distribution of Mobile Network Signal Strengths on a Heat Map

Visualize the distribution of averaged signal strength measurements on a heat map

HTML

<link rel="stylesheet" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css">
<link rel="stylesheet" href="https://apps.datalens.api.here.com/jsapi/examples/heatmapDB/example.css">
<!-- SCRIPTS -->
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
<script type="text/javascript" src="https://d3js.org/d3.v4.0.0-alpha.50.min.js"></script>
<script type="text/javascript" src="https://js.datalens.api.here.com/2.0.0/mapsjs-datalens.js"></script>

<!-- BODY -->
<h1>Visualize the Distribution of Mobile Network Signal Strengths on a Heat Map</h1>
<p><div>This example displays a visualization of mobile network signal strength on a map. &nbsp;We introduce the concept of the Data Lens REST API query which is used to fetch and process the data, and then demonstrate how the Data Lens JavaScript libraries are used to produce the visualization.</div><div><br></div><div>The dataset used for the visualization represents a set of geographical points and signal strength measurements taken at each point. &nbsp;(Note that the actual data used here is simulated.) &nbsp;We first aggregate the data points per pixel and, where multiple points are represented on one pixel, we average the points' signal strength measurements. &nbsp;Then, we fetch this data from the Data Lens cloud, and we create a heat map that plots an interpolation of signal strength on the map. &nbsp;We use color-coding to indicate the average signal strengths, and opacity to indicate the confidence in these interpolated averages.<br></div><div><br></div><div>A heat map is a visualization style used to identify discernible geographic clusters and hotspots. &nbsp;It is often used to visually identify...

CSS

code, h1, h2 {
  color: #124191;
  letter-spacing: -0.03em;
}
body {
  font-family:"Lucida Grande",Tahoma,sans-serif;
  color: rgb(102, 102, 102);
  font-size: 80%;
}
b, strong {
  color: black;
}
code {
  font-weight: 700;
  font-size: 120%;
}
.heatmap-legend {
    background-color: rgba(14, 24, 42, 0.75);
    border-radius: 2px;
    box-shadow: 0 7px 7px 0 rgba(0, 0, 0, 0.25);
    color: white;
    margin: 20px;
    padding: 20px;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 280px;
}

.heatmap-legend .heading {
    font-size: 16px;
    margin-bottom: 10px;
}

.heatmap-legend .paragraph {
    font-size: 14px;
    margin: 5px 0;
    opacity: 0.75;
    margin-bottom: 10px;
}

.heatmap-legend .color-legend {
    margin-top: 8px;
}

.heatmap-legend .color-legend span {
    color: white;
    font-size: 12px;
}

.heatmap-legend .color-legend .density-color-scale{
    height: 14px;
    margin-top: 2px;
    background: -webkit-linear-gradient(left, blue 0%, gold 30%, orange 60%, red 100%);
    background: linear-gradient(90deg, blue 0%, gold 30%, orange 60%, red 100%);
}

.heatmap-legend .color-legend .signal-color-scale{
    height: 14px;
    margin-top: 2px;
    background: -webkit-linear-gradient(left, rgba(158, 1, 66, 0.85) 0%, rgba(238, 100, 69, 0.85) 14%, rgba(250, 177, 88, 0.85) 28%, rgba(243, 250, 173, 0.85) 42%, rgba(243, 250, 173, 0.85) 56%, rgba(199, 250, 173, 0.85) 70%, rgba(152, 213, 163, 0.85) 85%, rgba(92, 183, 169, 0.85) 100%);
    background: linear-gradient(90deg, rgba(158, 1, 66, 0.85) 0%, rgba(238, 100, 69, 0.85) 14%, rgba(250, 177, 88, 0.85) 28%, rgba(243, 250, 173, 0.85) 42%, rgba(243, 250, 173, 0.85) 56%, rgba(199, 250, 173, 0.85) 70%, rgba(152, 213, 163, 0.85) 85%, rgba(92, 183, 169, 0.85) 100%);
}

.heatmap-legend .dropdown {
    position: relative;
    transition: all 0.3s ease-out;
}

.heatmap-legend .dropdown:hover {
    box-shadow: 0 7px 7px 0 rgba(0, 0, 0, 0.25);
}

.heatmap-legend .custom-dropdown {
    border-radius:...

JavaScript

//initialize the platform
var platform = new H.service.Platform({
    app_id: 'DemoAppId01082013GAL',
    app_code: 'AJKnXv84fjrb0KIHawS0Tg',
    useCIT: true,
    useHTTPS: true
});

//instantiate datalens service
var service = new H.datalens.Service();
service.configure(
    'DemoAppId01082013GAL',
    'AJKnXv84fjrb0KIHawS0Tg',
    true,                   // useHTTPS
    false,                  // useCIT
    'https://api.here.com'  // baseUrl
);

var mapHolder = document.getElementById('map');

var defaultLayers = platform.createDefaultLayers({tileSize: 512});
var baseLayer = defaultLayers.normal.basenight;

// instantiate (and display) a map
var map = new H.Map(
    mapHolder,
    baseLayer,
    {
        center: new H.geo.Point(40.760526, -73.985706),
        zoom: 12,
        style: 'default',
        pixelRatio: window.devicePixelRatio
    }
);

// set min zoom level
var minZoomLevel = 10;
map.getBaseLayer().setMin(minZoomLevel);

// enable map events
var mapEvents = new H.mapevents.MapEvents(map);
new H.mapevents.Behavior(mapEvents);

// load the signal strength heat map
var TILED_QUERY = 'fb5680c9e24b46909fb6662e71584435';

var dBColors = [
    'rgb(158, 1, 66)',
    'rgb(238, 100, 69)',
    'rgb(250, 177, 88)',
    'rgb(243, 250, 173)',
    'rgb(199, 250, 173)',
    'rgb(152, 213, 163)',
    'rgb(92, 183, 169)'
];

service.fetchQueryStats(TILED_QUERY, {
    // stats are used later to define the count range
    stats: (function() {
        var stats = [];
        for (var z = minZoomLevel; z <= 20; z++) {
            stats.push({
                column_stats: {
                    count: ['$average']
                },
                dynamic: {
                    x: '$drop',
                    y: '$drop',
                    z: z
                }
            });
        }
        return stats;
    })()
}).then(function(response) {
    var stats = response.stats;

    // create provider
    var provider = new H.datalens.QueryTileProvider(
       ...