Replace Leaftlet Elevation with HeightGraph
This commit is contained in:
@@ -37,8 +37,8 @@
|
||||
}
|
||||
|
||||
@mixin drop-shadow($opacity) {
|
||||
filter: drop-shadow( -1px 1px 1px rgba(0, 0, 0, $opacity));
|
||||
-webkit-filter: drop-shadow( -1px 1px 1px rgba(0, 0, 0, $opacity));
|
||||
filter: drop-shadow(1px 0px 0px rgba(0, 0, 0, $opacity));
|
||||
-webkit-filter: drop-shadow(1px 0px 0px rgba(0, 0, 0, $opacity));
|
||||
}
|
||||
|
||||
/* Common objects */
|
||||
|
||||
@@ -28,9 +28,13 @@ $fa-css-prefix: fa;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
text-decoration: none;
|
||||
color: #999;
|
||||
color: #CCC;
|
||||
background: none;
|
||||
@extend .fa;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
/* Map */
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -192,21 +192,6 @@ $legend-color: $post-color;
|
||||
}
|
||||
}
|
||||
|
||||
#post-button, #settings-button {
|
||||
cursor: pointer;
|
||||
text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
|
||||
width: 44px;
|
||||
text-align: center;
|
||||
|
||||
&:hover .fa {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fa {
|
||||
color: #CCC;
|
||||
@extend .control-icon;
|
||||
}
|
||||
}
|
||||
#post-button .fa {
|
||||
@extend .fa-post;
|
||||
}
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
.#{$theme}.leaflet-control.elevation {
|
||||
|
||||
.background {
|
||||
//background-color: $background;
|
||||
//@include rounded(3px);
|
||||
margin: 6px 0 -12px;
|
||||
}
|
||||
|
||||
.axis path,
|
||||
.axis line {
|
||||
fill: none;
|
||||
stroke: $axis-color;
|
||||
stroke-width: $stroke-width-axis;
|
||||
}
|
||||
|
||||
//.mouse-focus-label-y,
|
||||
.mouse-focus-label-x {
|
||||
text-anchor: middle;
|
||||
}
|
||||
.mouse-drag{
|
||||
fill: $drag-color;
|
||||
}
|
||||
|
||||
.elevation-toggle {
|
||||
cursor: pointer;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
color: #CCC;
|
||||
text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
.area {
|
||||
fill: $base-color;
|
||||
@include drop-shadow(0.6);
|
||||
}
|
||||
|
||||
.mouse-focus-line {
|
||||
pointer-events: none;
|
||||
stroke-width: $stroke-width-mouse-focus;
|
||||
stroke: $stroke-color;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$theme}.height-focus{
|
||||
stroke: $base-color;
|
||||
fill: $base-color;
|
||||
}
|
||||
|
||||
.#{$theme}.height-focus.line{
|
||||
pointer-events: none;
|
||||
stroke-width: $stroke-width-height-focus;
|
||||
}
|
||||
|
||||
.#{$theme}.height-focus-label{
|
||||
text-anchor: middle;
|
||||
fill: $base-color;
|
||||
}
|
||||
|
||||
.#{$theme}.height-focus.circle-lower {
|
||||
|
||||
}
|
||||
148
style/leaflet/_leaflet_heightgraph.scss
Normal file
148
style/leaflet/_leaflet_heightgraph.scss
Normal file
@@ -0,0 +1,148 @@
|
||||
.heightgraph-container {
|
||||
background-color: rgba(250,250,250,.8);
|
||||
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(img/area-chart.svg) no-repeat center center;
|
||||
background-size: 14px 14px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.heightgraph-close-icon {
|
||||
background: url(img/remove.svg) no-repeat center center;
|
||||
background-size: 14px 14px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.border-top {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.legend-hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.legend-text {
|
||||
fill: #000;
|
||||
font-size: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tick, .tick text {
|
||||
fill: #000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.axis .tick line {
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.axis path {
|
||||
stroke: black;
|
||||
fill: none;
|
||||
stroke-width: 2px;
|
||||
shape-rendering: crispEdges;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.focusbox {
|
||||
display: none;
|
||||
font-size: 10px;
|
||||
fill: #000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.focusbox rect {
|
||||
fill: rgba(255, 255, 255, 0.8);
|
||||
stroke-width: 1px;
|
||||
stroke: #888;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.focusbox 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;
|
||||
}
|
||||
|
||||
.mouse-height-box-text{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user