×
Namespaces

Variants
Actions
(Difference between revisions)

HERE Maps API - How to display a bar graph over the map

From Nokia Developer Wiki
Jump to: navigation, search
jasfox (Talk | contribs)
m (Jasfox - - The bar chart function)
jasfox (Talk | contribs)
m (Jasfox - links)
 
(7 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Nokia Maps]][[Category:Code Examples]][[Category:JavaScript]]
+
[[Category:HERE Maps]][[Category:Code Examples]][[Category:JavaScript]]
 
{{Abstract|This article explains how to display graphical bar charts over specified locations on a map. }}
 
{{Abstract|This article explains how to display graphical bar charts over specified locations on a map. }}
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
|sourcecode= [[Media:BarChartOnMap.zip]]
+
|sourcecode= [https://github.com/heremaps/examples/blob/master/maps_api_for_javascript/demos/sidebar-component/bar-chart-markers.html bar-chart-markers.html] [https://github.com/heremaps/examples/blob/master/maps_api_for_javascript/demos/sidebar-component/data/population-data-for-german-cities.js population-data.js] [https://github.com/heremaps/examples/blob/master/maps_api_for_javascript/demos/sidebar-component/bar-chart-election-result.html bar-chart-election-result.html] [https://github.com/heremaps/examples/blob/master/maps_api_for_javascript/demos/sidebar-component/data/election-result-data-for-german-states.js election-data.js]
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|devices= Internet Explorer, Google Chrome, Firefox
 
|devices= Internet Explorer, Google Chrome, Firefox
Line 8: Line 8:
 
|platform= Web
 
|platform= Web
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies= Nokia Maps 2.2.3
+
|dependencies= HERE Maps 2.5.3
 
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
|keywords= Nokia Maps, Marker, Bar Chart, Data, JavaScript
+
|keywords= HERE Maps, Marker, Bar Chart, Data, JavaScript
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-by= <!-- [[User:XXXX]] -->
Line 24: Line 24:
 
}}
 
}}
 
