Replace Leaftlet Elevation with HeightGraph

style/_leaflet.scss

@@ -10,7 +10,7 @@ $stroke-width-height-focus: 2;
 $stroke-width-axis : 2;
 
 @import 'leaflet/leaflet';
-@import 'leaflet/leaflet_elevation';
+@import 'leaflet/leaflet_heightgraph';
 
 /* Leaflet fixes */
 .leaflet-container {
@@ -23,27 +23,72 @@ $stroke-width-axis : 2;
 	margin: 1rem;
 }
 
-/* Leaflet Elevation fixes */
-.#{$theme} {
-	&.height-focus,
-	&.height-focus.line,
-	&.height-focus-label,
-	&.leaflet-control.elevation .area {
-		@include drop-shadow(0.6);
+.leaflet-control.spot-control, .leaflet-control .heightgraph-toggle {
+	cursor: pointer;
+	text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
+	width: 44px;
+	text-align: center;
+	
+	.fa, .heightgraph-toggle-icon {
+		@extend .control-icon;
 	}
-	
-	&.leaflet-control.elevation-collapsed {
-		.background {
-			display: none;
-		}
-	
-		.elevation-toggle {
-			@extend .control-icon;
-			@extend .fa-elev-chart;
+}
+
+/* Leaflet Heightgraph fixes */
+
+.legend-text, .tick, .tick text, .focusbox, .height-focus.circle, .height-focus.label, .lineSelection, .horizontalLineText {
+    fill: #333 !important;
+}
+
+.axis path, .focusbox rect, .focusLine line, .height-focus.label rect, .height-focus.line, .horizontalLine {
+    stroke: #333 !important;
+}
+
+.focusbox rect, .height-focus.label rect {
+	stroke-width: 0;
+}
+
+.focusLine line, .focusbox rect, .height-focus.label rect {
+	-webkit-filter: drop-shadow(1px 0px 2px rgba(0, 0, 0, 0.6));
+	filter: drop-shadow(1px 0px 2px rgba(0, 0, 0, 0.6));
+}
+
+.height-focus.label rect, .focusbox rect {
+	fill: rgba(255,255,255,.6);
+}
+
+.heightgraph.leaflet-control {
+	svg.heightgraph-container {
+		background: none;
+		border-radius: 0;
+		
+		.area {
+			@include drop-shadow(0.6);
 		}
 	}
 
-	.details text {
-		text-anchor: middle;
+	.horizontalLine {
+		stroke-width: 2px;
+	}
+	
+	.heightgraph-toggle {
+		height: 44px;
+		background: none;
+		
+		.heightgraph-toggle-icon {
+			@extend .fa-elev-chart;
+			position: static;
+			background: none;
+		}
+	}
+
+	.heightgraph-close-icon {
+		@extend .control-icon;
+		@extend .fa-unsubscribe;
+		color: #333;
+		background: none;
+		font-size: 20px;
+		line-height: 28px;
+		display: none;
 	}
 }