From 42385b7794e60351a585eb965d5a9ce415161cd3 Mon Sep 17 00:00:00 2001
From: Hans Busch <47081128+HansBusch@users.noreply.github.com>
Date: Sat, 19 Aug 2023 13:01:49 +0200
Subject: [PATCH 1/6] Highlight selected measurement.

---
 visualization/measurements.html | 57 ++++++++++++---------------------
 1 file changed, 21 insertions(+), 36 deletions(-)

diff --git a/visualization/measurements.html b/visualization/measurements.html
index f1194c5..3bd86fc 100644
--- a/visualization/measurements.html
+++ b/visualization/measurements.html
@@ -337,7 +337,8 @@ <h4>Visualisierung: Messwerte </h4>
     var f = new ol.Feature({
     geometry: new ol.geom.LineString(
     [p1, p2]
-    )
+    ),
+	parent: feature
     });
     // f.setStyle(styles);
     arrowLayer.getSource().addFeature(f);
@@ -354,43 +355,27 @@ <h4>Visualisierung: Messwerte </h4>
 
     arrowLayer.setVisible(true);
 
-
+	function selectNode(feature) {
+		var prop = feature.getProperties();
+		if (prop.hasOwnProperty('parent')) feature = prop.parent;
+		if (dataSource.hasFeature(feature)) {
+		var coord = feature.getGeometry().getCoordinates();
+		var props = feature.getProperties();
+		caption.innerHTML = annotation(feature);
+		caption.style.alignItems="flex-start";
+		console.log(annotation_verbose(feature));
+		feature.setStyle(styleFunction(feature, undefined, true));
+		}
+		vectorLayer.getSource().getFeatures().forEach(f=>{
+		if (f != feature) f.setStyle(styleFunction(f, undefined, false));
+		});
+	}
 
     map.on('singleclick', function(evt) {
-    var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
-    return feature;
-    });
-    if (feature && dataSource.hasFeature(feature)) {
-    var coord = feature.getGeometry().getCoordinates();
-    var props = feature.getProperties();
-    caption.innerHTML = annotation(feature);
-    caption.style.alignItems="flex-start";
-    console.log(annotation_verbose(feature));
-    }
-    });
-
-
-    // feature mouse hover handler
-    var noFeatureActive = false;
-
-    map.on('pointermove', function(evt) {
-    if (evt.dragging) {
-    return;
-    }
-    if (!noFeatureActive){
-    vectorLayer.getSource().getFeatures().forEach(f=>{
-    f.setStyle(styleFunction(f, undefined, false));
-    });
-    noFeatureActive = true;
-    }
-    var pixel = map.getEventPixel(evt.originalEvent);
-    map.forEachFeatureAtPixel(pixel,function(feature) {
-    if (dataSource.hasFeature(feature)){
-    feature.setStyle(styleFunction(feature, undefined, true));
-    noFeatureActive = false;
-    }
-    return feature;
-    });
+	var sources = vectorLayer.getSource();
+		var feature = vectorLayer.getSource().getClosestFeatureToCoordinate(evt.coordinate);
+		if (feature) selectNode(feature);
+		return feature;
     });
 
     paletteUrban.writeLegend('legend_urban', [0, 1.5, 2.5], 'm');

From 42eada0ead8bf76a99f603c4efe9aea8cda22ca2 Mon Sep 17 00:00:00 2001
From: Hans Busch <47081128+HansBusch@users.noreply.github.com>
Date: Sat, 19 Aug 2023 14:01:28 +0200
Subject: [PATCH 2/6] Split longer lines into segments of 100 meter. Output
 distance measurements instead of statistics to enable client side combined
 statistics including sample count to know number of seconds on segment.

---
 obs/face/geojson/ExportRoadAnnotations.py | 43 +++++++++++------------
 obs/face/osm/DataSource.py                |  7 ++--
 obs/face/osm/Way.py                       | 41 +++++++++++++++++++--
 3 files changed, 62 insertions(+), 29 deletions(-)

diff --git a/obs/face/geojson/ExportRoadAnnotations.py b/obs/face/geojson/ExportRoadAnnotations.py
index e399fd8..f216bd3 100644
--- a/obs/face/geojson/ExportRoadAnnotations.py
+++ b/obs/face/geojson/ExportRoadAnnotations.py
@@ -43,16 +43,26 @@ def add_measurements(self, measurements):
         for sample in measurements:
             self.n_samples += 1
             # filter measurements
+            if not ("OSM_way_id" in sample):
+                continue;
+            way_id = sample["OSM_way_id"]
+            way_orientation = 1 if sample["OSM_way_orientation"] == -1 else 0
+
             if sample["latitude"] is None or sample["longitude"] is None or sample["distance_overtaker"] is None \
                     or self.only_confirmed_measurements and (sample["confirmed"] is not True) \
                     or not sample["has_OSM_annotations"]:
+                if not (way_id in self.way_statistics):
+                    way = self.map_source.get_way_by_id(way_id)
+                    if way:
+                        self.way_statistics[way_id] = WayStatistics(way_id, way)
+                if way_id in self.way_statistics and sample["speed"] != 0:
+                    self.way_statistics[way_id].n_ticks[way_orientation] += 1
+              
                 continue
 
             self.n_valid += 1
 
-            way_id = sample["OSM_way_id"]
             value = sample["distance_overtaker"]
-            way_orientation = sample["OSM_way_orientation"]
 
             self.map_source.ensure_coverage([sample["latitude"]], [sample["longitude"]])
 
