highlight waypoints or route

app/javascript/helpers/functions.js

@@ -74,3 +74,13 @@ export function hasCoordinate (coordinates, coordinate) {
     coord[0].toFixed(5) === coordinate[0].toFixed(5) &&
     coord[1].toFixed(5) === coordinate[1].toFixed(5))
 }
+
+export function findCoordinate (coordinates, coordinate) {
+  for (let i = 0; i < coordinates.length; i++) {
+    if (coordinates[i][0].toFixed(5) === coordinate[0].toFixed(5) &&
+          coordinates[i][1].toFixed(5) === coordinate[1].toFixed(5)) {
+      return i
+    }
+  }
+  return -1
+}

app/javascript/maplibre/edit.js

@@ -218,18 +218,19 @@ async function handleUpdate (e) {
 
   // change route
   if (feature.properties.route) {
-    const coords = [feature.geometry.coordinates[0]]
+    // new waypoints are start, end, changed point and current waypoints that are still in the feature
+    const waypoints = [feature.geometry.coordinates[0]]
     // Track coordinate changes
     feature.geometry.coordinates.slice(1, -1).forEach((coord, index) => {
       if (coord[0] !== geojsonFeature.geometry.coordinates[index + 1][0] ||
           coord[1] !== geojsonFeature.geometry.coordinates[index + 1][1]) {
-        coords.push(coord)
+        waypoints.push(coord)
       } else if (functions.hasCoordinate(feature.properties.route.waypoints, coord)) {
-        coords.push(coord)
+        waypoints.push(coord)
       }
     })
-    coords.push(feature.geometry.coordinates.at(-1))
-    feature = await getRouteFeature(feature, coords, feature.properties.route.profile)
+    waypoints.push(feature.geometry.coordinates.at(-1))
+    feature = await getRouteFeature(feature, waypoints, feature.properties.route.profile)
   }
 
   status('Feature ' + feature.id + ' changed')
@@ -378,19 +379,28 @@ async function getRouteFeature (feature, waypoints, profile) {
       profile,
       format: 'json'
     })
-    console.log('response: ', snapResponse)
+    console.log('snap response: ', snapResponse)
     waypoints = snapResponse.locations.map(item => item.location)
     console.log('snapped values: ', waypoints)
 
     const routeResponse = await orsDirections.calculate({
       coordinates: waypoints,
       profile
     })
-    console.log('response: ', routeResponse)
+    console.log('route response: ', routeResponse)
     const routeLocations = decodePolyline(routeResponse.routes[0].geometry)
     console.log('routeLocations: ', routeLocations)
     feature.geometry.coordinates = routeLocations
+
+    // store waypoint indexes in coordinate for style highlight
+    const waypointIndexes = []
+    waypoints.forEach((waypoint) => {
+      const index = functions.findCoordinate(routeLocations, waypoint)
+      if (index >= 0) waypointIndexes.push(index + '')
+    })
+
     feature.properties.route = { profile, waypoints }
+    feature.properties.waypointIndexes = waypointIndexes
   } catch (err) {
     console.error('An error occurred: ' + err)
   }

app/javascript/maplibre/edit_styles.js

@@ -71,13 +71,16 @@ export function editStyles () {
       }
     },
     // midpoints to extend lines/polygons
-    // https://github.com/mapbox/mapbox-gl-draw/blob/main/src/lib/create_vertex.js
+    // https://github.com/mapbox/mapbox-gl-draw/blob/main/src/lib/create_midpoint.js
     {
       id: 'gl-draw-polygon-midpoint',
       type: 'circle',
       filter: ['all',
         ['==', '$type', 'Point'],
-        ['==', 'meta', 'midpoint']
+        ['==', 'meta', 'midpoint'],
+        // only show midpoints if this is not a route
+        // parent properties are patched into the midpoint properties
+        ['!has', 'user_route']
       ],
       paint: {
         'circle-radius': pointSize,
@@ -145,19 +148,42 @@ export function editStyles () {
         'circle-stroke-opacity': 1
       }
     },
-    // inactive vertex points on lines + polygons
+    // inactive vertex points on lines + polygons (non-route)
     {
       id: 'gl-draw-polygon-and-line-vertex-inactive',
       type: 'circle',
       filter: ['all',
         ['==', 'meta', 'vertex'],
         ['==', '$type', 'Point'],
-        ['!=', 'mode', 'static']
+        ['!=', 'mode', 'static'],
+        ['!has', 'user_route']
       ],
       paint: {
         'circle-radius': pointSize,
         'circle-color': highlightColor
       }
+    },
+
+    {
+      id: 'gl-draw-route-vertex-inactive',
+      type: 'circle',
+      filter: ['all',
+        ['==', 'meta', 'vertex'],
+        ['==', '$type', 'Point'],
+        ['!=', 'mode', 'static'],
+        ['has', 'user_route']
+      ],
+      paint: {
+        'circle-radius': pointSize,
+        'circle-color': [
+          'case', ['in', ['get', 'coord_path'], ['get', 'user_waypointIndexes']],
+          highlightColor, 'lightgrey'
+        ],
+        'circle-opacity': [
+          'case', ['in', ['get', 'coord_path'], ['get', 'user_waypointIndexes']],
+          1, 0.5
+        ]
+      }
     }
   ]
 }

