@raruto/leaflet-elevation 1.9.6 → 2.0.2

package/README.md

@@ -24,22 +24,23 @@ _For a working example see one of the following demos:_
 - [loading multiple .gpx tracks (hover to toggle)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hoverable-tracks.html)
 - [loading multiple .gpx tracks (click to toggle)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_toggable-charts.html)
 - [translating plugin labels](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_i18n-strings.html)
+- [using custom colors](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_custom-theme.html)
+- [using .gpx extensions (cadence + heart)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_extended-ui.html)
 - [using .gpx waypoint icons](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_gpx-waypoints.html)
 - [using .geojson waypoint icons](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_geojson-waypoints.html)
-- [using custom attributes (heart rate)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_extended-ui.html)
-- [using custom markers (dynamic runner)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_dynamic-runner.html)
+
 
 <br/>
 
 - [autohide map](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hidden-map.html)
 - [autohide chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hidden-chart.html)
 - [collapsible button](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_close-button.html)
-- [custom colors](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_custom-theme.html)
 - [custom summary](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_custom-summary.html)
 - [follow marker](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_follow-marker.html)
 - [layer almostover](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_almost-over.html)
 - [slope chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_slope-chart.html)
 - [speed chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_speed-chart.html)
+- [walking marker](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_dynamic-runner.html)
 
 ---
 
@@ -174,7 +175,7 @@ _For a working example see one of the following demos:_
       };
 
       // Instantiate map (leaflet-ui).
-      var map = new L.Map('map', { mapTypeId: 'terrain', center: [41.4583, 12.7059], zoom: 5 });
+      var map = L.map('map', { mapTypeId: 'terrain', center: [41.4583, 12.7059], zoom: 5 });
 
       // Instantiate elevation control.
       var controlElevation = L.control.elevation(elevation_options).addTo(map);
