Mobile Age - Component - Map - Heatmap

A component to display heatmaps on a given map

How to add a heatmap to a map

  1. Assuming a map exists
    <script> var options = { tileserver_url: window.location.protocol + '//' + 'geo.mobile-age.eu/tiles/', fullsize: false, centerLng: 8.96767, centerLat: 53.06184, zoom: 15 }; var map = new MobileAge.Component.Map("unique_id", options); <script>
  2. Use a JavaScript object to initialize your heatmap with the desired options, e.g. source data, etc.
    <script> var options = { data: '[[lat1, lon1, value1],[lat2, lon2, value2], ... , [latn, lonn, valuen]]' }; <script>
  3. Add the heatmap to the map.
    <script> new MobileAge.Layer.Heatmap(map, options); <script>

Example 1: Data provided during initialisation

This example is the simplest way to add Heatmaps by directly providing data. Here the data is generated randomly, but it can also be fetched from a web-service before initialization.

Code

<div id="example_map_1" style="width: 75%;height: 20em;"> </div> <script> var options_1 = { centerLng: 8.963348561, centerLat: 53.063197 }; var map_1 = new MobileAge.Component.Map("example_map_1", options_1); data = []; for(var i = 0; i<250;i++) { data.push([53.06 + ((Math.random() - 0.5) * 2 * 0.01), 8.96 + ((Math.random() - 0.5) * 2 * 0.01), (Math.random() * 25)]); } var options = { data: JSON.stringify(data) }; new MobileAge.Layer.Heatmap(map_1, options); </script>

Result

Example 2: Data from a web service

In this example the data is retrieved by the public Overpass-API http://overpass-api.de/api/interpreter.

The API doesn't provide any values, so the heatmap shows the density of toilets in Bremen. Please note that the parameters were changed to provide a sufficient display.

Code

<div id="example_map_2" style="width: 75%;height: 20em;"> </div> <script> var options_2 = { centerLng: 8.955, centerLat: 53.06, zoom: 12 }; var map_2 = new MobileAge.Component.Map("example_map_2", options_2); var options = { category: 'amenity', type: 'toilets', minOpacity: 0.3, max: 0.3, radius: 25, blur: 15, gradient: {0.4: 'blue', 0.65: 'lime', 1: 'green'}, queryService: 'Overpass', dataPath: 'elements' }; new MobileAge.Layer.Heatmap(map_2, options); </script>

Result

Example 3: Data from the platform

In this example the data is retrieved from the Overpass module of the platform

The API doesn't provide any values, so the heatmap simulates a light map of Bremen. Please note the complex query as well as that the parameters were changed to provide a sufficient display.

Code

<div id="example_map_3" style="width: 75%;height: 20em;"> </div> <script> var options_3 = { centerLng: 8.955, centerLat: 53.06, zoom: 16 }; var map_3 = new MobileAge.Component.Map("example_map_3", options_3); var options = { minOpacity: 0.05, max: 0.9, radius: 25, blur: 15, gradient: {0.1: 'yellow'}, queryService: 'Overpass', xhrSource: window.location.protocol + '//' + 'geo.mobile-age.eu/overpass/interpreter', xhrQuery: '(node["lit"];way["lit"];node["highway"="street_lamp"];way["highway"="street_lamp"];relation["lit"];relation["highway"="street_lamp"];);>;node["*"];', dataPath: 'elements' }; new MobileAge.Layer.Heatmap(map_3, options); </script>

Result

Example 4: Data from a json file

In this example the data is statically provided on the server and called via a XHR-request

Code

<div id="example_map_4" style="width: 75%;height: 20em;"> </div> <script> var options_4 = { centerLng: 8.893, centerLat: 53.0475, zoom: 16 }; var map_4 = new MobileAge.Component.Map("example_map_4", options_4); var options = { minOpacity: 0.5, minZoom: 16, max: 1, radius: 30, blur: 15, gradient: {1.0: 'yellow'}, xhrSource: window.location.host + window.location.pathname + '/../../assets/json/streetLamps.json', dataPath: 'd', dataLatLonMapping: { 'lon': 'lng', 'lat': 'lat' } }; new MobileAge.Layer.Heatmap(map_4, options); </script>

Result

Options

For a full list of available options, please refer to the Documentation for Heatmap