Index: bin/js_deps
===================================================================
--- bin/js_deps	(revision d52ba5023968433653203281bef774f9e997cabd)
+++ bin/js_deps	(revision 5f05e83f42c7cca1d0c496c6436450dd5cdbb7f4)
@@ -179,7 +179,7 @@
 
 leaflet_elevation() {
-    NAME="Leaflet.Elevation"
-    VERSION="master"
-    URL=https://github.com/MrMufflon/${NAME}/archive/${VERSION}.tar.gz
+    NAME="leaflet-elevation"
+    VERSION="0.0.8"
+    URL=https://github.com/Raruto/${NAME}/archive/${VERSION}.tar.gz
     check_cache ${NAME} ${VERSION}
     in_cache=$?
Index: ow/static/css/leaflet-elevation.css
===================================================================
--- ow/static/css/leaflet-elevation.css	(revision 5f05e83f42c7cca1d0c496c6436450dd5cdbb7f4)
+++ ow/static/css/leaflet-elevation.css	(revision 5f05e83f42c7cca1d0c496c6436450dd5cdbb7f4)
@@ -0,0 +1,38 @@
+
+/* Leaflet-elevation openworkouts theme */
+
+
+.openworkouts-theme.leaflet-control.elevation .background {
+    background-color: #ffffff;
+}
+
+.openworkouts-theme.leaflet-control.elevation .axis line, .openworkouts-theme.leaflet-control.elevation .axis path {
+    stroke: #151515;
+}
+
+.openworkouts-theme.leaflet-control.elevation .mouse-drag {
+    fill: #ee4056;
+    opacity: 0.5;
+}
+
+.openworkouts-theme.leaflet-control.elevation .elevation-toggle-icon {
+    background: url(images/elevation-steelblue.png) no-repeat center center;
+}
+
+.openworkouts-theme.leaflet-control.elevation .area {
+    fill: #f8b5be;
+}
+
+.openworkouts-theme.leaflet-control.elevation .mouse-focus-line {
+    stroke: #ee4056;
+}
+
+.openworkouts-theme.height-focus {
+    stroke: #4682b4;
+    fill: #4682b4;
+}
+
+.leaflet-control.elevation .area {
+    fill: #f8b5be;
+    stroke: #ee4056;
+}
Index: ow/static/js/ow.js
===================================================================
--- ow/static/js/ow.js	(revision d52ba5023968433653203281bef774f9e997cabd)
+++ ow/static/js/ow.js	(revision 5f05e83f42c7cca1d0c496c6436450dd5cdbb7f4)
@@ -35,5 +35,4 @@
     var gpx;
     var elevation;
-    var ow_charts;
 
     var create_map = function create_map(latitude, longitude, zoom) {
@@ -52,30 +51,30 @@
            This has to be called *after* create_map and *before* load_gpx.
         */
+
         elevation = L.control.elevation({
             position: "bottomright",
-            theme: "steelblue-theme", //default: lime-theme
-            width: 600,
-            height: 125,
-            margins: {
-                top: 10,
-                right: 20,
-                bottom: 30,
-                left: 50
-            },
+            theme: "openworkouts-theme",
             useHeightIndicator: true, //if false a marker is drawn at map position
-            interpolation: "linear", //see https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-area_interpolate
-            hoverNumber: {
-                decimalsX: 3, //decimals on distance (always in km)
-                decimalsY: 0, //deciamls on height (always in m)
-                formatter: undefined //custom formatter function may be injected
-            },
-            xTicks: undefined, //number of ticks in x axis, calculated by default according to width
-            yTicks: undefined, //number of ticks on y axis, calculated by default according to height
-            collapsed: false    //collapsed mode, show chart on click or mouseover
-        });
-
-        var ele_container = elevation.addTo(map);
-        /* document.getElementById('ow-analysis').appendChild(
-            ele_container._container); */
+            interpolation: d3.curveLinear,
+            elevationDiv: "#elevation",
+            detachedView: true,
+            responsiveView: true,
+            gpxOptions: {
+		async: true,
+		marker_options: {
+		    startIconUrl: null,
+		    endIconUrl: null,
+		    shadowUrl: null,
+		},
+		polyline_options: {
+		    color: '#EE4056',
+		    opacity: 0.75,
+		    weight: 5,
+		    lineCap: 'round'
+		},
+	    },
+        });
+        elevation.loadGPX(map, gpx_url);
+        // var ele_container = elevation.addTo(map);
     };
 
@@ -101,5 +100,4 @@
             gpx.on("addline",function(e){
                 elevation.addData(e.line);
-                // ow_charts.addData(e.line);
             });
         };
@@ -114,6 +112,5 @@
             add_elevation_chart();
         }
-        // add_ow_charts();
-        load_gpx(gpx_url);
+        // load_gpx(gpx_url);
     };
 
Index: ow/templates/workout.pt
===================================================================
--- ow/templates/workout.pt	(revision d52ba5023968433653203281bef774f9e997cabd)
+++ ow/templates/workout.pt	(revision 5f05e83f42c7cca1d0c496c6436450dd5cdbb7f4)
@@ -17,5 +17,7 @@
           href="${request.static_url('ow:static/components/Leaflet/leaflet.css')}" />
     <link rel="stylesheet" tal:condition="context.has_gpx"
-          href="${request.static_url('ow:static/components/Leaflet.Elevation/dist/leaflet.elevation-0.0.4.css')}" />
+          href="${request.static_url('ow:static/components/leaflet-elevation/leaflet-elevation.css')}" />
+    <link rel="stylesheet"
+          href="${request.static_url('ow:static/css/leaflet-elevation.css')}" />
   </metal:css>
 
