From 173752c691ef6d6b64ca1739f76a784e14f3c49e Mon Sep 17 00:00:00 2001 From: Unknown Date: Wed, 2 Oct 2019 14:23:27 +0200 Subject: [PATCH] Added distance markers to the routing path --- README.md | 4 + css/leaflet-routing.css | 10 +++ js/plugin/Routing.js | 37 +++++++- js/plugin/leaflet-distance-marker.js | 129 +++++++++++++++++++++++++++ package.json | 1 + yarn.lock | 12 +++ 6 files changed, 192 insertions(+), 1 deletion(-) create mode 100644 js/plugin/leaflet-distance-marker.js diff --git a/README.md b/README.md index 186815c..fb4e1c2 100644 --- a/README.md +++ b/README.md @@ -180,3 +180,7 @@ Copyright (c) 2018 Norbert Renner and [contributors](https://github.com/nrenner/ Copyright (c) 2014-2016 GitHub, Inc.; [MIT License](https://github.com/github/fetch/blob/master/LICENSE) - [Promise Polyfill](https://github.com/taylorhakes/promise-polyfill) Copyright (c) 2014 Taylor Hakes, Copyright (c) 2014 Forbes Lindesay; [MIT License](https://github.com/taylorhakes/promise-polyfill/blob/master/LICENSE) +- [Leaflet.GeometryUtil](https://github.com/makinacorpus/Leaflet.GeometryUtil) + Copyright (c) 2013, Makina Corpus; [BSD 3-Clause License](https://github.com/makinacorpus/Leaflet.GeometryUtil/blob/master/LICENSE) +- [leaflet-distance-markers](https://github.com/adoroszlai/leaflet-distance-markers) + Copyright (c) 2014- Doroszlai Attila, 2016- Phil Whitehurst; [MIT License](https://github.com/adoroszlai/leaflet-distance-markers/blob/master/LICENSE.md) diff --git a/css/leaflet-routing.css b/css/leaflet-routing.css index 540c852..25fb306 100644 --- a/css/leaflet-routing.css +++ b/css/leaflet-routing.css @@ -3,3 +3,13 @@ div.line-mouse-marker { border: 4px solid magenta; border-radius: 8px; } + +.dist-marker { + font-size: 11px; + border: 1px solid #777; + border-radius: 10px; + text-align: center; + text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; + color: black; + background: rgba(255, 255, 255, 0.4); +} diff --git a/js/plugin/Routing.js b/js/plugin/Routing.js index 9f75bfb..daabe6c 100644 --- a/js/plugin/Routing.js +++ b/js/plugin/Routing.js @@ -17,7 +17,14 @@ BR.Routing = L.Routing.extend({ opacity: 1 }, snapping: null, - zIndexOffset: -2000 + zIndexOffset: -2000, + distanceMarkers: { + iconSize: 20, + offset: 5000, + textFunction: function(distance) { + return distance / 1000; + } + } }, onAdd: function(map) { @@ -30,6 +37,14 @@ BR.Routing = L.Routing.extend({ this._waypoints.on('layeradd', this._setMarkerOpacity, this); + this.on('routing:routeWaypointStart routing:rerouteAllSegmentsStart', function(evt) { + this._removeDistanceMarkers(); + }); + + this.on('routing:routeWaypointEnd routing:setWaypointsEnd routing:rerouteAllSegmentsEnd', function(evt) { + this._updateDistanceMarkers(evt); + }); + // turn line mouse marker off while over waypoint marker this.on( 'waypoint:mouseover', @@ -191,6 +206,10 @@ BR.Routing = L.Routing.extend({ this._waypoints.eachLayer(function(marker) { marker.setOpacity(opacity); }); + + if (this._distanceMarkers) { + this._distanceMarkers.setOpacity(opacity); + } }, _setMarkerOpacity: function(e) { @@ -339,5 +358,21 @@ BR.Routing = L.Routing.extend({ waypoints.reverse(); this.clear(); this.setWaypoints(waypoints); + }, + + _removeDistanceMarkers: function() { + if (this._map && this._distanceMarkers) { + this._map.removeLayer(this._distanceMarkers); + } + }, + + _updateDistanceMarkers: function(e) { + this._removeDistanceMarkers(); + + if (this._map) { + let distanceMarkersOpts = this.options.distanceMarkers || {}; + this._distanceMarkers = new L.DistanceMarkers(this.toPolyline(), this._map, distanceMarkersOpts); + this._map.addLayer(this._distanceMarkers); + } } }); diff --git a/js/plugin/leaflet-distance-marker.js b/js/plugin/leaflet-distance-marker.js new file mode 100644 index 0000000..452d733 --- /dev/null +++ b/js/plugin/leaflet-distance-marker.js @@ -0,0 +1,129 @@ +/* + * https://github.com/adoroszlai/leaflet-distance-markers + * + * The MIT License (MIT) + * + * Copyright (c) 2014- Doroszlai Attila, 2016- Phil Whitehurst + * + * Permission is hereby granted, free of charge, to any person obtaining a copy of + * this software and associated documentation files (the "Software"), to deal in + * the Software without restriction, including without limitation the rights to + * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of + * the Software, and to permit persons to whom the Software is furnished to do so, + * subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS + * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR + * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER + * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN + * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + */ + +L.DistanceMarkers = L.LayerGroup.extend({ + initialize: function(line, map, options) { + options = options || {}; + var offset = options.offset || 1000; + var showAll = Math.min(map.getMaxZoom(), options.showAll || 12); + var cssClass = options.cssClass || 'dist-marker'; + var iconSize = options.iconSize !== undefined ? options.iconSize : [12, 12]; + var textFunction = + options.textFunction || + function(distance, i) { + return i; + }; + + var zoomLayers = {}; + // Get line coords as an array + var coords = line; + if (typeof line.getLatLngs == 'function') { + coords = line.getLatLngs(); + } + // Get accumulated line lengths as well as overall length + var accumulated = L.GeometryUtil.accumulatedLengths(line); + var length = accumulated.length > 0 ? accumulated[accumulated.length - 1] : 0; + // Position in accumulated line length array + var j = 0; + // Number of distance markers to be added + var count = Math.floor(length / offset); + + for (var i = 1; i <= count; ++i) { + var distance = offset * i; + // Find the first accumulated distance that is greater + // than the distance of this marker + while (j < accumulated.length - 1 && accumulated[j] < distance) { + ++j; + } + // Now grab the two nearest points either side of + // distance marker position and create a simple line to + // interpolate on + var text = textFunction.call(this, distance, i, offset); + var p1 = coords[j - 1]; + var p2 = coords[j]; + var m_line = L.polyline([p1, p2]); + var ratio = (distance - accumulated[j - 1]) / (accumulated[j] - accumulated[j - 1]); + var position = L.GeometryUtil.interpolateOnLine(map, m_line, ratio); + var icon = L.divIcon({ className: cssClass, html: text, iconSize: iconSize }); + var marker = L.marker(position.latLng, { title: text, icon: icon }); + + // visible only starting at a specific zoom level + var zoom = this._minimumZoomLevelForItem(i, showAll); + if (zoomLayers[zoom] === undefined) { + zoomLayers[zoom] = L.layerGroup(); + } + zoomLayers[zoom].addLayer(marker); + } + + var currentZoomLevel = 0; + var markerLayer = this; + var updateMarkerVisibility = function() { + var oldZoom = currentZoomLevel; + var newZoom = (currentZoomLevel = map.getZoom()); + + if (newZoom > oldZoom) { + for (var i = oldZoom + 1; i <= newZoom; ++i) { + if (zoomLayers[i] !== undefined) { + markerLayer.addLayer(zoomLayers[i]); + } + } + } else if (newZoom < oldZoom) { + for (var i = oldZoom; i > newZoom; --i) { + if (zoomLayers[i] !== undefined) { + markerLayer.removeLayer(zoomLayers[i]); + } + } + } + }; + map.on('zoomend', updateMarkerVisibility); + + this._zoomLayers = zoomLayers; + this._layers = {}; // need to initialize before adding markers to this LayerGroup + updateMarkerVisibility(); + }, + + setOpacity: function(opacity) { + var i, + keys = Object.keys(this._zoomLayers), + l = keys.length; + + for (i = 0; i < l; ++i) { + let zoomLayer = this._zoomLayers[keys[i]]; + zoomLayer.eachLayer(function(layer) { + layer.setOpacity(opacity); + }); + } + }, + + _minimumZoomLevelForItem: function(item, showAllLevel) { + var zoom = showAllLevel; + var i = item; + while (i > 0 && i % 2 === 0) { + --zoom; + i = Math.floor(i / 2); + } + return zoom; + } +}); diff --git a/package.json b/package.json index dc11163..b123e42 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "leaflet-easybutton": "*", "leaflet-editable": "^1.1.0", "leaflet-elevation": "nrenner/Leaflet.Elevation#dev", + "leaflet-geometryutil": "^0.9.1", "leaflet-plugins": "~3.0.0", "leaflet-providers": "^1.5.0", "leaflet-routing": "nrenner/leaflet-routing#dev", diff --git a/yarn.lock b/yarn.lock index 70417ee..7752ae8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4430,6 +4430,13 @@ leaflet-elevation@nrenner/Leaflet.Elevation#dev: version "0.0.4" resolved "https://codeload.github.com/nrenner/Leaflet.Elevation/tar.gz/9ae6a3caef5f01abb3e55e05376df2e0046f7449" +leaflet-geometryutil@^0.9.1: + version "0.9.1" + resolved "https://registry.yarnpkg.com/leaflet-geometryutil/-/leaflet-geometryutil-0.9.1.tgz#1dd379d7923a8a625266181c1983910a8e8dfc02" + integrity sha512-DKYLzFBsEcmZSl1fXLM+Pd+7t5IHmY6Ps7XeSnWL1ngr1qxQfcVzhkJT9gxfZrmFWiL96c23xQ0aLcHocV2tVA== + dependencies: + leaflet ">=0.7.0" + leaflet-plugins@~3.0.0: version "3.0.3" resolved "https://registry.yarnpkg.com/leaflet-plugins/-/leaflet-plugins-3.0.3.tgz#7c727ac79a37636b245dd1adc64e10c61b425864" @@ -4474,6 +4481,11 @@ leaflet.stravasegments@2.3.2: leaflet-easybutton "^2.3.0" leaflet-triangle-marker "^1.0.1" +leaflet@>=0.7.0: + version "1.5.1" + resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.5.1.tgz#9afb9d963d66c870066b1342e7a06f92840f46bf" + integrity sha512-ekM9KAeG99tYisNBg0IzEywAlp0hYI5XRipsqRXyRTeuU8jcuntilpp+eFf5gaE0xubc9RuSNIVtByEKwqFV0w== + leaflet@^1.0.1, leaflet@^1.3.4, leaflet@~1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.4.0.tgz#d5f56eeb2aa32787c24011e8be4c77e362ae171b"