@@ -68,13 +78,15 @@ def add_measurements(self, measurements):
                     self.n_grouped += 1
                 else:
                     logging.warning("way not found in map")
+            self.way_statistics[way_id].n_ticks[way_orientation] += 1
 
     def finalize(self):
         log.info("%s samples, %s valid", self.n_samples, self.n_valid)
         features = []
         for way_stats in self.way_statistics.values():
             way_stats.finalize()
-            if not any(way_stats.valid):
+#            if not any(way_stats.valid):
+            if not any(way_stats.n_ticks):
                 continue
 
             for i in range(1 if way_stats.oneway else 2):
@@ -91,19 +103,14 @@ def finalize(self):
                     coordinates = []
 
                 feature = {"type": "Feature",
-                           "properties": {"distance_overtaker_mean": way_stats.d_mean[i],
-                                          "distance_overtaker_median": way_stats.d_median[i],
-                                          "distance_overtaker_minimum": way_stats.d_minimum[i],
-                                          "distance_overtaker_n": way_stats.n[i],
-                                          "distance_overtaker_n_below_limit": way_stats.n_lt_limit[i],
-                                          "distance_overtaker_n_above_limit": way_stats.n_geq_limit[i],
-                                          "distance_overtaker_limit": way_stats.d_limit,
-                                          "distance_overtaker_measurements": way_stats.samples[i],
+                           "properties": {"distance_overtaker_limit": way_stats.d_limit,
+                                          "distance_overtaker_measurements": sorted(way_stats.samples[i], key = float),
                                           "zone": way_stats.zone,
                                           "direction": direction,
                                           "name": way_stats.name,
                                           "way_id": way_stats.way_id,
                                           "valid": way_stats.valid[i],
+                                          "ticks": way_stats.n_ticks[i],
                                           },
                            "geometry": {"type": "LineString", "coordinates": coordinates}}
 
@@ -124,12 +131,10 @@ def __init__(self, way_id, way):
         self.n = [0, 0]
         self.n_lt_limit = [0, 0]
         self.n_geq_limit = [0, 0]
+        self.n_ticks = [0, 0]
 
         self.way_id = way_id
         self.valid = [False, False]
-        self.d_mean = [0, 0]
-        self.d_median = [0, 0]
-        self.d_minimum = [0, 0]
 
         self.zone = "unknown"
         self.oneway = False
@@ -156,19 +161,11 @@ def __init__(self, way_id, way):
 
     def add_sample(self, sample, orientation):
         if np.isfinite(sample):
-            i = 1 if orientation == -1 else 0
-            self.samples[i].append(sample)
+            self.samples[orientation].append(sample)
         return self
 
     def finalize(self):
         for i in range(2):
             samples = np.array(self.samples[i])
             if len(samples) > 0:
-                self.n[i] = len(samples)
-                self.d_mean[i] = np.mean(samples)
-                self.d_median[i] = np.median(samples)
-                self.d_minimum[i] = np.min(samples)
-                if self.d_limit is not None:
-                    self.n_lt_limit[i] = int((samples < self.d_limit).sum())
-                    self.n_geq_limit[i] = int((samples >= self.d_limit).sum())
                 self.valid[i] = True
diff --git a/obs/face/osm/DataSource.py b/obs/face/osm/DataSource.py
index fb536d8..5f4d22c 100644
--- a/obs/face/osm/DataSource.py
+++ b/obs/face/osm/DataSource.py
@@ -65,9 +65,10 @@ def add_tile(self, tile):
         # add way objects, and store
         for way_id, way in ways.items():
             if way_id not in self.ways:
-                w = Way(way_id, way, nodes)
-                self.ways[way_id] = w
-                self.way_container.insert(w)
+                w = Way.create(way_id, way, nodes, 100)
+                self.ways.update(w)
+                for id in w:
+                    self.way_container.insert(w[id])
 
         # update tile list
         self.loaded_tiles.append(tile)
diff --git a/obs/face/osm/Way.py b/obs/face/osm/Way.py
index 689c742..729051c 100644
--- a/obs/face/osm/Way.py
+++ b/obs/face/osm/Way.py
@@ -4,7 +4,7 @@
 
 
 class Way:
-    def __init__(self, way_id, way, all_nodes):
+    def __init__(self, way_id, way, nodes_way):
         self.way_id = way_id
 
         if "tags" in way:
@@ -13,8 +13,6 @@ def __init__(self, way_id, way, all_nodes):
             self.tags = {}
 
         # determine points
-        nodes_way = [all_nodes[i] for i in way["nodes"]]
-
         lat = np.array([n["lat"] for n in nodes_way])
         lon = np.array([n["lon"] for n in nodes_way])
         self.points_lat_lon = np.stack((lat, lon), axis=1)
@@ -35,10 +33,47 @@ def __init__(self, way_id, way, all_nodes):
         # direction
         dx = np.diff(x)
         dy = np.diff(y)
+        self.seg_length = np.hypot(dx, dy)
         self.direction = np.arctan2(dy, dx)
 
         self.directionality_bicycle, self.directionality_motorized = self.get_way_directionality(way)
 
+    @staticmethod
+    def create(way_id, way, all_nodes, max_len):
+        ways = {}
+        # determine points
+        nodes = [all_nodes[i] for i in way["nodes"]]
+        lat = np.array([n["lat"] for n in nodes])
+        lon = np.array([n["lon"] for n in nodes])
+
+        # bounding box
+        a = (min(lat), min(lon))
+        b = (max(lat), max(lon))
+
+        # define the local map around the center of the bounding box
+        lat_0 = (a[0] + b[0]) * 0.5
+        lon_0 = (a[1] + b[1]) * 0.5
+        local_map = LocalMap(lat_0, lon_0)
+        x, y = local_map.transfer_to(lat, lon)
+        dx = np.diff(x)
+        dy = np.diff(y)
+        seg_length = np.hypot(dx, dy)
+
+        slen = 0
+        first = 0
+        if len(dx) > 0:
+            for i in range(len(seg_length)):
+                slen += seg_length[i]
+                if (slen > max_len and i != first):
+                    id = str(way_id)+'.'+str(i)
+                    ways[id] = Way(id, way, nodes[first:i+1])
+                    first = i
+                    slen = 0
+        id = str(way_id)
+        ways[id] = Way(id, way, nodes[first:])
+        return ways
+        
+
     def get_axis_aligned_bounding_box(self):
         return self.a, self.b
 

From 14b2a36c200a6020c436e5e7ea3700d25b3f50fa Mon Sep 17 00:00:00 2001
From: Hans Busch <47081128+HansBusch@users.noreply.github.com>
Date: Sat, 19 Aug 2023 14:05:25 +0200
Subject: [PATCH 3/6] Show global (city-wide) statistics when nothing selected.
 Select nearest line instead of exact hit to ease selection with mouse and
 tablet. Easy street selection plus individual segment selection via shift
 key. Condensed detail view including measurement time.

---
 visualization/OBS.js     |  11 +-
 visualization/roads.html | 335 +++++++++++++++++++--------------------
 2 files changed, 168 insertions(+), 178 deletions(-)

diff --git a/visualization/OBS.js b/visualization/OBS.js
index 7a66aac..b3378bf 100644
--- a/visualization/OBS.js
+++ b/visualization/OBS.js
@@ -172,11 +172,12 @@ class Palette {
 
 paletteUrban = new Palette(
   {
-    0.0: [64, 0, 0, 255],
-    1.4999: [196, 0, 0, 255],
-    1.5: [196, 196, 0, 255],
-    2.0: [0, 196, 0, 255],
-    2.55: [0, 255, 0, 255],
+    0.0: [196, 0, 0, 255],
+    0.8: [196, 0, 0, 255],
+    1.3: [245, 141, 0, 255],
+    1.5: [94, 188, 7, 255],
+    2.0: [94, 188, 7, 255],
+    2.55: [0, 196, 0, 255],
   },
   [0, 0, 196, 255]
 )
diff --git a/visualization/roads.html b/visualization/roads.html
index 79921bb..75a50bd 100644
--- a/visualization/roads.html
+++ b/visualization/roads.html
@@ -43,13 +43,14 @@
 		.overlay {
 			display: flex;
 			flex-direction: column;
-			justify-content: space-around;
+			justify-content: space-between;
 			position: absolute;
 			width: 30%;
 			height: 98%;
 			left: 1%;
 			top: 1%;
 			z-index: 0;
+			pointer-events: none;
 		}
 
 		.title {
@@ -57,7 +58,7 @@
 			position: relative;
 			height: 10%;
 			width: 100%;
-			background-color: #FFFFFF;
+#			background-color: #FFFFFF;
 			padding: 5px;
 			z-index: 0;
 		}
@@ -81,6 +82,7 @@
 			padding: 5px;
 			align-items: center;
 			z-index: 0;
+			pointer-events: auto;
 		}
 
 		.chart {
@@ -89,20 +91,16 @@
 			background-color: #FFFFFF;
 			padding: 5px;
 			z-index: 0;
-		}
-
-		.legend {
-			height: 15%;
-			width: 100%;
-			background-color: #FFFFFF;
-			padding: 5px;
-			z-index: 0;
+			pointer-events: auto;
 		}
 
 		.ol-zoom {
 			left: unset;
 			right: 8px;
 		}
+		td {
+			padding-left: 10px;
+		}
 	</style>
 	<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
 	<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
@@ -113,36 +111,26 @@
 <body>
 	<div id="map" class="map"></div>
 	<div id="overlay" class="overlay">
+		<div id="chart" class="chart"></div>
 		<div id="title" class="title">
 			<div id="title_image"><img src="images/OBS.png" height="100%"></img></div>
-			<div id="title_text">
-				<h4>Visualisierung: Stra&szlig;enabschnitte </h4>
-			</div>
 		</div>
-		<div id="chart" class="chart"></div>
 		<div id="caption" class="caption">
-			<b>Bitte einen Streckenabschnitt in der Karte (farbige Linien) anklicken um detailierte Informationen zu
-				erhalten.</b>
-		</div>
-		<div id="legend" class="legend">
-			<b>Kartenlegende</b><br>
-			Streckenabschnitte werden wie folgt eingefärbt: <br>
-			Anteil der &Uuml;berholenden unter Minimalabstand:
-			<div id="colorbar" class="colorbar"> </div>
-			ohne Messungen: <font color="#808080">grau</font>
 		</div>
 	</div>
 
 	<script type="text/javascript">
 		//			var criterion = "d_mean";
 		// var criterion = "p_above";
-		var criterion = "p_below";
+		var criterion = "d_quartile";
 
 		var hist_xa = 0.0;
 		var hist_xb = 2.55;
 		var hist_xb_extends_to_infinity = true;
 		var hist_dx = 0.25;
 		var hist_n = Math.ceil((hist_xb - hist_xa) / hist_dx);
+		var selectedFeatures = [];
+		var globalStats;
 
 		function histogramLabels() {
 
@@ -188,78 +176,89 @@ <h4>Visualisierung: Stra&szlig;enabschnitte </h4>
 
 			return binCounts;
 		}
-
-
-		function annotation_verbose(feature) {
-			var s = "";
-
-			s += "name: " + feature.get('name') + "\n";
-			s += "way_id: " + feature.get('way_id') + "\n";
-			s += "direction: " + feature.get('direction') + "\n";
-			s += "zone: " + feature.get('zone') + "\n";
-			s += "valid: " + feature.get('valid') + "\n";
-
-			d = feature.get('distance_overtaker_limit');
-			s += "distance_overtaker_limit: " + ((d == null) ? "n/a" : d.toFixed(2)) + " m \n";
-
-			s += "<hr></hr>statistics\n";
-
-			d = feature.get('distance_overtaker_mean');
-			s += "distance_overtaker_mean: " + ((d == null) ? "n/a" : d.toFixed(2)) + " m \n";
-
-			d = feature.get('distance_overtaker_median');
-			s += "distance_overtaker_median: " + ((d == null) ? "n/a" : d.toFixed(2)) + " m \n";
-
-			d = feature.get('distance_overtaker_minimum');
-			s += "distance_overtaker_minimum: " + ((d == null) ? "n/a" : d.toFixed(2)) + " m \n";
-
-			d = feature.get('distance_overtaker_n');
-			s += "distance_overtaker_n: " + ((d == null) ? "n/a" : d.toFixed(0)) + "\n";
-
-			d = feature.get('distance_overtaker_n_above_limit');
-			s += "distance_overtaker_n_above_limit: " + ((d == null) ? "n/a" : d.toFixed(0)) + "\n";
-
-			d = feature.get('distance_overtaker_n_below_limit');
-			s += "distance_overtaker_n_below_limit: " + ((d == null) ? "n/a" : d.toFixed(0)) + "\n";
-
-			var n_below = feature.get('distance_overtaker_n_below_limit');
-			var n = feature.get('distance_overtaker_n');
-			var p = n_below / n * 100.0;
-			s += "overtakers below limit: " + ((p == null) ? "n/a" : p.toFixed(1)) + " %\n";
-
-			return s;
+		function getMeasurements(features) {
+			var m = [];
+			features.forEach(feature => {
+				m = m.concat(feature.get('distance_overtaker_measurements'));
+			});
+			m.sort((a, b) => a - b);
+			return m;
+		}
+		function getStats(features) {
+			var limit = 100;
+			var m = getMeasurements(features);
+			var ticks = 0;
+			features.forEach(feature => {
+				var l = feature.get('distance_overtaker_limit');
+				if (l < limit) limit = l;
+				ticks += feature.get('ticks');
+			});
+			stats = {};
+			stats.n = m.length;
+			stats.median = m.length > 0 ? m[Math.floor(m.length/2)] : 0;
+			stats.min = m.length > 0 ? m[0] : 0;
+			stats.below = 0;
+			stats.limit = limit;
+			stats.ticks = ticks;
+			stats.m = m;
+			for (let i = 0; i < m.length && m[i] < limit; i++) stats.below++;
+			return stats;
 		}
 
-		function annotation(feature) {
-
+		function annotation(features) {
+			var stats = globalStats;
+			var way_id = 'all';
+			var name;
+			if (features.length > 0) {
+				 stats = getStats(features);
+				var feature = features[0];
+				way_id = feature.get('way_id');
+				name = feature.get('name');
+			}
 			var s = "<table>";
-
-			s += "<tr><td>Stra&szlig;enname:</td><td><a href=\"https://www.openstreetmap.org/way/" + feature.get('way_id') + "\" target=\"_blank\">" + feature.get('name')
-				+ "</a></td></tr>";
-
+			if (name) {
+				s += "<tr><td>Stra&szlig;enname:</td><td colspan='3'><a href=\"https://www.openstreetmap.org/way/" + way_id + "\" target=\"_blank\">" + name + "</a></td></tr>";
+			}
+			else {
+				s += "<tr><td colspan='5'><b>&Uuml;bersicht</b>. <br/>Bitte Stra&szlig;en anklicken um lokale Informationen zu erhalten. Einzelne Segmente k&ouml;nnen mit 'Shift' an- und abgew&auml;hlt werden.</td></tr>";
+			}
 			s += "<tr height=\"5em\"></tr>";
 
-			var n_below = feature.get('distance_overtaker_n_below_limit');
-			var n = feature.get('distance_overtaker_n');
-			var p = n_below / n * 100.0;
-			s += "<tr><td>Unterschreitung Mindestabstand:</td><td>" + ((p == null) ? "n/a" : p.toFixed(1)) + "% der &Uuml;berholenden</td></tr>";
 
-			d = feature.get('distance_overtaker_mean');
-			s += "<tr><td>Durchschnitt &Uuml;berholabstand:</td><td>" + ((d == null) ? "n/a" : d.toFixed(2)) + " m </td></tr>";
+			var ticks = stats.ticks;
+			if (ticks == 0) ticks = 1;
+			var m = stats.m;
+			var mean = 0;
+			for (let i = 0; i < m.length; i++) {
+				mean += m[i];
+			}
+			s += "<tr><td></td><td>Mittel</td><td>Viertel</td><td>Zehntel</td><td>Minimum</td></tr>";
+			s += "<tr><td>&Uuml;berholabst&auml;nde:</td><td>";
+			s += ((stats.median == 0) ? "n/a" : stats.median.toFixed(2)) + " m </td><td>";
+
+			var quartil = (m.length > 0) ? m[Math.floor(m.length/4)] : 0;
+			s += ((quartil == 0) ? "n/a" : quartil.toFixed(2)) + " m </td><td>";
 
-			d = feature.get('distance_overtaker_median');
-			s += "<tr><td>Median &Uuml;berholabstand:</td><td>" + ((d == null) ? "n/a" : d.toFixed(2)) + " m </td></tr>";
+			var dezil = (m.length > 0) ? m[Math.floor(m.length/10)] : 0;
+			s += ((dezil == 0) ? "n/a" : dezil.toFixed(2)) + " m </td><td>";
+			s += ((m.length == 0) ? "n/a" : m[0].toFixed(2)) + " m </td></tr>";
 
-			d = feature.get('distance_overtaker_minimum');
-			s += "<tr><td>Minimum &Uuml;berholabstand:</td><td>" + ((d == null) ? "n/a" : d.toFixed(2)) + " m </td></tr>";
 
 			s += "<tr height=\"5em\"></tr>";
 
-			d = feature.get('distance_overtaker_limit');
-			s += "<tr><td>Mindest&uuml;berholabstand:</td><td>" + ((d == null) ? "n/a" : d.toFixed(2)) + " m </td>";
+			var p = stats.below / stats.n * 100.0;
+			s += "<tr><td>Unterschreitung Mindestabstand von " + ((stats.limit == null) ? "n/a" : stats.limit.toFixed(2)) + " m :</td><td colspan='3'>" + ((stats.n == 0) ? "n/a" : p.toFixed(1)) + "% der &Uuml;berholenden</td></tr>";
+
+			s += "<tr><td>&Uuml;berholvorg&auml;nge pro Minute:</td><td>" + (m.length / ticks * 60).toFixed(1) + "</td></tr>";
+
+			s += "<tr><td>Anzahl &Uuml;berholvorg&auml;nge:</td><td>" + stats.n.toFixed(0) + "</td></tr>";
 
-			d = feature.get('distance_overtaker_n');
-			s += "<tr><td>Anzahl Messungen:</td><td>" + ((d == null) ? "n/a" : d.toFixed(0)) + "</td></tr>";
+			if (ticks > 3600) {
+				s += "<tr><td>Dauer der Erfassung:</td><td>" + (ticks / 3600).toFixed(1) + " h</td></tr>";
+			}
+			else {
+				s += "<tr><td>Dauer der Erfassung:</td><td colspan='2'>" + (ticks / 60).toFixed(1) + " min</td></tr>";
+			}
 
 			s += "</table>";
 
@@ -272,7 +271,7 @@ <h4>Visualisierung: Stra&szlig;enabschnitte </h4>
 		}
 
 		function styleFunction(feature, resolution, active = false) {
-			var n = feature.get('distance_overtaker_n');
+			var m = feature.get('distance_overtaker_measurements');
 			var zone = feature.get('zone');
 			if (zone == "urban") {
 				palette = paletteUrban;
@@ -287,55 +286,30 @@ <h4>Visualisierung: Stra&szlig;enabschnitte </h4>
 			var color = [0, 0, 0, 255];
 
 			if (valid) {
+				var rgba;
 				switch (criterion) {
-					case "d_mean":
-						var d = feature.get('distance_overtaker_mean');
-						color = palette.rgba_css(d)
-						break;
 					case "d_median":
-						var d = feature.get('distance_overtaker_median');
-						color = palette.rgba_css(d)
-						break;
-					case "d_min":
-						var d = feature.get('distance_overtaker_minimum');
-						color = palette.rgba_css(d)
+						color = palette.rgba(m[Math.floor(m.length/2)])
 						break;
-					case "p_above":
-						var n = feature.get('distance_overtaker_n');
-						var a = feature.get('distance_overtaker_n_above_limit');
-						var p = undefined;
-						if (n > 0) {
-							p = a / n;
-						}
-						color = palettePercentage.rgba_css(p * 100.0);
+					case "d_quartile":
+						color = palette.rgba(m[Math.floor(m.length/4)])
 						break;
-					case "p_below":
-						var n = feature.get('distance_overtaker_n');
-						var a = feature.get('distance_overtaker_n_below_limit');
-						var p = undefined;
-						if (n > 0) {
-							p = a / n;
-						}
-						// color = palettePercentageInverted.rgba_css(p*100.0);
-						// color = palettePercentageZweirat.rgba_css(p*100.0);
-						color = palettePercentageZweirat.rgba(p * 100.0);
+					case "d_min":
+						color = palette.rgba(m[0])
 						break;
 				}
+				if (m.length < 2) {
+					var sum = color[0] + color[1] + color[2];
+					color = [color[0] * 240 / sum, color[1] * 240 / sum, color[2] * 240 / sum, 255];
+					if (color[0] < 220) color[0] = 220;
+					if (color[1] < 220) color[1] = 220;
+					if (color[2] < 220) color[2] = 220;
+				}
 			} else {
-				color = [128, 128, 128, 255];
+				color = [220, 230, 220, 255];
 			}
 
-
-			var detail = smoothStep(resolution, 2.0, 1.0);
-			var mid = smoothStep(resolution, 30.0, 20.0) - smoothStep(resolution, 2.0, 1.0);
-			var overview = smoothStep(resolution, 20.0, 30.0);
-
-			console.log("resolution=" + resolution + "detail/mid/overview=" + detail + "/" + mid + "/" + overview);
-			var alpha = 1.0 * detail + 0.5 * mid + 0.5 * overview;
-			var width = active ? 2 : 1;
-			width = (active ? 4.0 : 2.0) * detail + 4 * mid + 200.0 / resolution * overview;
-
-			color[3] = alpha;
+			var width = (active ? 4.0 : 2.0); // * detail + 4 * mid + 200.0 / resolution * overview;
 
 			var style = new ol.style.Style({
 				stroke: new ol.style.Stroke({
@@ -348,6 +322,7 @@ <h4>Visualisierung: Stra&szlig;enabschnitte </h4>
 
 		var map = new ol.Map({
 			target: 'map',
+			interactions : ol.interaction.defaults({doubleClickZoom :false}),
 			layers: [
 				new ol.layer.Tile({
 				    className: "bw",
@@ -384,6 +359,9 @@ <h4>Visualisierung: Stra&szlig;enabschnitte </h4>
 				const overlay = document.getElementById("overlay");
 				const marginLeft = overlay.offsetWidth + overlay.offsetLeft;
     			map.getView().fit(extent, {size: mapSize, padding: [0, 0, 0, marginLeft]});
+				var evt0 = {coordinate: [0,0]};
+				onclick(evt0);
+
 			}
 		});
 
@@ -450,67 +428,78 @@ <h4>Visualisierung: Stra&szlig;enabschnitte </h4>
 		var chart = new ApexCharts(document.querySelector("#chart"), chartOptions);
 		chart.render();
 
-
-		var noFeatureActive = true;
-
-		map.on('singleclick', function (evt) {
-			var feature = map.forEachFeatureAtPixel(evt.pixel,
-				function (feature, layer) {
-					return feature;
-				});
-
+		function onclick(evt) {
+			var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
+			var feature = vectorLayer.getSource().getClosestFeatureToCoordinate(evt.coordinate);
+			var distance = 10000;
+			if (feature) {
+				var closest = feature.getGeometry().getClosestPoint(evt.coordinate);
+				var lonlat2 = ol.proj.transform(closest, 'EPSG:3857', 'EPSG:4326');
+				distance = ol.sphere.getDistance([lonlat[0], lonlat[1]], [lonlat2[0], lonlat2[1]]);
+			}
 			var resolution = map.getView().getResolution();
 
-			if (!noFeatureActive) {
-				vectorLayer.getSource().getFeatures().forEach(f => {
+			var colors = histogramColorsUrban;
+			if (feature && feature.get('zone') == "rural") {
+				colors = histogramColorsRural;
+			}
+			chart.updateOptions({
+				colors: colors
+			});
+			var hist;
+			var total = [];
+			if (distance > 100) {
+				vectorLayer.getSource().getFeatures().forEach(f => { total.push(f); });
+				selectedFeatures.forEach(f => {
 					f.setStyle(styleFunction(f, resolution, false));
 				});
-				noFeatureActive = true;
-			}
-
-			if (feature && dataSource.hasFeature(feature)) {
-				console.log(annotation_verbose(feature));
-				caption.innerHTML = annotation(feature);
-				caption.style.alignItems = "flex-start";
-
-				var zone = feature.get('zone');
-				var colors = undefined;
-				switch (zone) {
-					case "urban":
-						colors = histogramColorsUrban;
-						break;
-					case "rural":
-						colors = histogramColorsRural;
-						break;
-					default:
-						colors = histogramColorsUrban;
+				hist = histogram(total).reverse();
+				if (globalStats == undefined) {
+					globalStats = getStats(total);
 				}
-
-
-				chart.updateOptions({
-					colors: colors
+				selectedFeatures = [];
+			}
+			else if (feature && !evt.originalEvent.shiftKey) {
+				selectedFeatures.forEach(f => {
+					f.setStyle(styleFunction(f, resolution, false));
+				});
+				var name = feature.values_.name;
+				var total = [];
+				selectedFeatures = [];
+				vectorLayer.getSource().getFeatures().forEach(f => {
+					if (f.values_.name == name) {
+						f.setStyle(styleFunction(f, resolution, true));
+						selectedFeatures.push(f);
+					}
 				});
-
-				var hist = histogram(feature.get('distance_overtaker_measurements')).reverse();
-
-				chart.updateSeries([{
-					name: 'Überholende',
-					data: hist,
-				}]);
-
-
-				feature.setStyle(styleFunction(feature, resolution, true));
-				noFeatureActive = false;
 			}
+			else if (feature && dataSource.hasFeature(feature)) {
 
+				if (selectedFeatures.includes(feature)) {
+					selectedFeatures.splice(selectedFeatures.indexOf(feature), 1);
+					feature.setStyle(styleFunction(feature, resolution, false));
+				}
+				else {
+					feature.setStyle(styleFunction(feature, resolution, true));
+					selectedFeatures.push(feature);
+				}
+			}
+			caption.innerHTML = annotation(selectedFeatures);
+			caption.style.alignItems = "flex-start";
 
-		});
+			if (selectedFeatures.length > 0) total = selectedFeatures;
+			hist = histogram(getMeasurements(total)).reverse();
 
+			chart.updateSeries([{
+				name: 'Überholende',
+				data: hist,
+			}]);
 
+			noFeatureActive = false;
 
+		}
+		map.on('singleclick', onclick);
 
-		// palettePercentageInverted.writeLegend('colorbar', [0, 100.0], '%');
-		palettePercentageZweirat.writeLegend('colorbar', [0, 100.0], '%');
 	</script>
 </body>
 

From 64d02185c0f23d542d05adee2bae512ec12b0fcc Mon Sep 17 00:00:00 2001
From: Hans Busch <47081128+HansBusch@users.noreply.github.com>
Date: Sat, 7 Oct 2023 17:14:16 +0200
Subject: [PATCH 4/6] Add filter for simple visual data queries.

---
 visualization/measurements.html | 73 ++++++++++++++++++++++-----------
 1 file changed, 50 insertions(+), 23 deletions(-)

diff --git a/visualization/measurements.html b/visualization/measurements.html
index 3bd86fc..d1af8bf 100644
--- a/visualization/measurements.html
+++ b/visualization/measurements.html
@@ -104,18 +104,14 @@ <h4>Visualisierung: Messwerte </h4>
     <div id="caption" class="caption">
     	<b>Bitte einen Messpunkt in der Karte (farbige Kreise) anklicken um detailierte Informationen zu erhalten.</b>
     </div>
-    <div id="legend" class="legend">
-      <b>Kartenlegende</b><br>
-      Ring um Messung: <font color="#FFFF00">au&szlig;erorts</a>, <font color="#0000FF">innerorts</a>, <font color="#000000">unbekannt</a>
-      <br>
-	Fläche innerhalb kodiert den &Uuml;berholabstand:
-      <div id="legend_rural" class="legend_rural">&Uuml;berholabstand außerorts<br></div>
-      <div id="legend_urban" class="legend_urban">&Uuml;berholabstand innerorts<br></div>
-    </div>
+    <div class="legend">
+		<b>Filter</b><br/>
+		<input id='filter' size='30'/>
+	</div>
   </div>
 
   <script type="text/javascript">
-
+	var displayFilter = [];
     function annotation(feature){
     var s = "<table>";
 
@@ -264,7 +260,7 @@ <h4>Visualisierung: Messwerte </h4>
 
     var vectorLayer = new ol.layer.Vector({
     source: dataSource,
-    style: function(feature, resolution){ return styleFunction(feature, resolution, false);}
+    style: function(feature, resolution){ return styleFunction(feature, resolution, 0);}
     })
 
     function styleFunction(feature, resolution, active) {
@@ -286,10 +282,13 @@ <h4>Visualisierung: Messwerte </h4>
     }
     }
 
+	var r = 5;
+	if (active < 0) r = 2;
+	if (active > 0) r = 10;
 
     var style = new ol.style.Style({
     image: new ol.style.Circle({
-    radius: active?10:5,
+    radius: r,
     fill: new ol.style.Fill({color: color}),
     stroke: stroke
     })
@@ -356,18 +355,35 @@ <h4>Visualisierung: Messwerte </h4>
     arrowLayer.setVisible(true);
 
 	function selectNode(feature) {
-		var prop = feature.getProperties();
-		if (prop.hasOwnProperty('parent')) feature = prop.parent;
-		if (dataSource.hasFeature(feature)) {
-		var coord = feature.getGeometry().getCoordinates();
-		var props = feature.getProperties();
-		caption.innerHTML = annotation(feature);
-		caption.style.alignItems="flex-start";
-		console.log(annotation_verbose(feature));
-		feature.setStyle(styleFunction(feature, undefined, true));
+		if (feature != null) {
+			var prop = feature.getProperties();
+			if (prop.hasOwnProperty('parent')) feature = prop.parent;
+			if (dataSource.hasFeature(feature)) {
+			var coord = feature.getGeometry().getCoordinates();
+			var props = feature.getProperties();
+			caption.innerHTML = annotation(feature);
+			caption.style.alignItems="flex-start";
+			console.log(annotation_verbose(feature));
+			feature.setStyle(styleFunction(feature, undefined, 1));
+			}
 		}
 		vectorLayer.getSource().getFeatures().forEach(f=>{
-		if (f != feature) f.setStyle(styleFunction(f, undefined, false));
+		if (f != feature) {
+		var sel = 0;
+		if (displayFilter.length > 0) {
+			var val = f.get(displayFilter[0].key);
+			if (displayFilter[0].op == "==") {
+				if (displayFilter[0].val != val) sel = -1; 
+			}
+			else {
+				var fval = parseFloat(val);
+				var fcomp  = parseFloat(displayFilter[0].val);
+				if (displayFilter[0].op == "<") if (fval >= fcomp) sel = -1;
+				else if (displayFilter[0].op == ">") if (fval <= fcomp) sel = -1;
+			}
+		}
+		f.setStyle(styleFunction(f, undefined, sel));
+		}
 		});
 	}
 
@@ -378,8 +394,19 @@ <h4>Visualisierung: Messwerte </h4>
 		return feature;
     });
 
-    paletteUrban.writeLegend('legend_urban', [0, 1.5, 2.5], 'm');
-    paletteRural.writeLegend('legend_rural', [0, 2.0, 2.5], 'm');
+	var input = document.getElementById("filter");
+	input.addEventListener("keypress", function(event) {
+		if (event.key === "Enter") {
+		event.preventDefault();
+		displayFilter = []
+		var args = input.value.split(' ');
+		if (args.length >= 3) {
+			var f = {key:args[0], op:args[1], val:args[2]}
+			displayFilter.push(f);
+		}
+		selectNode(null);
+  }
+}); 
   </script>
 </body>
 </html>

From fa82c94562bb255035d9e99379f5a6d477ccb73a Mon Sep 17 00:00:00 2001
From: Hans Busch <47081128+HansBusch@users.noreply.github.com>
Date: Sun, 8 Oct 2023 16:38:26 +0200
Subject: [PATCH 5/6] Output full GPS coordinates to ease searching of
 abnormalities.

---
 visualization/measurements.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/visualization/measurements.html b/visualization/measurements.html
index d1af8bf..72b4576 100644
--- a/visualization/measurements.html
+++ b/visualization/measurements.html
@@ -125,7 +125,7 @@ <h4>Visualisierung: Messwerte </h4>
     if (feature.get('has_OSM_annotations') == true){
     s += "<tr><td>Position der Messung (korrigiert):</td><td>" + feature.get('latitude_projected').toFixed(6) + " " + feature.get('longitude_projected').toFixed(6) + "</td></tr>";
     }
-    s += "<tr><td>Position der Messung (GPS):</td><td>" + feature.get('latitude_GPS').toFixed(6) + " " + feature.get('longitude_GPS').toFixed(6) + "</td></tr>";
+    s += "<tr><td>Position der Messung (GPS):</td><td>" + feature.get('latitude_GPS') + " " + feature.get('longitude_GPS') + "</td></tr>";
 
     d = feature.get('distance_stationary');
     s += "<tr><td>Abstand nach rechts:</td><td>" + ((d == null)?"n/a":d.toFixed(2)) + " m  </td></tr>";

From 245fd890473f21c1aaa9852756b5f9754b24d634 Mon Sep 17 00:00:00 2001
From: Hans Busch <47081128+HansBusch@users.noreply.github.com>
Date: Sun, 8 Oct 2023 17:12:45 +0200
Subject: [PATCH 6/6] Handle too many blanks. Add filter keyword tooltips. Map
 missing distance to large distance.

---
 visualization/measurements.html | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/visualization/measurements.html b/visualization/measurements.html
index 72b4576..bd68bcd 100644
--- a/visualization/measurements.html
+++ b/visualization/measurements.html
@@ -116,10 +116,10 @@ <h4>Visualisierung: Messwerte </h4>
     var s = "<table>";
 
     d = feature.get('distance_overtaker');
-    s += "<td><b>&Uuml;berholabstand:</b></td><td><b>" + ((d == null)?"n/a":d.toFixed(2)) + " m</b></td></tr>";
+    s += "<td><div title='distance_overtaker'>&Uuml;berholabstand:</div></td><td><b>" + ((d == null)?"n/a":d.toFixed(2)) + " m</b></td></tr>";
     s += "<tr><td>Zeit/Datum der Messung:</td><td>" + feature.get('time') + "</td></tr>";
 
-    s += "<tr><td>Benutzer (pseudonymisiert):</td><td>" + feature.get('user_id') + "</td></tr>";
+    s += "<tr><td><div title='user_id'>Benutzer (pseudonymisiert):</div></td><td>" + feature.get('user_id') + "</td></tr>";
     s += "<tr><td>Messungs-ID (pseudonymisiert):</td><td>" + feature.get('measurement_id') + "</td></tr>";
 
     if (feature.get('has_OSM_annotations') == true){
@@ -128,15 +128,15 @@ <h4>Visualisierung: Messwerte </h4>
     s += "<tr><td>Position der Messung (GPS):</td><td>" + feature.get('latitude_GPS') + " " + feature.get('longitude_GPS') + "</td></tr>";
 
     d = feature.get('distance_stationary');
-    s += "<tr><td>Abstand nach rechts:</td><td>" + ((d == null)?"n/a":d.toFixed(2)) + " m  </td></tr>";
+    s += "<tr><td><div title='distance_stationary'>Abstand nach rechts:</div></td><td>" + ((d == null)?"n/a":d.toFixed(2)) + " m  </td></tr>";
 
-    s += "<tr><td>"
+    s += "<tr><td><div title='speed'>"
     if (feature.get("egomotion_is_derived") == true){
     s += "Eigenbewegung (aus Pos. berechnet)";
     } else {
     s += "Eigenbewegung (von GPS)";
     }
-    s += "</td><td>";
+    s += "</div></td><td>";
     c = feature.get('course');
     s += ((c == null)?"n/a":c.toFixed(0)) + " deg, ";
 
@@ -376,10 +376,10 @@ <h4>Visualisierung: Messwerte </h4>
 				if (displayFilter[0].val != val) sel = -1; 
 			}
 			else {
-				var fval = parseFloat(val);
+				var fval = val ? parseFloat(val) : 2;		// map missing to 2m distance
 				var fcomp  = parseFloat(displayFilter[0].val);
-				if (displayFilter[0].op == "<") if (fval >= fcomp) sel = -1;
-				else if (displayFilter[0].op == ">") if (fval <= fcomp) sel = -1;
+				if (displayFilter[0].op == "<") { if (fval >= fcomp) sel = -1;}
+				else if (displayFilter[0].op == ">") { if (fval <= fcomp) sel = -1;}
 			}
 		}
 		f.setStyle(styleFunction(f, undefined, sel));
@@ -399,7 +399,7 @@ <h4>Visualisierung: Messwerte </h4>
 		if (event.key === "Enter") {
 		event.preventDefault();
 		displayFilter = []
-		var args = input.value.split(' ');
+		var args = input.value.replace(/\s+/g, ' ').trim().split(' ');
 		if (args.length >= 3) {
 			var f = {key:args[0], op:args[1], val:args[2]}
 			displayFilter.push(f);