vendor/javascript/@mapbox--mapbox-gl-draw.js

@@ -1590,9 +1590,29 @@ var B = Object.freeze(
  *   where the point exists within its parent feature's coordinates.
  * @param {boolean} selected
  * @return {GeoJSON} Point
- */ function createVertex(e, t, o, n) {
-    return { type: u.FEATURE, properties: { meta: h.VERTEX, parent: e, coord_path: o, active: n ? f.ACTIVE : f.INACTIVE }, geometry: { type: u.POINT, coordinates: t } };
+ */
+function createVertex(parent, coordinates, path, selected) {  //(e, t, o, n) {
+//     return { type: u.FEATURE, properties: { meta: h.VERTEX, parent: e, coord_path: o, active: n ? f.ACTIVE : f.INACTIVE }, geometry: { type: u.POINT, coordinates: t } };
+    const vertex = {
+      type: u.FEATURE,
+      properties: {
+        ...parent.properties,
+        meta: h.VERTEX,
+        parent: parent.properties && parent.properties.id,
+        coord_path: path,
+        active: selected ?
+          f.ACTIVE :
+          f.INACTIVE
+      },
+      geometry: {
+        type: u.POINT,
+        coordinates
+      }
+    };
+    delete vertex.properties.id;
+    return vertex;
 }
+
 function createMidpoint(parent, startVertex, endVertex) { // e, t, o
     //const n = t.geometry.coordinates;
     //const r = o.geometry.coordinates;
@@ -1634,13 +1654,16 @@ function createMidpoint(parent, startVertex, endVertex) { // e, t, o
         coordinates: [mid.lng, mid.lat]
         }
     };
+
+    console.log(midpoint)
+
     delete midpoint.properties.id;
     return midpoint;
 }
 
 function createSupplementaryPoints(e, t = {}, o = null) {
     const { type: n, coordinates: r } = e.geometry;
-    const i = e.properties && e.properties.id;
+    const i = e;
     let s = [];
     n === u.POINT
         ? s.push(createVertex(i, r, o, isSelectedPath(o)))
@@ -2215,10 +2238,10 @@ Q.toDisplayFeatures = function (e, t, o) {
     const r = t.geometry.coordinates[0].length;
     if (!(r < 3)) {
         t.properties.meta = h.FEATURE;
-        o(createVertex(e.polygon.id, t.geometry.coordinates[0][0], "0.0", false));
+        o(createVertex(e.polygon, t.geometry.coordinates[0][0], "0.0", false));
         if (r > 3) {
             const n = t.geometry.coordinates[0].length - 3;
-            o(createVertex(e.polygon.id, t.geometry.coordinates[0][n], `0.${n}`, false));
+            o(createVertex(e.polygon, t.geometry.coordinates[0][n], `0.${n}`, false));
         }
         if (r <= 4) {
             const e = [
@@ -2320,7 +2343,7 @@ ee.toDisplayFeatures = function (e, t, o) {
     if (!n) return o(t);
     if (!(t.geometry.coordinates.length < 2)) {
         t.properties.meta = h.FEATURE;
-        o(createVertex(e.line.id, t.geometry.coordinates[e.direction === "forward" ? t.geometry.coordinates.length - 2 : 1], "" + (e.direction === "forward" ? t.geometry.coordinates.length - 2 : 1), false));
+        o(createVertex(e.line, t.geometry.coordinates[e.direction === "forward" ? t.geometry.coordinates.length - 2 : 1], "" + (e.direction === "forward" ? t.geometry.coordinates.length - 2 : 1), false));
         o(t);
     }
 };