more route drawing

web/src/lib/vendor/leaflet-elevation/src/control.js

@@ -1,5 +1,5 @@
-import * as _ from './utils';
 import { Options } from './options';
+import * as _ from './utils';
 
 // "leaflet-i18n" fallback
 if (!L._ || !L.i18n) {
@@ -26,6 +26,15 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	__modulesFolder: '/vendor/leaflet-elevation/src/handlers/',
 	__btnIcon: '/vendor/leaflet-elevation/images/elevation.svg',
 
+	updateOptions(options) {
+		Object.assign(this.options, options)
+		if (!this.options.showStartEnd) {
+			this._circleMarkers.remove();
+		} else if (this._data.length) {
+			this._circleMarkers.addTo(this._map);
+		}
+	},
+
 	/*
 	 * Add data to the diagram either from GPX or GeoJSON and update the axis domain and data
 	 */
@@ -171,7 +180,6 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 * Initialize chart control "options" and "container".
 	 */
 	initialize(opts) {
-
 		// opts = L.setOptions(this, opts);
 
 		// Fixes: https://github.com/Raruto/leaflet-elevation/pull/240
@@ -198,7 +206,6 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		if (opts.trkStart) this._start.addTo(this._circleMarkers);
 		if (opts.trkEnd) this._end.addTo(this._circleMarkers);
 
-
 		this._markedSegments.setStyle(opts.polylineSegments);
 
 		// Leaflet canvas renderer colors
@@ -488,7 +495,9 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			]).then(() => {
 				if (this.options.polyline) {
 					this._layers.addLayer(layer.addTo(map)); // hotfix for: https://github.com/Raruto/leaflet-elevation/issues/233
-					this._circleMarkers.addTo(map);
+					if (this.options.showStartEnd) {
+						this._circleMarkers.addTo(map);
+					}
 				}
 				if (this.options.autofitBounds) {
 					this.fitBounds(layer.getBounds());
@@ -1254,7 +1263,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 * Update the position/height indicator marker drawn onto the map
 	 */
 	_updateMarker(item) {
-		if (this._marker) {
+		if (this._marker && this.options.mapTooltip) {
 			this._marker.update({
 				map: this._map,
 				item: item,

web/src/lib/vendor/leaflet-elevation/src/index.css

@@ -347,4 +347,15 @@
 .leaflet-popup-content {
   width: max-content !important;
   max-width: 100%;
+}
+
+.leaflet-anchor {
+  background-color: #fff;
+  border: 2px solid black;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  text-align: center;
 }

web/src/lib/vendor/leaflet-elevation/src/options.js

@@ -50,6 +50,8 @@ export var Options = {
 	time: true,
 	timeFactor: 3600,
 	timestamps: false,
+	showStartEnd: true,
+	mapTooltip: true,
 	trkStart: { className: 'start-marker', radius: 6, weight: 2, color: '#fff', fillColor: '#00d800', fillOpacity: 1, interactive: false },
 	trkEnd: { className: 'end-marker', radius: 6, weight: 2, color: '#fff', fillColor: '#ff0606', fillOpacity: 1, interactive: false },
 	waypoints: true,