@@ -36,18 +38,18 @@
           <li>
             <a href="" i18n:translate=""
-             tal:attributes="href request.resource_url(context, 'edit')">
-            edit workout
+               tal:attributes="href request.resource_url(context, 'edit')">
+              edit workout
             </a>
           </li>
           <li>
             <a href="" i18n:translate=""
-             tal:attributes="href request.resource_url(context, 'update-from-file')">
-            update with tracking file
+               tal:attributes="href request.resource_url(context, 'update-from-file')">
+              update with tracking file
             </a>
           </li>
           <li class="owo-del"><a href="" i18n:translate=""
-             tal:attributes="href request.resource_url(context, 'delete')">
+                                 tal:attributes="href request.resource_url(context, 'delete')">
             delete
-            </a>
+          </a>
           </li>
         </ul>
@@ -72,68 +74,44 @@
             <span><tal:t i18n:translate="">Speed</tal:t></span>
             <span class="avg"><tal:t i18n:translate="">Avg.</tal:t>
-            <tal:c tal:content="round(context.speed['avg'], 1)"></tal:c>km/h</span>
+              <tal:c tal:content="round(context.speed['avg'], 1)"></tal:c>km/h</span>
             <span class="max"><tal:t i18n:translate="">Max.</tal:t>
-            <tal:c tal:content="round(context.speed['max'], 1)"></tal:c>km/h</span>
+              <tal:c tal:content="round(context.speed['max'], 1)"></tal:c>km/h</span>
           </li>
           <li tal:condition="hr">
             <span><tal:t i18n:translate="">Heart Rate</tal:t></span>
             <span class="avg"><tal:t i18n:translate="">Avg.</tal:t>
-            <tal:c tal:content="hr['avg']"></tal:c>bpm</span>
+              <tal:c tal:content="hr['avg']"></tal:c>bpm</span>
             <span class="max"><tal:t i18n:translate="">Max.</tal:t>
-            <tal:c tal:content="hr['max']"></tal:c> bpm</span>
+              <tal:c tal:content="hr['max']"></tal:c> bpm</span>
           </li>
           <li tal:condition="cad">
             <span><tal:t i18n:translate="">Cadence</tal:t></span>
             <span class="avg"><tal:t i18n:translate="">Avg.</tal:t>
-            <tal:c tal:content="cad['avg']"></tal:c></span>
+              <tal:c tal:content="cad['avg']"></tal:c></span>
             <span class="max"><tal:t i18n:translate="">Max.</tal:t>
-            <tal:c tal:content="cad['max']"></tal:c></span>
+              <tal:c tal:content="cad['max']"></tal:c></span>
           </li>
           <li tal:condition="atemp">
             <span><tal:t i18n:translate="">Temperature</tal:t></span>
             <span class="min"><tal:t i18n:translate="">Min.</tal:t>
-            <tal:c tal:content="atemp['min']"></tal:c>℃</span>
+              <tal:c tal:content="atemp['min']"></tal:c>℃</span>
             <span class="avg"><tal:t i18n:translate="">Avg.</tal:t>
-            <tal:c tal:content="atemp['avg']"></tal:c>℃</span>
+              <tal:c tal:content="atemp['avg']"></tal:c>℃</span>
             <span class="max"><tal:t i18n:translate="">Max.</tal:t>
-            <tal:c tal:content="atemp['max']"></tal:c>℃</span>
+              <tal:c tal:content="atemp['max']"></tal:c>℃</span>
           </li>
         </ul>
+        <div id="elevation"></div>
       </div>
     </div>
+
     <!--! Track map -->
     <div id="map" tal:condition="context.has_gpx"></div>
-
-    <!--! Additional map controls -->
-
-    <div id="ow-analysis">
-
-      <!--!
-          FIXME: the list of available charts should come from the workout
-          details, based on which data this workout has
-        -->
-      <!--! All those ids are needed for the leaflet openworkouts plugin -->
-      <tal:r tal:repeat="chart ['elevation', 'heartrate', 'cadence', 'temperature']">
-        <div id="ow-" tal:attributes="id 'ow-' + chart">
-          <div class="ow-average" id=""
-               tal:attributes="id 'ow-' + chart + '-average'"></div>
-          <div class="ow-chart" id=""
-               tal:attributes="id 'ow-' + chart + '-chart'"></div>
-          <div class="ow-current" id=""
-               tal:attributes="id 'ow-' + chart + '-current'"></div>
-        </div>
-      </tal:r>
-
-    </div>
   </metal:content>
 
   <metal:body-js metal:fill-slot="body-js">
 
-
-    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
-    <!--
-    <script src="${request.static_url('ow:static/d3/d3.min.js')}"
+    <script src="${request.static_url('ow:static/components/d3/d3.min.js')}"
             tal:condition="context.has_gpx"></script>
-    -->
 
     <script src="${request.static_url('ow:static/components/Leaflet/leaflet.js')}"
@@ -143,5 +121,5 @@
             tal:condition="context.has_gpx"></script>
 
-    <script src="${request.static_url('ow:static/components/Leaflet.Elevation/dist/leaflet.elevation-0.0.4.min.js')}"
+    <script src="${request.static_url('ow:static/components/leaflet-elevation/leaflet-elevation.js')}"
             tal:condition="context.has_gpx"></script>
 
