ben/brouter-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Improve distance markers a bit (#243)

Browse source 
- make icons a bit smaller
  - also results in better vertical centering
- round icon too small for 3 digits, multiply width by digits
- increase opacity a bit for better readability
This commit is contained in:
Norbert Renner 2019-12-13 12:44:24 +01:00
parent d33c795200
commit 9d59d51549
3 changed files with 11 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

8
css/leaflet-routing.css
View file

@ -5,11 +5,13 @@ div.line-mouse-marker {
}
.dist-marker {
font-size: 11px;
font-size: 10px;
/* 1px less than height to also center in Firefox (?) */
line-height: 17px;
border: 1px solid #777;
border-radius: 10px;
border-radius: 9px;
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);
background: rgba(255, 255, 255, 0.5);
}

3
js/plugin/Routing.js
View file

@ -17,7 +17,8 @@ BR.Routing = L.Routing.extend({
snapping: null,
zIndexOffset: -2000,
distanceMarkers: {
iconSize: 20,
// width as base number, multiplied by number of digits + one for padding
iconSize: [6, 18],
offset: 5000,
textFunction: function(distance) {
return distance / 1000;

6
js/plugin/leaflet-distance-marker.js
View file

@ -66,8 +66,10 @@ L.DistanceMarkers = L.LayerGroup.extend({
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 });
// width as base number, one for padding + multiply by number of digits
var size = [iconSize[0] + iconSize[0] * ('' + text).length, iconSize[1]];
var icon = L.divIcon({ className: cssClass, html: text, iconSize: size });
var marker = L.marker(position.latLng, { title: text, icon: icon, interactive: false });
// visible only starting at a specific zoom level
var zoom = this._minimumZoomLevelForItem(i, showAll);