{{SeeAlso|
 
{{SeeAlso|
* [http://developer.here.net/javascript_api Nokia Maps API]
+
* [http://developer.here.com/javascript_api HERE Maps API]
* [http://developer.here.net/apiexplorer/examples/api-for-js/markers/svg-marker.html Custom SVG graphics]
+
* [http://heremaps.github.io/examples/index.html HERE Maps on Github]
* [http://developer.here.net/apiexplorer/examples/api-for-js/data-visualization/map-with-value-heat-map.html Rendering a value based heat map]
+
* [http://developer.here.com/apiexplorer/examples/api-for-js/markers/svg-marker.html Custom SVG graphics]
 +
* [http://developer.here.com/apiexplorer/examples/api-for-js/data-visualization/map-with-value-heat-map.html Rendering a value based heat map]
 
  }}
 
  }}
  
Line 41: Line 42:
 
|}
 
|}
  
The simplest way of creating bars for such a geographic bar chart is to use SVG graphics.  The Nokia Maps API is able to render SVG graphics as markers and these can be added to the map in the usual manner. This code example creates a framework to calculating and displaying bars of an appropriate length based on a minimal number of input parameters.
+
Working example available at:
 +
 
 +
[http://heremaps.github.io/examples/examples.html#sidebar-component__bar-chart-markers bar-chart-markers.html]
 +
 
 +
The simplest way of creating bars for such a geographic bar chart is to use SVG graphics.  The HERE Maps API is able to render SVG graphics as markers and these can be added to the map in the usual manner. This code example creates a framework to calculating and displaying bars of an appropriate length based on a minimal number of input parameters.
  
 
== How to display Population Data on Screen ==
 
== How to display Population Data on Screen ==
Line 148: Line 153:
 
== Summary ==
 
== Summary ==
  
Through using the functions in the [[Media:BarChartOnMap.zip|Code Example]] it is possible to display graphical data on a Nokia Map, an extension to cope with multiple bars per chart (shown below) is also included - feel free to adapt the code to your own use.
+
Through using the functions described above, it is possible to display graphical data on a HERE Map. An extension to cope with multiple bars per chart (shown below) is also included - feel free to adapt the code to your own use.
  
 
[[File:ElectionMap.png]]
 
[[File:ElectionMap.png]]
 +
 +
Working example:
 +
 +
[http://heremaps.github.io/examples/examples.html#sidebar-component__bar-chart-election-result bar-chart-election-result.html]

Latest revision as of 15:56, 20 December 2013

This article explains how to display graphical bar charts over specified locations on a map.

Article Metadata
Code ExampleTested with
Devices(s): Internet Explorer, Google Chrome, Firefox
Compatibility
Platform(s): Web
Dependencies: HERE Maps 2.5.3
Article
Keywords: HERE Maps, Marker, Bar Chart, Data, JavaScript
Created: jasfox (30 May 2012)
Last edited: jasfox (20 Dec 2013)


Contents

[edit] Introduction

One typical usage case for an online mapping application is to give geographic context for the display of data. Typically the data will consist of a geographic element (longitude/latitude) and some associated non-geographic data such as population data or sales figures. An excellent way to visualise this non-geographic data is through the use of a bar chart, as shown below:

PopulationMap.png
Population distribution of all towns in Germany with more than 100,000 inhabitants.

Working example available at:

bar-chart-markers.html

The simplest way of creating bars for such a geographic bar chart is to use SVG graphics. The HERE Maps API is able to render SVG graphics as markers and these can be added to the map in the usual manner. This code example creates a framework to calculating and displaying bars of an appropriate length based on a minimal number of input parameters.

[edit] How to display Population Data on Screen

[edit] Loading in the data

The population data is held in a separate file, and loaded in by adding a <script> reference to the <header> of the file.

<script type="text/javascript" charset="UTF-8" src="./german_pop_lat_long.js"></script>

An array of DataPoints for the population data (popData) can be read in using the typical JSON format:

var popData = [{""latitude":52.51607,"longitude":13.37698,"value":3460725,"name":"Berlin"},
{"
latitude":53.55334,"longitude":9.99245,"value":1786448,"name":"Hamburg"},
{"
latitude":50.11208,"longitude":8.68341,"value":679664,"name":"Frankfurt am Main"}]

Note.pngNote: Because the popData follows the standard nokia.maps.heatmap.Overlay.DataPoint format ( i.e. latitude, longitude , value) , it could also be displayed as a heatmap using the following:

var heatmapProvider = new nokia.maps.heatmap.Overlay({
max: 20, opacity: 0.6, type: "value", coarseness: 10
});
heatmapProvider.addData(popData);
display.overlays.add(heatmapProvider);


The separation of the data model from the display of the data (the view) is good architectural practice. It also means that different data sets can be displayed through reusing the same display code, by merely substituting an alternative data file.

The display of a single bar for each location is achieved through iterating through the data and running it into a barChart function described below. Each location is then added as a marker as shown.

barChart = new barChart(COLORS, THRESHOLDS, TICK_VALUE);
var i = popData.length;
while(i--) {
var marker = barChart.createBar(popData[i]);
display.objects.add(marker);
}

[edit] The bar chart function

A simple SVG rectangle can be displayed with the following syntax:

<svg width="16" height="32" xmlns="http://www.w3.org/2000/svg">
<rect stroke="#FFF" fill="#FF0000" width="16" height="32" />
</svg>

The Custom SVG graphics example from the Developer's Playground shows how to substitute placeholder in the SVG to alter the graphic displayed, for a bar chart, the following pair of values need to be dynamically updated:

  • The color of the bar
  • The height of the bar

The color is defined by comparing the data value with an array of "threshold" values each of a higher amount, and assigning an associated color to each threshold. The height of the bar is decided by setting a "tick" value i.e. the length for each pixel in height. By requiring these parameters to be passed in on construction, an infinitely wide range of data ranges can be catered for.

function barChart(stops, tick) {
this.stops = stops; // This map associates threshholds with colors
this.tick = tick;
this.barSVG = '<svg width="16" height="__VALUE__" xmlns="http://www.w3.org/2000/svg">' +
'<rect stroke="#FFF" fill="__MAINCOLOR__" width="16" height="__VALUE__" />' +
'</svg>'
 
this.svgParser = new nokia.maps.gfx.SvgParser(),
// Helper function that allows us to easily set the text and color of our SVG marker.
this.createBar = function (data) {
var color;
for (var i in this.stops) {
if (data.value > i){
color = this.stops[i];
}
}
 
var height = Math.round(data.value/tick);
var svg = this.barSVG
.replace(/__VALUE__/g, height)
.replace(/__MAINCOLOR__/g, color);
 
return new nokia.maps.map.Marker( [data.latitude,data.longitude], {
icon: new nokia.maps.gfx.GraphicsImage(this.svgParser.parseSvg(svg)),
anchor: new nokia.maps.util.Point (8, height)});
};
};

Setting up the bar chart is done as follows:

var tick = 12000; // 12 thousand inhabitants = 1 pixel height
var stops = {
"0": "#8A8A8A", //Grey for 0-120,000 inhabitants.
"120000": "#CACA00", //Yellow for 120,001 - 150,000 inhabitants.
"150000": "#00CC00", //Green for 150,001 - 200,000 inhabitants.
"200000": "#0000CC", //Blue for 200,001 - 300,000 inhabitants.
"300000": "#CC00CC", //Purple for 300,001 - 600,000 inhabitants.
"600000": "#FF0000" //Red for over 600,000 inhabitants.
};
 
barChart = new barChart(stops, tick);

The bars can be added by iterating through the array:

var i = popData.length;  	
while(i--) {
display.objects.add( barChart.createBar(popData[i]));
}

[edit] Summary

Through using the functions described above, it is possible to display graphical data on a HERE Map. An extension to cope with multiple bars per chart (shown below) is also included - feel free to adapt the code to your own use.

ElectionMap.png

Working example:

bar-chart-election-result.html

This page was last modified on 20 December 2013, at 15:56.
104 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×