Make it smaller

traccar · Nov 4, 2024 · 766e4ca · 766e4ca
1 parent 693573e
commit 766e4ca
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 10 deletions.
diff --git a/src/map/MapRoutePoints.js b/src/map/MapRoutePoints.js
@@ -68,7 +68,7 @@ const MapRoutePoints = ({ positions, onClick }) => {
     const minSpeed = positions.map((p) => p.speed).reduce((a, b) => Math.min(a, b), Infinity);
 
     const control = new LegendControl(positions, speedUnit, t);
-    map.addControl(control, 'bottom-right');
+    map.addControl(control, 'bottom-left');
 
     map.getSource(id)?.setData({
       type: 'FeatureCollection',

diff --git a/src/map/legend/MapSpeedLegend.js b/src/map/legend/MapSpeedLegend.js
@@ -15,7 +15,7 @@ export class LegendControl {
     this.map = map;
     // Create the control container
     this.controlContainer = document.createElement('div');
-    this.controlContainer.className = 'maplibregl-ctrl-group maplibregl-ctrl';
+    this.controlContainer.className = 'maplibregl-ctrl';
 
     if (this.positions.length && this.maxSpeed) {
       this.controlContainer.appendChild(this.createSpeedLegend(this.minSpeed, this.maxSpeed, this.t));
@@ -39,7 +39,6 @@ export class LegendControl {
     }).join(', ');
 
     const legend = document.createElement('div');
-    legend.classList.add('legend');
 
     const colorBar = document.createElement('div');
     colorBar.classList.add('legend-color-bar');

diff --git a/src/map/legend/legend.css b/src/map/legend/legend.css
@@ -1,23 +1,20 @@
-.legend {
-    padding: 10px;
-}
-
 .legend-color-bar {
-    height: 20px;
+    height: 10px;
 }
 
 .legend-speed-labels {
     display: flex;
 }
 
 .legend-speed-label {
-    /* this makes the middle label position exactly in the middle */
     min-width: 70px;
+    color: black;
+    background: rgba(255, 255, 255, 0.8);
+    padding: 0 2px;
 }
 
 .legend-speed-label:nth-child(2) {
     text-align: center;
-    padding: 0 30px;
 }
 
 .legend-speed-label:nth-child(3) {