Added distance markers to the routing path
This commit is contained in:
Unknown
parent
029bdad4ff
commit
173752c691
6 changed files with 192 additions and 1 deletions
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
129
js/plugin/leaflet-distance-marker.js
Normal file
129
js/plugin/leaflet-distance-marker.js
Normal file
|
|
@ -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;
|
||||
}
|
||||
});
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
12
yarn.lock
12
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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue