DBC22-2173: fixed events midpoint calculation (#446)

src/frontend/src/Components/map/helpers/index.js

@@ -3,7 +3,7 @@ import { onMoveEnd } from './advisories';
 import { setEventStyle } from './events';
 import { blueLocationMarkup, redLocationMarkup, setLocationPin } from './location';
 import { calculateCenter, fitMap, setZoomPan, toggleMyLocation, transformFeature, zoomIn, zoomOut } from './map';
-import { compareRoutePoints, filterByRoute, populateRouteProjection } from './spatial';
+import { compareRoutePoints, filterByRoute, getMidPoint, populateRouteProjection } from './spatial';
 
 export {
   // advisories,
@@ -15,5 +15,5 @@ export {
   // map
   calculateCenter, fitMap, setZoomPan, toggleMyLocation, transformFeature, zoomIn, zoomOut,
   // spatial
-  compareRoutePoints, filterByRoute, populateRouteProjection
+  compareRoutePoints, filterByRoute, getMidPoint, populateRouteProjection
 };

src/frontend/src/Components/map/helpers/spatial.js

@@ -107,3 +107,23 @@ export const compareRoutePoints = (routePoints, savedPoints) => {
   // Direct comparison if not both of them are arrays of points
   return routePoints == savedPoints;
 }
+
+export const getMidPoint = (location) => {
+  // Return point coords if location is a point
+  if (location.type === "Point") {
+    return location.coordinates;
+  }
+
+  // Create turf ls from location coordinates
+  const line = turf.lineString(location.coordinates);
+
+  // Calculate the length of the LineString
+  const length = turf.length(line);
+
+  // Find the midpoint distance
+  const midpointDistance = length / 2;
+
+  // Find and return the point coords at the midpoint distance
+  const midpoint = turf.along(line, midpointDistance);
+  return midpoint.geometry.coordinates;
+}

src/frontend/src/Components/map/layers/eventsLayer.js

@@ -1,5 +1,5 @@
-// Components and functions
-import { setEventStyle } from '../helpers';
+// Internal imports
+import { getMidPoint, setEventStyle } from '../helpers';
 
 // OpenLayers
 import { Point, LineString, Polygon } from 'ol/geom';
@@ -58,21 +58,12 @@ export function loadEventsLayers(eventsData, mapContext, mapLayers, mapRef, refe
 
     // Add features to VectorSources for each event
     eventsData.forEach((event) => {
-      // location may have an object or an array of objects, so handle all
-      // event locations as an array of objects
-      const locationData = !Array.isArray(event.location) ? [event.location] : event.location;
-
       // all events have a point coordinate for an icon; for line or zone
       // events, the point is the median lat/long in the lineString
-      const full = locationData.reduce(
-        (full, location) => full.concat(location.coordinates),
-        []
-      );
-      const coordinates = full[Math.floor(full.length / 2)];
       const pointFeature = new ol.Feature({
         ...event,
         type: 'event',
-        geometry: new Point(coordinates),
+        geometry: new Point(getMidPoint(event.location)),
       });
       pointFeature.setId(event.id);
       pointFeature.getGeometry().transform('EPSG:4326', currentProjection);
@@ -96,6 +87,10 @@ export function loadEventsLayers(eventsData, mapContext, mapLayers, mapRef, refe
         pointFeature.set('altFeature', feature);
 
       } else {
+        // location may have an object or an array of objects, so handle all
+        // event locations as an array of objects
+        const locationData = !Array.isArray(event.location) ? [event.location] : event.location;
+
         const features = locationData.reduce((all, location, ii) => {
           const geometry = location.type === 'LineString'
             ? new LineString(location.coordinates)