Release v0.4.0

closes #66
closes #70

Author: TheGreatRefrigerator

CHANGELOG.md

@@ -1,10 +1,25 @@
-## Unreleased
+# Changelog
+All notable changes to this project will be documented in this file.
+
+## v0.4.0
 
 **Added**
-- `highlightStyle` options parameter to customize the highlighting style for the 'elevation above' feature (horizontal line)
+- `highlightStyle` options parameter to customize the highlighting style
+for the 'elevation above' feature (horizontal line)
+- more documentation to README.md
+- babel transpiler
+([#70](https://github.com/GIScience/Leaflet.Heightgraph/issues/70))
+- minified script versions and `img` folder to distribution folder
 
 **Changed**
 - highlighting geometry type from multiPolyline to multiple L.polylines
+- default values for `height` and `margins` to the ones that are actually stated in the readme
+- osm tile provider to `https` instead of `http`
+
+**Fixed**
+- security issues
+([#66](https://github.com/GIScience/Leaflet.Heightgraph/issues/66))
+- some console error where `this._pointG` was undefined
 
 ## v0.3.0 (2019-10-29)
 
@@ -19,6 +34,7 @@
 - `_fitSection()` not working with round-trips
 - index.html not working with undefined mappings
 - horizontal line for height selection jumping on reselect
+([#42](https://github.com/GIScience/Leaflet.Heightgraph/issues/42))
 
 **Changed**
 - version of `d3`, `grunt-contrib-jasmine` and `Leaflet` to latest
@@ -29,34 +45,53 @@
 
 **API Changes**
 
-* The class name `focus` was renamed to `focusbox`. `focus` might be used in many other frameworks and could lead to css conflicts. Please make sure you update the .css when updating the .js! ([#43](https://github.com/GIScience/Leaflet.Heightgraph/pull/64) by [boldtrn](https://github.com/boldtrn)).
+* The class name `focus` was renamed to `focusbox`.
+`focus` might be used in many other frameworks and could lead to css conflicts.
+Please make sure you update the .css when updating the .js!
+([#43](https://github.com/GIScience/Leaflet.Heightgraph/pull/64) by 
+[boldtrn](https://github.com/boldtrn)).
 
 ## 0.1.3 (2019-07-17)
 
 **Improvements**
 
-* Allow customizing x and y axis ticks ([#61](https://github.com/GIScience/Leaflet.Heightgraph/pull/61) by [boldtrn](https://github.com/boldtrn)).
+* Allow customizing x and y axis ticks
+([#61](https://github.com/GIScience/Leaflet.Heightgraph/pull/61) by
+[boldtrn](https://github.com/boldtrn)).
 
 ## 0.1.2 (2019-07-17)
 
 **Improvements**
 
-* Callback for the expand state ([#58](https://github.com/GIScience/Leaflet.Heightgraph/pull/58) by [boldtrn](https://github.com/boldtrn)).
+* Callback for the expand state
+([#58](https://github.com/GIScience/Leaflet.Heightgraph/pull/58) by
+[boldtrn](https://github.com/boldtrn)).
 
 ## 0.1.1 (2019-07-17)
 
 **Improvements**
 
-* Allow defining translations for labels ([#53](https://github.com/GIScience/Leaflet.Heightgraph/pull/53) by [boldtrn](https://github.com/boldtrn)).
+* Allow defining translations for labels
+([#53](https://github.com/GIScience/Leaflet.Heightgraph/pull/53) by
+[boldtrn](https://github.com/boldtrn)).
 
 ## 0.1.0 (2019-06-22)
 
 **Improvements**
 
-* Allow toggling the heightgraph on Android ([#44](https://github.com/GIScience/Leaflet.Heightgraph/pull/44) by [boldtrn](https://github.com/boldtrn)).
-* Improve horizontal drag ([#42](https://github.com/GIScience/Leaflet.Heightgraph/pull/42) by [boldtrn](https://github.com/boldtrn)).
+* Allow toggling the heightgraph on Android
+([#44](https://github.com/GIScience/Leaflet.Heightgraph/pull/44) by
+[boldtrn](https://github.com/boldtrn)).
+* Improve horizontal drag
+([#42](https://github.com/GIScience/Leaflet.Heightgraph/pull/42) by
+[boldtrn](https://github.com/boldtrn)).
 
 **API Changes**
 
-* The width and height of the heightgraph now define the size of the heightgraph, and not the size of the heightgraph+margins. You might want to updated your height and width values ([#43](https://github.com/GIScience/Leaflet.Heightgraph/pull/43) by [boldtrn](https://github.com/boldtrn)).
-* The dependencies were refined, if you were using the plugin before, you might want to recheck that you are using the correct dependencies.
+* The width and height of the heightgraph now define the size of the heightgraph,
+and not the size of the heightgraph+margins.
+You might want to updated your height and width values
+([#43](https://github.com/GIScience/Leaflet.Heightgraph/pull/43) by
+[boldtrn](https://github.com/boldtrn)).
+* The dependencies were refined, if you were using the plugin before,
+you might want to recheck that you are using the correct dependencies.

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017 GIScience Research Group
+Copyright (c) 2019 Heidelberg Institute of Geoinformation Technology
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -14,7 +14,7 @@ copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE

README.md

@@ -1,49 +1,46 @@
-# Leaflet.HeightProfile
+# Leaflet.Heightgraph
 
-![preview](https://cloud.githubusercontent.com/assets/10322094/22474104/472bcc88-e7db-11e6-8c9e-7e1d53cd0b57.png)
-
-1. [What is this?](https://github.com/GIScience/Leaflet.Heightgraph#what-is-this)
-2. [How to use this library](https://github.com/GIScience/Leaflet.Heightgraph#how-to-use)
-
-## What is this?
-
-This plugin is under development and is inspired by [MrMufflon/Leaflet.Elevation](https://github.com/MrMufflon/Leaflet.Elevation).
+This plugin is inspired by [MrMufflon/Leaflet.Elevation](https://github.com/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.
 
+![preview](https://cloud.githubusercontent.com/assets/10322094/22474104/472bcc88-e7db-11e6-8c9e-7e1d53cd0b57.png)
+
 Supported Browsers:
 - Chrome
 - Firefox
 - Opera
 
 [Demo](https://giscience.github.io/Leaflet.Heightgraph)
 
-## Install with Bower
+## Installation
 
-`` bower install leaflet.heightgraph ``
-
-
-## Install with npm:
-
-[`nodejs`](https://nodejs.org/en/download/) (version >=8)
+Prerequisite:  [`node`](https://nodejs.org/en/download/) (version >=8)
 or use [`nvm`](https://github.com/nvm-sh/nvm/blob/master/README.md) to install specific node versions
 
-Install dependencies with npm. The latest version of d3 is not compatible with older browsers like IE9, you can try d3 v4 in this case.
-```
-npm install d3
-```
-
-Install Leaflet.Heightgraph
+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('d3');
+require('leaflet');
 require('leaflet.heightgraph');
 ```
 
+Alternatively you can add the required libraries in the head of your index.html file
+```html
+ <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.
+
 ## Local setup
 
 ```bash
@@ -58,35 +55,28 @@ $ grunt
 ```
 
 ## Usage
-
+Initialize the heightgraph, add it to your Leaflet map object and add your
+Data to the heightgraph object.
 ```javascript
-// all used options are the default values
-var hg = L.control.heightgraph({
-    width: 800,
-    height: 280,
-    margins: {
-        top: 10,
-        right: 30,
-        bottom: 55,
-        left: 50
-    },
-    position: "bottomright",
-    mappings: undefined || colorMappings,
-    highlightStyle: undefined || customStyle,
-    translation: undefined || customTranslation
-});
+var hg = L.control.heightgraph();
 hg.addTo(map);
 hg.addData(geojson);
 L.geoJson(geojson).addTo(map);
 ```
 
 ## Supported data
 Input data has to be of type [GeoJSON-Format](http://geojson.org/).
-This must consist of feature collection(s) corresponding to a certain attribute which could - as an example - be surface or gradient information.
-Each `FeatureCollection` comprises a certain `attribute` in its `properties` (e.g. `'summary': 'steepness'`) and has a list of
-`LineString` features with 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 coordinates of the previous `LineString`.
+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`.
 
 ```javascript
 var FeatureCollections = [{
@@ -127,13 +117,77 @@ var FeatureCollections = [{
 ```
 
 ## Optional settings
-These additional options can be set to customize your heightgraph
+These additional options can be set to customize your heightgraph.
+Use them by passing an options object to the heightgraph during creation e.g.:
+```js
+let options = {
+    position: "topleft"
+}
+let hg = L.control.heightgraph(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 heightgraph display in pixels.
+
+default: `width: 800`
+
+### height
+The height of the expanded heightgraph display in pixels.
+
+default: `height: 280`
+
+### margins
+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
+}
+```
+
+### expand
+Boolean value that defines if the heightgraph should be expanded on creation.
+
+default: `true`
+
+        expandCallback: undefined,
+        xTicks: undefined,
+        yTicks: undefined,
+    }
+
+### expandCallback
+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:
+```js
+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:
 
 ```javascript
@@ -153,8 +207,11 @@ colorMappings.Steepness = {
 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](https://leafletjs.com/reference-1.5.0.html#path-option)
-as value of the `highlightStyle` parameter e.g:
+as value of the `highlightStyle` parameter.
+
+default: `highlightStyle:{color: 'red'}`
 
+Example:
 ```javascript
 highlightStyle = {
    weight: 10,
@@ -163,17 +220,19 @@ highlightStyle = {
  }
 ```
 
-### Translation
-You can change the labels of the HeightGraph info field by passing a translation config e.g:
+### translation
+You can change the labels of the heightgraph info field by passing translations
+for `distance`, `elevation`, `segment_length`, `type` and `legend`.
 
+default:
 ```
 translation: {
-    distance: "Distanz",
-    elevation: "Höhe",
-    segment_length: "Segment-Länge",
-    type: "Typ",
-    legend: "Legende"
-}
+    distance: "Distance",
+    elevation: "Elevation",
+    segment_length: "Segment length",
+    type: "Type",
+    legend: "Legend"
+    }
 ```
 
 ## Debug configurations (WebStorm)

index-dev.html

@@ -38,21 +38,12 @@
          const bounds = new L.LatLngBounds(new L.LatLng(47.323989, 8.108683), new L.LatLng(46.96485, 8.029803))
 
          const hg = L.control.heightgraph({
-             width: 800,
-             height: 280,
-             margins: {
-                 top: 10,
-                 right: 30,
-                 bottom: 55,
-                 left: 50
-             },
              translation: {
                  distance: "My custom distance"
              },
              expandCallback(expand) {
                  console.log("Expand: "+expand)
              },
-             position: "bottomright",
              mappings: colorMappings,
              highlightStyle: {
                  color: "purple"