Leaflet.Height

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

Demo

Installation

Prerequisite: node (version >=8) or use nvm to install specific node versions

Install Leaflet.Height and dependencies with npm.

npm install leaflet.Height

When using NPM you can require all needed libraries like this.

require('d3');
require('leaflet');
require('leaflet.Height');

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.Height.css"/>
 <script src="node_modules/d3/dist/d3.js"></script>
 <script type="text/javascript" src="src/L.Control.Height.js"></script>

The latest version of d3 is not compatible with older browsers, you can try d3 v4 in this case.

Local setup

# clone the repository
$ git clone https://github.com/GIScience/Leaflet.Height.git

# install dependencies using a node-version >= 8
$ npm install

# run jasmine tests with
$ grunt

Usage

Initialize the Height, add it to your Leaflet map object and add your Data to the Height object.

var hg = L.control.Height();
hg.addTo(map);
hg.addData(geojson);
L.geoJson(geojson).addTo(map);

Supported data

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"
    }
}];

Optional settings

These additional options can be set to customize your Height. Use them by passing an options object to the Height during creation e.g.:

let options = {
    position: "topleft"
}
let hg = L.control.Height(options);

position

You can choose between "bottomright", "bottomleft", "topright" and "topleft" for the position on the map.

default: position: "bottomright"

width

The width of the expanded Height display in pixels.

default: width: 800

height

The height of the expanded Height display in pixels.

default: height: 280

margins

The margins define the distance between the border of the Height 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
}

expand

Boolean value that defines if the Height should be expanded on creation.

default: true

expandCallback

Function to be called if the Height is expanded or reduced. The state of the Height is passed as an argument. It is true when expanded and false when reduced.

default: undefined

example:

expandCallback: function(expanded){
    console.log("Expanded: " + expanded)
}

mappings

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'
    }
};

highlightStyle

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'
 }

translation

You can change the labels of the Height 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"
    }

xTicks

Specify the tick frequency in the x axis of the graph. Corresponds approximately to 2 to the power of value ticks.

default: xTicks: 3

yTicks

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 configurations (WebStorm)

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