Visualize the Distribution of Averaged Mobile Network Signal Strengths on a Raster Map

Visualize the distribution of aggregated and averaged signal strength measurements on a raster 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/rastermap/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.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 Averaged Mobile Network Signal Strengths on a Raster Map</h1>
<p>This example displays a visualization of mobile network signal strength on a map. 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.<br><div><br></div><div>The dataset used for the visualization represents a set of geographical points and signal strength measurements taken at each point. (Note that the actual data used here is simulated.) We first map the data points to geographical squares of 250x250 meters, and we average the signal strength measurements of all points in each square. Then, we fetch this data from the Data Lens cloud, and we create a raster map that displays a distribution of average signal strength on the map.</div><div><br></div><div>A raster map (a grid of constant-sized geographic squares, or "raster cells") is a type of visualization that provides a generalized overview of the distribution of big data. It is often used to visually identify patterns in large datasets. It is most effective in scenarios where displaying individual data points...

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%;
}
.rastermap-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;
}

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

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

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

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

.rastermap-legend .custom-dropdown {
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.75);
    width: 100%;
    border: none;
    height: 30px;
    color: white;
    text-align: left;
    padding: 0 15px;
    position: relative;
    transition: all 0.3s ease-out;
}

.rastermap-legend .custom-dropdown:focus {
    outline: none;
}

.rastermap-legend .custom-dropdown:hover {
    opacity: 1;
}

.rastermap-legend .custom-dropdown:after {
    content: '';
    width: 11px;
    height: 12px;
    position: absolute;
    top: 5px;
    border: 3px solid gray;
    border-top: none;
    border-right: none;
    background: transparent;
    transform: rotate(-45deg);
    left: 90%;
    opacity: 0.3;
    transition: all 0.3s ease-out;
}

.rastermap-legend .custom-dropdown:hover:after {
    opacity: 1;
    border-color: #00c9ff;
}

.rastermap-legend .dropdown-content {
    border-radius: 0 0 2px 2px;
    box-shadow: 0 7px 7px 0 rgba(0, 0, 0, 0.25);
    opacity: 0;
    overflow: hidden;
    position: absolute;
    transition: all 0.3s ease-out;
    width: 100%;
    z-index:...

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 COLORS = [
    'rgba(158, 1, 66, 0.85)',
    'rgba(238, 100, 69, 0.85)',
    'rgba(250, 177, 88, 0.85)',
    'rgba(243, 250, 173, 0.85)',
    'rgba(243, 250, 173, 0.85)',
    'rgba(199, 250, 173, 0.85)',
    'rgba(152, 213, 163, 0.85)',
    'rgba(92, 183, 169, 0.85)'
];

var pixelRatio = devicePixelRatio > 1 ? 2 : 1;

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

// instantiate (and display) a map
var map = new H.Map(
    mapHolder,
    platform.getMapTileService({type: 'base'}).createTileLayer(
        'maptile',
        'reduced.night',
        256 * pixelRatio, // bigger tile size for retina
        'png'
    ),
    {
        center:  new H.geo.Point(40.75201, -73.85266),
        zoom: 11,
        style: 'default',
        pixelRatio: window.devicePixelRatio
    }
);

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

var QUERY = '569a2fbd6f1e4e1e9483c5ad5409e1d5';

var provider = new H.datalens.QueryProvider(
    service,
    {
        queryId: QUERY
    }
);

// Using quantile scales, since domain is not a linear scale,
// but still need to snap value within these domain ranges.
var valueScale = d3.scaleQuantile()
    .domain([-132, -121, -111, -99.9, -89.1, -78.4, -67.7, -57])
    .range(COLORS);

var layer = new H.datalens.ObjectLayer(
    provider,
    {
        pixelRatio: window.devicePixelRatio,

        dataToRows: function(data) {
            // Default data mapping it's not used, because
            // of duplicate column names within data.columns
           ...