diff --git a/js/plugin/Heightgraph.js b/js/plugin/Heightgraph.js
index a5b0287..ecc94e8 100644
--- a/js/plugin/Heightgraph.js
+++ b/js/plugin/Heightgraph.js
@@ -1,255 +1,260 @@
-BR.Heightgraph = L.Control.Heightgraph.extend({
-    options: {
-        width: $('#map').outerWidth(),
-        margins: {
-            top: 15,
-            right: 30,
-            bottom: 30,
-            left: 70
-        },
-        expandControls: false,
-        mappings: {
-            gradient: {
-                '-5': {
-                    text: '',
-                    color: '#028306'
-                },
-                '-4': {
-                    text: '',
-                    color: '#2AA12E'
-                },
-                '-3': {
-                    text: '',
-                    color: '#53BF56'
-                },
-                '-2': {
-                    text: '',
-                    color: '#7BDD7E'
-                },
-                '-1': {
-                    text: '',
-                    color: '#A4FBA6'
-                },
-                '0': {
-                    text: '',
-                    color: '#ffcc99'
-                },
-                '1': {
-                    text: '',
-                    color: '#F29898'
-                },
-                '2': {
-                    text: '',
-                    color: '#E07575'
-                },
-                '3': {
-                    text: '',
-                    color: '#CF5352'
-                },
-                '4': {
-                    text: '',
-                    color: '#BE312F'
-                },
-                '5': {
-                    text: '',
-                    color: '#AD0F0C'
+BR.Heightgraph = function(map, layersControl, routing, pois) {
+    Heightgraph = L.Control.Heightgraph.extend({
+        options: {
+            width: $('#map').outerWidth(),
+            margins: {
+                top: 15,
+                right: 30,
+                bottom: 30,
+                left: 70
+            },
+            expandControls: false,
+            mappings: {
+                gradient: {
+                    '-5': {
+                        text: '',
+                        color: '#028306'
+                    },
+                    '-4': {
+                        text: '',
+                        color: '#2AA12E'
+                    },
+                    '-3': {
+                        text: '',
+                        color: '#53BF56'
+                    },
+                    '-2': {
+                        text: '',
+                        color: '#7BDD7E'
+                    },
+                    '-1': {
+                        text: '',
+                        color: '#A4FBA6'
+                    },
+                    '0': {
+                        text: '',
+                        color: '#ffcc99'
+                    },
+                    '1': {
+                        text: '',
+                        color: '#F29898'
+                    },
+                    '2': {
+                        text: '',
+                        color: '#E07575'
+                    },
+                    '3': {
+                        text: '',
+                        color: '#CF5352'
+                    },
+                    '4': {
+                        text: '',
+                        color: '#BE312F'
+                    },
+                    '5': {
+                        text: '',
+                        color: '#AD0F0C'
+                    }
                 }
             }
-        }
-    },
+        },
 
-    addBelow: function(map) {
-        // waiting for https://github.com/MrMufflon/Leaflet.Elevation/pull/66
-        // this.width($('#map').outerWidth());
-        this.options.width = $('#content').outerWidth();
+        addBelow: function(map) {
+            // waiting for https://github.com/MrMufflon/Leaflet.Elevation/pull/66
+            // this.width($('#map').outerWidth());
+            this.options.width = $('#content').outerWidth();
 
-        if (this.getContainer() != null) {
-            this.remove(map);
-        }
+            if (this.getContainer() != null) {
+                this.remove(map);
+            }
 
-        function setParent(el, newParent) {
-            newParent.appendChild(el);
-        }
-        this.addTo(map);
+            function setParent(el, newParent) {
+                newParent.appendChild(el);
+            }
+            this.addTo(map);
 
-        // move elevation graph outside of the map
-        setParent(this.getContainer(), document.getElementById('elevation-chart'));
+            // move elevation graph outside of the map
+            setParent(this.getContainer(), document.getElementById('elevation-chart'));
 
-        // bind the the mouse move and mouse out handlers, I'll reuse them later on
-        this._mouseMoveHandlerBound = this.mapMousemoveHandler.bind(this);
-        this._mouseoutHandlerBound = this._mouseoutHandler.bind(this);
+            // bind the the mouse move and mouse out handlers, I'll reuse them later on
+            this._mouseMoveHandlerBound = this.mapMousemoveHandler.bind(this);
+            this._mouseoutHandlerBound = this._mouseoutHandler.bind(this);
 
-        var self = this;
-        var container = $('#elevation-chart');
-        $(window).resize(function() {
-            // avoid useless computations if the chart is not visible
-            if (container.is(':visible')) {
+            var self = this;
+            var container = $('#elevation-chart');
+            $(window).resize(function() {
+                // avoid useless computations if the chart is not visible
+                if (container.is(':visible')) {
+                    self.resize({
+                        width: container.width(),
+                        height: container.height()
+                    });
+                }
+            });
+            // Trigger the chart resize after the toggle animation is complete,
+            // in case the window was resized while the chart was not visible.
+            // The resize must be called after the animation (i.e. 'shown.bs.collapse')
+            // and cannot be called before the animation (i.e. 'show.bs.collapse'),
+            // for the container has the old width pre animation and new width post animation.
+            container.on('shown.bs.collapse', function() {
                 self.resize({
                     width: container.width(),
                     height: container.height()
                 });
-            }
-        });
-        // Trigger the chart resize after the toggle animation is complete,
-        // in case the window was resized while the chart was not visible.
-        // The resize must be called after the animation (i.e. 'shown.bs.collapse')
-        // and cannot be called before the animation (i.e. 'show.bs.collapse'),
-        // for the container has the old width pre animation and new width post animation.
-        container.on('shown.bs.collapse', function() {
-            self.resize({
-                width: container.width(),
-                height: container.height()
             });
-        });
 
-        // and render the chart
-        this.update();
-    },
+            // and render the chart
+            this.update();
+        },
 
-    update: function(track, layer) {
-        // bring height indicator to front, because of track casing in BR.Routing
-        if (this._mouseHeightFocus) {
-            var g = this._mouseHeightFocus[0][0].parentNode;
-            g.parentNode.appendChild(g);
-        }
-
-        if (track && track.getLatLngs().length > 0) {
-            var geojsonFeatures = this._buildGeojsonFeatures(track.getLatLngs());
-            this.addData(geojsonFeatures);
-            // TODO
-            /*
-var geojson = track.toGeoJSON();
-geojson.properties = { attributeType: 0 };
-var data = [
-    {
-        type: 'FeatureCollection',
-        features: [geojson],
-        properties: {
-            Creator: 'OpenRouteService.org',
-            records: 1,
-            summary: 'gradient'
-        }
-    }
-];
-this.addData(data);
-*/
-
-            // re-add handlers
-            if (layer) {
-                layer.on('mousemove', this._mouseMoveHandlerBound);
-                layer.on('mouseout', this._mouseoutHandlerBound);
+        update: function(track, layer) {
+            // bring height indicator to front, because of track casing in BR.Routing
+            if (this._mouseHeightFocus) {
+                var g = this._mouseHeightFocus[0][0].parentNode;
+                g.parentNode.appendChild(g);
             }
-        } else {
-            this._removeMarkedSegmentsOnMap();
-            this._resetDrag();
 
-            // clear chart by passing an empty dataset
-            this.addData([]);
-
-            // and remove handlers
-            if (layer) {
-                layer.off('mousemove', this._mouseMoveHandlerBound);
-                layer.off('mouseout', this._mouseoutHandlerBound);
+            if (track && track.getLatLngs().length > 0) {
+                var geojsonFeatures = this._buildGeojsonFeatures(track.getLatLngs());
+                this.addData(geojsonFeatures);
+                // TODO
+                /*
+    var geojson = track.toGeoJSON();
+    geojson.properties = { attributeType: 0 };
+    var data = [
+        {
+            type: 'FeatureCollection',
+            features: [geojson],
+            properties: {
+                Creator: 'OpenRouteService.org',
+                records: 1,
+                summary: 'gradient'
             }
         }
-    },
+    ];
+    this.addData(data);
+    */
 
-    /**
-     * @param {LatLng[]} latLngs an array of LatLng objects, guaranteed to be not empty
-     */
-    _buildGeojsonFeatures: function(latLngs) {
-        var features = [];
-
-        // this is going to be initialized in the first iteration
-        var currentFeature;
-        // undefined is fine, as it will be different than the next gradient
-        var previousGradient;
-        for (var i = 1; i < latLngs.length; i++) {
-            var previousPoint = latLngs[i - 1];
-            var currentPoint = latLngs[i];
-
-            var dist = currentPoint.distanceTo(previousPoint); // never negative
-            var altDelta = currentPoint.alt - previousPoint.alt;
-            var currentGradientPercentage = (altDelta * 100) / dist;
-            var currentGradient = dist == 0 ? 0 : this._mapGradient(currentGradientPercentage);
-            // TODO
-            /*
-console.log("gradient %:", currentGradientPercentage,
-            "; gradient level:", currentGradient,
-           "; dist:", dist,
-           "; alt:", altDelta,
-           "; previous point:", previousPoint.lng, previousPoint.lat, previousPoint.alt,
-           "; current point:", currentPoint.lng, currentPoint.lat, currentPoint.alt);
-*/
-
-            var coordinate = [currentPoint.lng, currentPoint.lat, currentPoint.alt];
-
-            if (currentGradient == previousGradient) {
-                currentFeature.geometry.coordinates.push(coordinate);
+                // re-add handlers
+                if (layer) {
+                    layer.on('mousemove', this._mouseMoveHandlerBound);
+                    layer.on('mouseout', this._mouseoutHandlerBound);
+                }
             } else {
-                currentFeature = {
-                    type: 'Feature',
-                    geometry: {
-                        type: 'LineString',
-                        coordinates: [
-                            // each feature starts with the last point on the previous feature;
-                            // that will also take care of inserting the firstmost point
-                            // (latLngs[0]) at position 0 into the first feature in the list
-                            [previousPoint.lng, previousPoint.lat, previousPoint.alt],
-                            coordinate
-                        ]
-                    },
-                    properties: {
-                        attributeType: currentGradient
-                    }
-                };
-                features.push(currentFeature);
-            }
+                this._removeMarkedSegmentsOnMap();
+                this._resetDrag();
 
-            // prepare for the next iteration
-            previousGradient = currentGradient;
-        }
+                // clear chart by passing an empty dataset
+                this.addData([]);
 
-        return [
-            {
-                type: 'FeatureCollection',
-                features: features,
-                properties: {
-                    Creator: 'OpenRouteService.org',
-                    records: features.length,
-                    summary: 'gradient'
+                // and remove handlers
+                if (layer) {
+                    layer.off('mousemove', this._mouseMoveHandlerBound);
+                    layer.off('mouseout', this._mouseoutHandlerBound);
                 }
             }
-        ];
-    },
+        },
 
-    /**
-     * Map a gradient percentage to one of the levels defined
-     * in options.mappings.gradient.
-     */
-    _mapGradient: function(gradientPercentage) {
-        if (gradientPercentage <= -16) {
-            return -5;
-        } else if (gradientPercentage > -16 && gradientPercentage <= -10) {
-            return -4;
-        } else if (gradientPercentage > -10 && gradientPercentage <= -7) {
-            return -3;
-        } else if (gradientPercentage > -7 && gradientPercentage <= -4) {
-            return -2;
-        } else if (gradientPercentage > -4 && gradientPercentage <= -1) {
-            return -1;
-        } else if (gradientPercentage > -1 && gradientPercentage < 1) {
-            return 0;
-        } else if (gradientPercentage >= 1 && gradientPercentage < 4) {
-            return 1;
-        } else if (gradientPercentage >= 4 && gradientPercentage < 7) {
-            return 2;
-        } else if (gradientPercentage >= 7 && gradientPercentage < 10) {
-            return 3;
-        } else if (gradientPercentage >= 10 && gradientPercentage < 16) {
-            return 4;
-        } else if (gradientPercentage >= 16) {
-            return 5;
+        /**
+         * @param {LatLng[]} latLngs an array of LatLng objects, guaranteed to be not empty
+         */
+        _buildGeojsonFeatures: function(latLngs) {
+            var features = [];
+
+            // this is going to be initialized in the first iteration
+            var currentFeature;
+            // undefined is fine, as it will be different than the next gradient
+            var previousGradient;
+            for (var i = 1; i < latLngs.length; i++) {
+                var previousPoint = latLngs[i - 1];
+                var currentPoint = latLngs[i];
+
+                var dist = currentPoint.distanceTo(previousPoint); // never negative
+                var altDelta = currentPoint.alt - previousPoint.alt;
+                var currentGradientPercentage = (altDelta * 100) / dist;
+                var currentGradient = dist == 0 ? 0 : this._mapGradient(currentGradientPercentage);
+                // TODO
+                /*
+    console.log("gradient %:", currentGradientPercentage,
+                "; gradient level:", currentGradient,
+               "; dist:", dist,
+               "; alt:", altDelta,
+               "; previous point:", previousPoint.lng, previousPoint.lat, previousPoint.alt,
+               "; current point:", currentPoint.lng, currentPoint.lat, currentPoint.alt);
+    */
+
+                var coordinate = [currentPoint.lng, currentPoint.lat, currentPoint.alt];
+
+                if (currentGradient == previousGradient) {
+                    currentFeature.geometry.coordinates.push(coordinate);
+                } else {
+                    currentFeature = {
+                        type: 'Feature',
+                        geometry: {
+                            type: 'LineString',
+                            coordinates: [
+                                // each feature starts with the last point on the previous feature;
+                                // that will also take care of inserting the firstmost point
+                                // (latLngs[0]) at position 0 into the first feature in the list
+                                [previousPoint.lng, previousPoint.lat, previousPoint.alt],
+                                coordinate
+                            ]
+                        },
+                        properties: {
+                            attributeType: currentGradient
+                        }
+                    };
+                    features.push(currentFeature);
+                }
+
+                // prepare for the next iteration
+                previousGradient = currentGradient;
+            }
+
+            return [
+                {
+                    type: 'FeatureCollection',
+                    features: features,
+                    properties: {
+                        Creator: 'OpenRouteService.org',
+                        records: features.length,
+                        summary: 'gradient'
+                    }
+                }
+            ];
+        },
+
+        /**
+         * Map a gradient percentage to one of the levels defined
+         * in options.mappings.gradient.
+         */
+        _mapGradient: function(gradientPercentage) {
+            if (gradientPercentage <= -16) {
+                return -5;
+            } else if (gradientPercentage > -16 && gradientPercentage <= -10) {
+                return -4;
+            } else if (gradientPercentage > -10 && gradientPercentage <= -7) {
+                return -3;
+            } else if (gradientPercentage > -7 && gradientPercentage <= -4) {
+                return -2;
+            } else if (gradientPercentage > -4 && gradientPercentage <= -1) {
+                return -1;
+            } else if (gradientPercentage > -1 && gradientPercentage < 1) {
+                return 0;
+            } else if (gradientPercentage >= 1 && gradientPercentage < 4) {
+                return 1;
+            } else if (gradientPercentage >= 4 && gradientPercentage < 7) {
+                return 2;
+            } else if (gradientPercentage >= 7 && gradientPercentage < 10) {
+                return 3;
+            } else if (gradientPercentage >= 10 && gradientPercentage < 16) {
+                return 4;
+            } else if (gradientPercentage >= 16) {
+                return 5;
+            }
         }
-    }
-});
+    });
+
+    var heightgraphControl = new Heightgraph();
+    return heightgraphControl;
+};
diff --git a/package.json b/package.json
index 2d1fafb..839da45 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,6 @@
         "bootstrap-select": "1.13.6",
         "bootstrap-slider": "^9.8.1",
         "codemirror": "^5.35.0",
-        "d3": "~3.5.5",
         "datatables": "~1.10.18",
         "font-awesome": "^4.7.0",
         "i18next": "^15.0.4",
@@ -175,11 +174,10 @@
         },
         "leaflet.heightgraph": {
             "main": [
-                "src/L.Control.Heightgraph.js",
+                "dist/L.Control.Heightgraph.js",
                 "src/L.Control.Heightgraph.css",
-                "src/img/*.svg"
-            ],
-            "dependencies": null
+                "dist/img/*.svg"
+            ]
         },
         "leaflet-control-geocoder": {
             "main": [
diff --git a/yarn.lock b/yarn.lock
index 81b9477..3ecff54 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2552,11 +2552,6 @@ d3-voronoi@1.1.2:
   resolved "https://registry.yarnpkg.com/d3-voronoi/-/d3-voronoi-1.1.2.tgz#1687667e8f13a2d158c80c1480c5a29cb0d8973c"
   integrity sha1-Fodmfo8TotFYyAwUgMWinLDYlzw=
 
-d3@~3.5.5:
-  version "3.5.17"
-  resolved "https://registry.yarnpkg.com/d3/-/d3-3.5.17.tgz#bc46748004378b21a360c9fc7cf5231790762fb8"
-  integrity sha1-vEZ0gAQ3iyGjYMn8fPUjF5B2L7g=
-
 d@1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"