This plugin is inspired by MrMufflon/Leaflet.Elevation. You may use this plugin to view an interactive height profile of linestring segments using d3js. The input data may consist of different types of attributes you wish to display.
Supported Browsers:
- Chrome
- Firefox
- Opera
Prerequisite: node
(version >=8)
or use nvm
to install specific node versions
Install Leaflet.Heightgraph and dependencies with npm.
npm install leaflet.heightgraph
When using NPM you can require all needed libraries like this.
require('d3');
require('leaflet');
require('leaflet.heightgraph');
Alternatively you can add the required libraries in the head of your index.html file
<link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css" />
<script src="node_modules/leaflet/dist/leaflet.js"></script>
<link rel="stylesheet" href="src/L.Control.Heightgraph.css"/>
<script src="node_modules/d3/dist/d3.js"></script>
<script type="text/javascript" src="src/L.Control.Heightgraph.js"></script>
The latest version of d3 is not compatible with older browsers, you can try d3 v4 in this case.
# clone the repository
$ git clone https://github.com/GIScience/Leaflet.Heightgraph.git
# install dependencies using a node-version >= 8
$ npm install
# run jasmine tests with
$ grunt
Initialize the heightgraph, add it to your Leaflet map object and add your Data to the heightgraph object.
var hg = L.control.heightgraph();
hg.addTo(map);
hg.addData(geojson);
L.geoJson(geojson).addTo(map);
Input data has to be of type GeoJSON-Format. This must consist of feature collection(s) corresponding to a certain attribute which could be e.g. surface or gradient information.
Each FeatureCollection
comprises a certain attribute
in its properties
(e.g. 'summary': 'steepness'
) and has a list of LineString
features.
These should have coordinates
including height values and the attributeType
which corresponds to the certain type of attribute within this segment
(in this case it could be an index of steepness) declared in its properties
.
Notice that the list of coordinates has to start with the last coordinate
of the previous LineString
.
var FeatureCollections = [{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[8.6865264, 49.3859188, 114.5],
[8.6864108, 49.3868472, 114.3],
[8.6860538, 49.3903808, 114.8]
]
},
"properties": {
"attributeType": "3"
}
}, {
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[8.6860538, 49.3903808, 114.8],
[8.6857921, 49.3936309, 114.4],
[8.6860124, 49.3936431, 114.3]
]
},
"properties": {
"attributeType": "0"
}
}],
"properties": {
"Creator": "OpenRouteService.org",
"records": 2,
"summary": "Steepness"
}
}];
These additional options can be set to customize your heightgraph. Use them by passing an options object to the heightgraph during creation e.g.:
let options = {
position: "topleft"
}
let hg = L.control.heightgraph(options);
You can choose between "bottomright"
, "bottomleft"
, "topright"
and "topleft"
for the position on the map.
default: position: "bottomright"
The width of the expanded heightgraph display in pixels.
default: width: 800
The height of the expanded heightgraph display in pixels.
default: height: 280
The margins define the distance between the border of the heightgraph
and the actual graph inside. You are able to specify margins for top
,
right
, bottom
and left
in pixels.
default:
margins: {
top: 10,
right: 30,
bottom: 55,
left: 50
}
Boolean value that defines if the heightgraph should be expanded on creation.
default: true
Function to be called if the heightgraph is expanded or reduced. The state of
the heightgraph is passed as an argument. It is true
when expanded and
false
when reduced.
default: undefined
example:
expandCallback: function(expanded){
console.log("Expanded: " + expanded)
}
You may add a mappings object to customize the colors and labels in the height graph.
Without adding custom mappings the segments and labels within the graph will be displayed in random colors.
Each key of the object must correspond to the summary
key in properties
within the FeatureCollection
.
default: undefined
Example:
colorMappings.Steepness = {
'3': {
text: '1-3%',
color: '#F29898'
},
'0': {
text: '4-6%',
color: '#E07575'
}
};
You can customize the highlight style when using the horizontal line to
find parts of the route above an elevation value.
Use any Leaflet Path options
as value of the highlightStyle
parameter.
default: highlightStyle:{color: 'red'}
Example:
highlightStyle = {
weight: 10,
opacity: 0.8,
color: 'orange'
}
You can change the labels of the heightgraph info field by passing translations
for distance
, elevation
, segment_length
, type
and legend
.
default:
translation: {
distance: "Distance",
elevation: "Elevation",
segment_length: "Segment length",
type: "Type",
legend: "Legend"
}
Specify the tick frequency in the x axis of the graph. Corresponds approximately to
2 to the power of value
ticks.
default: xTicks: 3
Specify the tick frequency in the y axis of the graph. Corresponds approximately to
2 to the power of value
ticks.
default: yTicks: 3
Debug jasmine tests with karma in WebStorm
- open
Run -> Edit Configurations...
- click
+
to add a new configuration and choose the karma template - give the Configuration a name e.g.
Test
- the other parameters should be filled correctly by default
- Configuration File:
{path to repository root}/karma.conf.js
- Node interpreter:
{path to node interpreter}
- Karma package:
{path to repository root}/node_modules/karma
- Working directory:
{path to repository root}
- Browsers to start / Node Options / Environment Variables: - leave empty -
- Configuration File:
- click the run button or setup breakpoints and click the debug button
Run karma with coverage
- once you have a karma task configured just click the run with coverage button
- analyse coverage in Webstorm or Browser (open ./coverage/html/index.html)