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 { .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: 1px solid #777;
border-radius: 10px; border-radius: 9px;
text-align: center; text-align: center;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
color: black; 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, snapping: null,
zIndexOffset: -2000, zIndexOffset: -2000,
distanceMarkers: { distanceMarkers: {
iconSize: 20, // width as base number, multiplied by number of digits + one for padding
iconSize: [6, 18],
offset: 5000, offset: 5000,
textFunction: function(distance) { textFunction: function(distance) {
return distance / 1000; 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 m_line = L.polyline([p1, p2]);
var ratio = (distance - accumulated[j - 1]) / (accumulated[j] - accumulated[j - 1]); var ratio = (distance - accumulated[j - 1]) / (accumulated[j] - accumulated[j - 1]);
var position = L.GeometryUtil.interpolateOnLine(map, m_line, ratio); var position = L.GeometryUtil.interpolateOnLine(map, m_line, ratio);
var icon = L.divIcon({ className: cssClass, html: text, iconSize: iconSize }); // width as base number, one for padding + multiply by number of digits
var marker = L.marker(position.latLng, { title: text, icon: icon }); 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 // visible only starting at a specific zoom level
var zoom = this._minimumZoomLevelForItem(i, showAll); var zoom = this._minimumZoomLevelForItem(i, showAll);