@@ -240,6 +241,7 @@ var map = L.map('map', {
 - https://wordpress.org/plugins/extensions-leaflet-map/
 - https://github.com/der-stefan/OpenTopoMap
 - https://gpx.n-peloton.fr/
+- https://walkaholic.me/map
 
 </details>
     
@@ -250,7 +252,7 @@ _Related: [Leaflet-UI presets](https://github.com/raruto/leaflet-ui), [QGIS Inte
 **Compatibile with:**
 [![Leaflet 1.x compatible!](https://img.shields.io/badge/Leaflet-1.7.0-1EB300.svg?style=flat)](http://leafletjs.com/reference.html)
 [![d3.js v6 compatibile!](https://img.shields.io/badge/d3.js-6.5-1EB300.svg?style=flat)](https://www.npmjs.com/package/d3)
-[![@tmcw/togeojson v4.5.0 compatibile!](https://img.shields.io/badge/@tmcw/togeojson-4.5-1EB300.svg?style=flat)](https://www.npmjs.com/package/@tmcw/togeojson)
+[![@tmcw/togeojson v4.6.0 compatibile!](https://img.shields.io/badge/@tmcw/togeojson-4.6-1EB300.svg?style=flat)](https://www.npmjs.com/package/@tmcw/togeojson)
 
 
 ---

package/dist/leaflet-elevation.css

@@ -28,7 +28,7 @@
 }
 
 .elevation-control.elevation .background {
-  background-color: rgba(70, 130, 180, 0.2);
+  background-color: var(--ele-bg, rgba(70, 130, 180, 0.2));
   border-radius: 5px;
   overflow: visible;
   display: block;
@@ -36,15 +36,20 @@
   user-select: none;
 }
 
+.elevation-control.elevation .axis .tick,
+.elevation-control.elevation .axis .domain {
+  pointer-events: none;
+}
+
 .elevation-control.elevation .axis line,
 .elevation-control.elevation .axis path {
-  stroke: #2D1130;
+  stroke: var(--ele-axis, #2D1130);
   stroke-width: 1;
   fill: none;
 }
 
 .elevation-control.elevation .grid .tick line {
-  stroke: #EEE;
+  stroke: var(--ele-grid, #EEE);
   stroke-width: 1px;
   shape-rendering: crispEdges;
 }
@@ -68,14 +73,14 @@
 }
 
 .elevation-control.elevation .area {
-  fill: #4682B4;
-  stroke: #000;
+  fill: var(--ele-area, #4682B4);
+  stroke: var(--ele-stroke, #000);
   stroke-width: 1.2;
   paint-order: stroke fill;
 }
 
 .elevation-detached .elevation-control.elevation .area {
-  fill-opacity: 0.8;
+  fill-opacity: var(--ele-alpha, 0.8);
 }
 
 .elevation-control.elevation .horizontal-drag-line {
@@ -104,7 +109,7 @@
 }
 
 .elevation-control.elevation .mouse-focus-line {
-  stroke: #0D1821;
+  stroke: #000;
   stroke-width: 1;
   pointer-events: none;
 }
@@ -128,7 +133,7 @@
 }
 
 .elevation-control.elevation .brush .selection {
-  fill: rgba(23, 74, 117, 0.4);
+  fill: var(--ele-brush, rgba(23, 74, 117, 0.4));
   stroke: none;
   fill-opacity: unset;
 }
@@ -207,7 +212,7 @@
 }
 
 .elevation-control.elevation .elevation-toggle-icon {
-  background: url(../images/elevation.svg) no-repeat center center;
+  background: var(--ele-icon, url(../images/elevation-lime.svg)) no-repeat center center;
 }
 
 .elevation-control.elevation.elevation-expanded .elevation-toggle-icon.close-button {
@@ -241,7 +246,7 @@
 .leaflet-elevation-pane .height-focus,
 .leaflet-overlay-pane .height-focus {
   stroke: #000;
-  fill: #FFF;
+  fill: var(--ele-circle, var(--ele-area, #FFF));
 }
 
 .leaflet-elevation-pane .height-focus.line,
@@ -260,200 +265,86 @@
   stroke-width: 2px;
 }
 
-.elevation-waypoint-icon:before {
-  background: url(../images/elevation-pushpin.svg) no-repeat center center / contain;
+.elevation-waypoint-icon:before,
+.elevation-position-icon:before {
   content: "";
   width: 100%;
   height: 100%;
   display: inline-block;
 }
 
+.elevation-waypoint-icon:before {
+  background: url(../images/elevation-pushpin.svg) no-repeat center center / contain;
+}
+
 .elevation-position-icon:before {
   background: url(../images/elevation-position.svg) no-repeat center center / contain;
-  content: "";
-  width: 100%;
-  height: 100%;
-  display: inline-block;
 }
 
 .elevation-polyline {
+  stroke: var(--ele-poly, var(--ele-area, #000));
   filter: drop-shadow(1px 1px 0 #FFF) drop-shadow(-1px -1px 0 #FFF) drop-shadow(1px -1px 0 #FFF) drop-shadow(-1px 1px 0 #FFF);
 }
 
-.elevation-placeholder {
-  margin: auto;
-  height: auto;
-  width: 100%;
-}
-
-.elevation-placeholder~* {
-  display: none !important;
-}
-
 /* LIME THEME //////////////////////////////////////////////// */
 
-.lime-theme.elevation-control.elevation .background {
-  background-color: rgba(156, 194, 34, 0.2);
-}
-
-.lime-theme.elevation-control.elevation .axis line,
-.lime-theme.elevation-control.elevation .axis path {
-  stroke: #566B13;
-}
-
-.lime-theme.elevation-control.elevation .grid .tick line {
-  stroke: #CCC;
-}
-
-.lime-theme.elevation-control.elevation .brush .selection {
-  fill: rgba(99, 126, 11, 0.4);
-}
-
-.lime-theme.elevation-control.elevation .elevation-toggle-icon {
-  background: url(../images/elevation-lime.svg) no-repeat center center;
-}
-
-.lime-theme.elevation-control.elevation .area {
-  fill: #9CC222;
-}
-
-.lime-theme.elevation-control.elevation .mouse-focus-line {
-  stroke: #101404;
-}
-
-.lime-theme.height-focus {
-  stroke: #000;
-  fill: #9CC222;
-}
-
-.lime-theme.elevation-polyline {
-  stroke: #566B13;
+.lime-theme {
+  --ele-bg: rgba(156, 194, 34, 0.2);
+  --ele-axis: #566B13;
+  --ele-area: #9CC222;
+  --ele-grid: #CCC;
+  --ele-brush: rgba(99, 126, 11, 0.4);
+  --ele-icon: url(../images/elevation-lime.svg);
+  --ele-poly: #566B13;
 }
 
 /* STEELBLUE THEME //////////////////////////////////////////////// */
 
-.steelblue-theme.elevation-control.elevation .background {
-  background-color: rgba(70, 130, 180, 0.2);
-}
-
-.steelblue-theme.elevation-control.elevation .axis line,
-.steelblue-theme.elevation-control.elevation .axis path {
-  stroke: #0D1821;
-}
-
-.steelblue-theme.elevation-control.elevation .brush .selection {
-  fill: rgba(23, 74, 117, 0.4);
-}
-
-.steelblue-theme.elevation-control.elevation .elevation-toggle-icon {
-  background: url(../images/elevation-steelblue.svg) no-repeat center center;
-}
-
-.steelblue-theme.elevation-control.elevation .area {
-  fill: #4682B4;
-}
-
-.steelblue-theme.elevation-control.elevation .mouse-focus-line {
-  stroke: #0D1821;
-}
-
-.steelblue-theme.height-focus {
-  stroke: #000;
-  fill: #4682B4;
-}
-
-.steelblue-theme.elevation-polyline {
-  stroke: #4682B4;
+.steelblue-theme {
+  --ele-axis: #0D1821;
+  --ele-area: #4682B4;
+  --ele-brush: rgba(23, 74, 117, 0.4);
+  --ele-icon: url(../images/elevation-steelblue.svg);
 }
 
 /* PURPLE THEME //////////////////////////////////////////////// */
 
-.purple-theme.elevation-control.elevation .background {
-  background-color: rgba(115, 44, 123, 0.2);
-}
-
-.purple-theme.elevation-control.elevation .axis line,
-.purple-theme.elevation-control.elevation .axis path {
-  stroke: #2D1130;
-}
-
-.purple-theme.elevation-control.elevation .brush .selection {
-  fill: rgba(74, 14, 80, 0.4);
-}
-
-.purple-theme.elevation-control.elevation .elevation-toggle-icon {
-  background: url(../images/elevation-purple.svg) no-repeat center center;
-}
-
-.purple-theme.elevation-control.elevation .area {
-  fill: #732C7B;
-}
-
-.purple-theme.elevation-control.elevation .mouse-focus-line {
-  stroke: #000;
-}
-
-.purple-theme.height-focus {
-  stroke: #000;
-  fill: #732C7B;
-}
-
-.purple-theme.elevation-polyline {
-  stroke: #732C7B;
+.purple-theme {
+  --ele-bg: rgba(115, 44, 123, 0.2);
+  --ele-area: #732C7B;
+  --ele-brush: rgba(74, 14, 80, 0.4);
+  --ele-icon: url(../images/elevation-purple.svg);
 }
 
 /* YELLOW THEME //////////////////////////////////////////////// */
 
-.yellow-theme.elevation-control.elevation .area {
-  fill: #FF0;
-}
-
-.yellow-theme.elevation-polyline {
-  stroke: #FF0;
+.yellow-theme {
+  --ele-area: #FF0;
 }
 
 /* RED THEME //////////////////////////////////////////////// */
 
-.red-theme.elevation-control.elevation .area {
-  fill: #F00;
-}
-
-.red-theme.elevation-polyline {
-  stroke: #F00;
+.red-theme {
+  --ele-area: #F00;
 }
 
 /* MAGENTA THEME //////////////////////////////////////////////// */
 
-.magenta-theme.elevation-control.elevation .background {
-  background-color: rgba(255, 255, 255, 0.47);
-}
-
-.magenta-theme.elevation-control.elevation .area {
-  fill: #FF005E;
-}
-
-.magenta-theme.elevation-polyline {
-  stroke: #FF005E;
+.magenta-theme {
+  --ele-bg: rgba(255, 255, 255, 0.47);
+  --ele-area: #FF005E;
 }
 
 /* LIGHTBLUE THEME //////////////////////////////////////////////// */
 
-.lightblue-theme.elevation-control.elevation .area {
-  fill: #3366CC;
-  stroke: #000;
+.lightblue-theme {
+  --ele-area: #3366CC;
+  --ele-alpha: 0.45;
+  --ele-stroke: #4682B4;
+  --ele-circle: #fff;
 }
 
 .elevation-detached .lightblue-theme.elevation-control.elevation .area {
-  fill-opacity: 0.45;
-  stroke: #3366CC;
-}
-
-.lightblue-theme.height-focus {
-  stroke: #000;
-  fill: #FFFFFF;
-}
-
-.lightblue-theme.elevation-polyline {
   stroke: #3366CC;
 }