Visualize Mobile Network Antennae by Technology

Visualize antennae for telecommunications mobile network operators, colored by technology and by azimuth

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/antennae/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://js.api.here.com/v3/3.0/mapsjs-clustering.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 Mobile Network Antennae by Technology</h1>
<p><div>This example displays a visualization of mobile network antennae on a map. &nbsp;We introduce the concept of the Data Lens REST API query which is&nbsp;used to fetch and process the data, and then demonstrate how the Data Lens&nbsp;JavaScript libraries are used to&nbsp;produce the visualization.<br><br>The dataset used for the visualization contains antenna attributes such as its location, direction ("azimuth") and technology. &nbsp;(Note that the actual data used here&nbsp;is simulated.) &nbsp;Each antenna symbol is&nbsp;designed as follows:<br><br></div><ul><li>Antennae are displayed as one or more&nbsp;line segments, each of a&nbsp;solid color.</li><li>Each segment represents a cell.</li><li>The direction of the segment is the azimuth of the cell.</li><li>Different colors represent the cell technologies.</li><li>The dot in the middle of the symbol represents the antenna's location.</li></ul>The end-user will be able to&nbsp;control the visibility of cells by toggling the cell technology (2G, 3G, 4G) in the...

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%;
}
.antenna-legend {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 20px 10px;
    border-radius: 2px;
    background-color: rgba(14, 24, 42, 0.75);
    box-shadow: 0 7px 7px 0 rgba(0, 0, 0, 0.25);
    width: 220px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.antenna-legend .heading {
    font-size: 16px;
    color: white;
    margin: 0;
    font-weight: 100;
    display: block;
}

.antenna-legend div {
    width: 20px;
    position: relative;
    margin: 20px 45px 0px 0px;
    display: inline-block;
}
.antenna-legend div label {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(top, #222 0%, #45484d 100%);
    border-radius: 4px;
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.75), 0px 1px 0px rgba(255, 255, 255, 0.25);
    background-color: rgba(0,0,0,0.3);
}
.antenna-legend div label:after {
    content: '';
    width: 11px;
    height: 7px;
    position: absolute;
    top: 5px;
    left: 5px;
    border: 3px solid white;
    border-top: none;
    border-right: none;
    background: transparent;
    opacity: 0;
    transform: rotate(-45deg);
    transition: all 0.3s ease-out;
}

.antenna-legend div label:hover::after {
    opacity: 0.3;
}
.antenna-legend div input[type=checkbox] {
    visibility: hidden;
}
.antenna-legend div input[type=checkbox]:checked + label:after {
    opacity: 1;
}

span.offset {
    color: white;
    position: relative;
    left: 30px;
    font-weight: 100;
}

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
);

//define pixelRatio (1 or 2)
var pixelRatio = devicePixelRatio > 1 ? 2 : 1;

var baseLayer = platform.getMapTileService({type: 'base'}).createTileLayer(
    'maptile',
    'reduced.day',
    256 * pixelRatio, //take bigger tiles for retina
    'png'
);

//instantiate (and display) a map
var mapHolder = document.getElementById('map');

var map = new H.Map(
    mapHolder,
    baseLayer,
    {
        pixelRatio: pixelRatio,
        center:  new H.geo.Point(40.769832, -73.974726),
        zoom: 14
    }
);

//set min zoom level
map.getBaseLayer().setMin(13);

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

//instantiate datalens tile provider
var TILED_QUERY = '35fa6264de354047aa4cc6043fd2eeda';
var provider = new H.datalens.QueryTileProvider(
    service,
    {
        queryId: TILED_QUERY,
        tileParamNames: {x: 'x', y: 'y', z: 'z'}
    }
);

//connect UI to provider
document.addEventListener('change', function(e) {
    if (e.target.name === 'technology') {
        var inputs = document.querySelectorAll('input[name=technology]');
        var filterValue = [];
        [].forEach.call(inputs, function(input) {
            if (input.checked) {
                filterValue.push(input.value);
            }
        });

        //update query dynamic parameters
        provider.setQueryParams({
            technology_filter: filterValue
        });
        provider.reload();
    }
});

//helpers for drawing antenna icons
var CHEVRON_ANGLE = 39;
var...