Add panel to measure lengths and areas.

Inspired from https://openlayers.org/en/latest/examples/measure.html and
https://openlayers.org/en/latest/examples/draw-features.html .

We use the Inter font https://rsms.me/inter/ for the measurement value
as it has good support for tabular-nums.

1 files changed, 50 insertions, 4 deletions

diff --git a/style.css b/style.css
index cf7fc86..fde3b81 100644
--- a/style.css
+++ b/style.css
@@ -194,11 +194,13 @@ body.inprogress {
 
 #map-control-container[aria-hidden="true"],
 #layer-selection-panel[aria-hidden="true"],
-#map-legend-panel[aria-hidden="true"] {
+#map-legend-panel[aria-hidden="true"],
+#measure-panel[aria-hidden="true"] {
   display: none;
 }
 #layer-selection-panel,
-#map-legend-panel {
+#map-legend-panel,
+#measure-panel {
   position: relative;
   margin-left: 0;
   margin-right: var(--map-menu-spacing);
@@ -219,6 +221,9 @@ body.inprogress {
 #map-legend-panel {
   max-width: 410px;
 }
+#measure-panel {
+  max-width: 15em;
+}
 @keyframes fade-in {
   from {
     opacity: 0;
@@ -233,7 +238,8 @@ body.inprogress {
   user-select: text; /* eslint-disable-line css/use-baseline */
 }
 #layer-selection-panel[aria-hidden="false"],
-#map-legend-panel[aria-hidden="false"] {
+#map-legend-panel[aria-hidden="false"],
+#measure-panel[aria-hidden="false"] {
   animation: fade-in .25s ease-in-out both;
   display: block;
 }
@@ -255,7 +261,8 @@ body.inprogress {
     display: none;
   }
   #layer-selection-panel,
-  #map-legend-panel {
+  #map-legend-panel,
+  #measure-panel {
     margin: var(--map-menu-spacing) 0 0 auto;
   }
 }
@@ -267,10 +274,12 @@ body.inprogress {
 @media screen and (max-width: 200px) {
   #layer-selection-button,
   #map-legend-button,
+  #measure-button,
   #age-filter-button,
   #export-to-image,
   #layer-selection-panel,
   #map-legend-panel,
+  #measure-panel,
   #map-menu .ol-full-screen {
     display: none;
   }
@@ -484,6 +493,43 @@ body.inprogress {
   -moz-user-select: text;
   user-select: text; /* eslint-disable-line css/use-baseline */
 }
+#measure-panel .h5 {
+  font-size: 1.25rem;
+  margin-bottom: .75rem;
+}
+#age-filter-modal .btn-group > .btn-check:not(:checked) + label.btn:hover,
+#measure-panel .btn-group > .btn-check:not(:checked) + label.btn:hover {
+  background: color-mix(in srgb, var(--bs-btn-bg) 35%, var(--bs-btn-hover-bg)); /* eslint-disable-line css/use-baseline */
+  color: var(--bs-btn-hover-color);
+}
+#measure-panel .measure-value {
+  font-family: Inter;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  --measure-value-padding: .75rem;
+  --measure-value-border-width: 3px;
+  --bs-border-opacity: .75;
+  border-width: var(--measure-value-border-width);
+  border-style: solid;
+  background: rgb(from var(--bs-secondary-bg-subtle) r g b / calc(alpha*.30));
+  height: calc(var(--bs-body-line-height) * 1.25rem + 2*var(--measure-value-padding) + 2*var(--measure-value-border-width));
+  padding: var(--measure-value-padding) var(--measure-value-padding);
+  margin: calc(var(--measure-value-padding)*1.5) 0;
+  overflow: hidden;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  user-select: text; /* eslint-disable-line css/use-baseline */
+}
+#measure-panel .measure-value :not(.measure-unit) {
+  font-size: 125%;
+  font-weight: 400;
+}
+#measure-panel .measure-value .measure-unit:before {
+  content: '\00A0'; /* U+00A0 NO-BREAK SPACE */
+}
+#measure-panel .btn-group {
+  width: 100%;
+}
 
 .popover {
   --bs-popover-header-padding-x: .75rem;