Use Leaflet.Heightgraph to show PathDetails (graphhopper#1569)

* Use Leaflet.Heightgraph to show PathDetails

* Show height of speed for average_speed instead of elevation

* Revert height as speed

* use light green if no path details

* Remove jQuery empty

* Use the hosted version on npm and remove the old elevation library

* Remove red lines from the map, graphhopper#1573

Author: boldtrn

web/package.json

@@ -26,14 +26,15 @@
   "dependencies": {
     "browserify": "16.2.0",
     "browserify-swap": "0.2.2",
-    "d3": "3.5.17",
+    "d3": "5.9.1",
     "jquery": "3.3.1",
     "leaflet": "1.3.1",
     "leaflet-contextmenu": "1.4.0",
     "leaflet-loading": "0.1.24",
     "moment": "2.22.1",
     "uglifyify": "5.0.0",
-    "flatpickr": "4.4.6"
+    "flatpickr": "4.4.6",
+    "leaflet.heightgraph": "0.0.1"
   },
   "devDependencies": {
     "jasmine": "3.1.0",

web/src/main/resources/assets/css/L.Control.Heightgraph.css

@@ -0,0 +1,146 @@
+.heightgraph-container {
+    background-color: #FFF;
+    border-radius: 10px;
+    display: none;
+    cursor: default;
+    user-select: none;
+}
+
+.heightgraph-toggle {
+    cursor: pointer;
+    box-shadow: 0 1px 7px rgba(0, 0, 0, .4);
+    border-radius: 5px;
+    width: 28px;
+    height: 28px;
+    background: #f8f8f9;
+    display: block;
+}
+
+.heightgraph-toggle-icon {
+    background: url(images/area-chart.svg) no-repeat center center;
+    background-size: 14px 14px;
+    width: 26px;
+    height: 26px;
+    position: absolute;
+}
+
+.heightgraph-close-icon {
+    background: url(images/remove.svg) no-repeat center center;
+    background-size: 14px 14px;
+    width: 26px;
+    height: 26px;
+    position: absolute;
+    right: 0;
+    display: none;
+}
+
+.border-top {
+    stroke-width: 1;
+    stroke: #999;
+    fill: none;
+}
+
+.legend-hover {
+    cursor: pointer;
+}
+
+.legend-text {
+    fill: #000;
+    font-size: 10px;
+    cursor: pointer;
+}
+
+.tick, .tick text {
+    fill: #999;
+    pointer-events: none;
+}
+
+.axis .tick line {
+    visibility: hidden;
+    pointer-events: none;
+}
+
+.axis path {
+    stroke: black;
+    fill: none;
+    stroke-width: 2px;
+    shape-rendering: crispEdges;
+    stroke: lightgrey;
+    pointer-events: none;
+}
+
+.focus {
+    display: none;
+    font-size: 10px;
+    fill: #000;
+    pointer-events: none;
+}
+
+.focus rect {
+    fill: rgba(255, 255, 255, 0.8);
+    stroke-width: 1px;
+    stroke: #888;
+    pointer-events: none;
+}
+
+.focus text {
+    font-size: 12px;
+}
+
+.focusLine line {
+    stroke-width: 1px;
+    stroke: rgb(20, 20, 20);
+    display: none;
+    cursor: default;
+    shape-rendering: crispEdges;
+}
+
+.height-focus.label rect {
+    fill: rgba(255, 255, 255, 0.5);
+    stroke-width: 1px;
+    stroke: #888;
+    pointer-events: none;
+    shape-rendering: crispEdges;
+}
+
+.height-focus.line {
+    stroke: rgb(20, 20, 20);
+    stroke-width: 1px;
+    shape-rendering: crispEdges;
+}
+
+.height-focus.circle {
+    stroke: #FFF;
+    stroke-width: 1px;
+}
+
+.grid .tick {
+    pointer-events: none;
+}
+
+.grid .tick line {
+    stroke: #EEE;
+    stroke-width: 1px;
+    shape-rendering: crispEdges;
+}
+
+.grid path {
+    stroke-width: 0;
+    pointer-events: none;
+}
+
+.tspan {
+    font-weight: bold;
+}
+
+.select-symbol {
+    cursor: pointer;
+}
+
+.select-info {
+    cursor: default;
+}
+
+.lineSelection {
+    cursor: move;
+}

web/src/main/resources/assets/css/images/area-chart.svg

@@ -27,11 +27,11 @@
         <title>Driving Directions - GraphHopper Maps</title>
         <meta name="description" content="A fast route planner for biking, hiking and more! Based on OpenStreetMap including elevation data. Try out for free!"/>
         <link rel="stylesheet" href="css/leaflet.css?v=1.3.1" />
-        <link rel="stylesheet" href="css/leaflet.elevation-0.0.4.css" />
         <link rel="stylesheet" href="css/leaflet_numbered_markers.css" />
         <link rel="stylesheet" href="css/leaflet.contextmenu.css?v=1.4.0" />
         <link rel="stylesheet" href="css/leaflet.loading.css?v=0.1.24" />
         <link rel="stylesheet" href="css/ui-lightness/jquery-ui.min.css" />
+        <link rel="stylesheet" href="css/L.Control.Heightgraph.css?v=0.0.1" />
         <link rel="stylesheet" href="css/flatpickr.min.css?v=4.4.6">
         <script type="text/javascript" src="js/main.js?v=0.11.2"></script>
         <link rel="stylesheet" type="text/css" href="css/style.css" />