Mobile Age - Component - Map - Heatmap
A component to display heatmaps on a given map
How to add a heatmap to a map
- 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>
- 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>
- 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
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
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
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
Result
Options
For a full list of available options, please refer to the Documentation for Heatmap