mobility-toolbox-js 3.0.0-beta.35 → 3.0.0-beta.37

package/README.md

@@ -10,7 +10,7 @@ The tools in this library have been inspired by many projects realized for publi
 
 ## Documentation and examples
 
-Visit https://mobility-toolbox-js.vercel.app/
+Visit https://mobility-toolbox-js.geops.io/
 
 ## Demos
 
@@ -24,7 +24,7 @@ Visit https://mobility-toolbox-js.vercel.app/
 Install the library and the peer dependencies:
 
 ```bash
-yarn add mobility-toolbox-js ol maplibre-gl
+yarn add ol maplibre-gl mobility-toolbox-js
 ```
 
 ## Development
@@ -34,9 +34,17 @@ yarn install
 yarn dev
 ```
 
+`yarn dev` starts a vite server using the `index.html` file at the root of the project.
+This html file loads the `dev.js` file. Use this file to develop the library.
+Each time you modifiy the library code you have to run `yarn build:tsc` to see the changes.
+
+## Development documentation
+
+The documentations website is located in the `doc/`  folder.
+It's a nextJS website that use the mobility-toolbox-js library built from the `build/` folder.
+
 ## Deploy
 
 This library website is deployed automatically using [Vercel](https://vercel.com/geops).
 For Vercel we have to add the nextjs and raw-loader modules in the dev dependencies of the main package.json.
 But those 2 librairies are not needed to build the library.
-

package/mbt.js

@@ -43225,13 +43225,13 @@ uniform ${i3} ${a3} u_${s3};
       }
       const map = this.getMap();
       if (map && map.isRendered() && this.getActive()) {
-        this.handlePointerAtPixel_(this.lastPixel_, map);
+        this.handlePointerAtPixel_(map.getCoordinateFromPixel(this.lastPixel_));
       }
       feature2.addEventListener(EventType_default.CHANGE, this.boundHandleFeatureChange_);
     }
     /**
      * @param {import("../MapBrowserEvent.js").default} evt Map browser event.
-     * @param {Array<Array<SegmentData>>} segments The segments subject to modification.
+     * @param {Array<SegmentData>} segments The segments subject to modification.
      * @private
      */
     willModifyFeatures_(evt, segments) {
@@ -43239,12 +43239,9 @@ uniform ${i3} ${a3} u_${s3};
         this.featuresBeingModified_ = new Collection_default();
         const features = this.featuresBeingModified_.getArray();
         for (let i = 0, ii = segments.length; i < ii; ++i) {
-          const segment = segments[i];
-          for (let s = 0, ss = segment.length; s < ss; ++s) {
-            const feature2 = segment[s].feature;
-            if (feature2 && !features.includes(feature2)) {
-              this.featuresBeingModified_.push(feature2);
-            }
+          const feature2 = segments[i].feature;
+          if (feature2 && !features.includes(feature2)) {
+            this.featuresBeingModified_.push(feature2);
           }
         }
         if (this.featuresBeingModified_.getLength() === 0) {
@@ -43562,10 +43559,11 @@ uniform ${i3} ${a3} u_${s3};
      * @param {import("../coordinate.js").Coordinate} coordinates Coordinates.
      * @param {Array<Feature>} features The features being modified.
      * @param {Array<import("../geom/SimpleGeometry.js").default>} geometries The geometries being modified.
+     * @param {boolean} existing The vertex represents an existing vertex.
      * @return {Feature} Vertex feature.
      * @private
      */
-    createOrUpdateVertexFeature_(coordinates2, features, geometries) {
+    createOrUpdateVertexFeature_(coordinates2, features, geometries, existing) {
       let vertexFeature = this.vertexFeature_;
       if (!vertexFeature) {
         vertexFeature = new Feature_default(new Point_default(coordinates2));
@@ -43577,6 +43575,7 @@ uniform ${i3} ${a3} u_${s3};
       }
       vertexFeature.set("features", features);
       vertexFeature.set("geometries", geometries);
+      vertexFeature.set("existing", existing);
       return vertexFeature;
     }
     /**
@@ -43606,6 +43605,80 @@ uniform ${i3} ${a3} u_${s3};
       }
       return super.handleEvent(mapBrowserEvent) && !handled;
     }
+    findInsertVerticesAndUpdateDragSegments_(pixelCoordinate) {
+      this.handlePointerAtPixel_(pixelCoordinate);
+      this.dragSegments_.length = 0;
+      this.featuresBeingModified_ = null;
+      const vertexFeature = this.vertexFeature_;
+      if (!vertexFeature) {
+        return;
+      }
+      const projection = this.getMap().getView().getProjection();
+      const insertVertices = [];
+      const vertex = vertexFeature.getGeometry().getCoordinates();
+      const vertexExtent = boundingExtent([vertex]);
+      const segmentDataMatches = this.rBush_.getInExtent(vertexExtent);
+      const componentSegments = {};
+      segmentDataMatches.sort(compareIndexes);
+      for (let i = 0, ii = segmentDataMatches.length; i < ii; ++i) {
+        const segmentDataMatch = segmentDataMatches[i];
+        const segment = segmentDataMatch.segment;
+        let uid = getUid(segmentDataMatch.geometry);
+        const depth = segmentDataMatch.depth;
+        if (depth) {
+          uid += "-" + depth.join("-");
+        }
+        if (!componentSegments[uid]) {
+          componentSegments[uid] = new Array(2);
+        }
+        if (segmentDataMatch.geometry.getType() === "Circle" && segmentDataMatch.index === CIRCLE_CIRCUMFERENCE_INDEX) {
+          const closestVertex = closestOnSegmentData(
+            pixelCoordinate,
+            segmentDataMatch,
+            projection
+          );
+          if (equals3(closestVertex, vertex) && !componentSegments[uid][0]) {
+            this.dragSegments_.push([segmentDataMatch, 0]);
+            componentSegments[uid][0] = segmentDataMatch;
+          }
+          continue;
+        }
+        if (equals3(segment[0], vertex) && !componentSegments[uid][0]) {
+          this.dragSegments_.push([segmentDataMatch, 0]);
+          componentSegments[uid][0] = segmentDataMatch;
+          continue;
+        }
+        if (equals3(segment[1], vertex) && !componentSegments[uid][1]) {
+          if (componentSegments[uid][0] && componentSegments[uid][0].index === 0) {
+            let coordinates2 = segmentDataMatch.geometry.getCoordinates();
+            switch (segmentDataMatch.geometry.getType()) {
+              // prevent dragging closed linestrings by the connecting node
+              case "LineString":
+              case "MultiLineString":
+                continue;
+              // if dragging the first vertex of a polygon, ensure the other segment
+              // belongs to the closing vertex of the linear ring
+              case "MultiPolygon":
+                coordinates2 = coordinates2[depth[1]];
+              /* falls through */
+              case "Polygon":
+                if (segmentDataMatch.index !== coordinates2[depth[0]].length - 2) {
+                  continue;
+                }
+                break;
+              default:
+            }
+          }
+          this.dragSegments_.push([segmentDataMatch, 1]);
+          componentSegments[uid][1] = segmentDataMatch;
+          continue;
+        }
+        if (getUid(segment) in this.vertexSegments_ && !componentSegments[uid][0] && !componentSegments[uid][1]) {
+          insertVertices.push(segmentDataMatch);
+        }
+      }
+      return insertVertices;
+    }
     /**
      * Handle pointer drag events.
      * @param {import("../MapBrowserEvent.js").default} evt Event.
@@ -43613,7 +43686,10 @@ uniform ${i3} ${a3} u_${s3};
      */
     handleDragEvent(evt) {
       this.ignoreNextSingleClick_ = false;
-      this.willModifyFeatures_(evt, this.dragSegments_);
+      this.willModifyFeatures_(
+        evt,
+        this.dragSegments_.map(([segment]) => segment)
+      );
       const vertex = [
         evt.coordinate[0] + this.delta_[0],
         evt.coordinate[1] + this.delta_[1]
@@ -43671,26 +43747,30 @@ uniform ${i3} ${a3} u_${s3};
             segment[index] = vertex;
             break;
           case "Circle":
+            const circle = (
+              /** @type {import("../geom/Circle.js").default} */
+              geometry
+            );
             segment[0] = vertex;
             segment[1] = vertex;
             if (segmentData.index === CIRCLE_CENTER_INDEX) {
               this.changingFeature_ = true;
-              geometry.setCenter(vertex);
+              circle.setCenter(vertex);
               this.changingFeature_ = false;
             } else {
               this.changingFeature_ = true;
               const projection = evt.map.getView().getProjection();
               let radius = distance(
-                fromUserCoordinate(geometry.getCenter(), projection),
+                fromUserCoordinate(circle.getCenter(), projection),
                 fromUserCoordinate(vertex, projection)
               );
               const userProjection2 = getUserProjection();
               if (userProjection2) {
-                const circleGeometry = geometry.clone().transform(userProjection2, projection);
+                const circleGeometry = circle.clone().transform(userProjection2, projection);
                 circleGeometry.setRadius(radius);
                 radius = circleGeometry.transform(projection, userProjection2).getRadius();
               }
-              geometry.setRadius(radius);
+              circle.setRadius(radius);
               this.changingFeature_ = false;
             }
             break;
@@ -43700,7 +43780,7 @@ uniform ${i3} ${a3} u_${s3};
           this.setGeometryCoordinates_(geometry, coordinates2);
         }
       }
-      this.createOrUpdateVertexFeature_(vertex, features, geometries);
+      this.createOrUpdateVertexFeature_(vertex, features, geometries, true);
     }
     /**
      * Handle pointer down events.
@@ -43713,80 +43793,15 @@ uniform ${i3} ${a3} u_${s3};
         return false;
       }
       const pixelCoordinate = evt.coordinate;
-      this.handlePointerAtPixel_(evt.pixel, evt.map, pixelCoordinate);
-      this.dragSegments_.length = 0;
-      this.featuresBeingModified_ = null;
-      const vertexFeature = this.vertexFeature_;
-      if (vertexFeature) {
-        const projection = evt.map.getView().getProjection();
-        const insertVertices = [];
-        const vertex = vertexFeature.getGeometry().getCoordinates();
-        const vertexExtent = boundingExtent([vertex]);
-        const segmentDataMatches = this.rBush_.getInExtent(vertexExtent);
-        const componentSegments = {};
-        segmentDataMatches.sort(compareIndexes);
-        for (let i = 0, ii = segmentDataMatches.length; i < ii; ++i) {
-          const segmentDataMatch = segmentDataMatches[i];
-          const segment = segmentDataMatch.segment;
-          let uid = getUid(segmentDataMatch.geometry);
-          const depth = segmentDataMatch.depth;
-          if (depth) {
-            uid += "-" + depth.join("-");
-          }
-          if (!componentSegments[uid]) {
-            componentSegments[uid] = new Array(2);
-          }
-          if (segmentDataMatch.geometry.getType() === "Circle" && segmentDataMatch.index === CIRCLE_CIRCUMFERENCE_INDEX) {
-            const closestVertex = closestOnSegmentData(
-              pixelCoordinate,
-              segmentDataMatch,
-              projection
-            );
-            if (equals3(closestVertex, vertex) && !componentSegments[uid][0]) {
-              this.dragSegments_.push([segmentDataMatch, 0]);
-              componentSegments[uid][0] = segmentDataMatch;
-            }
-            continue;
-          }
-          if (equals3(segment[0], vertex) && !componentSegments[uid][0]) {
-            this.dragSegments_.push([segmentDataMatch, 0]);
-            componentSegments[uid][0] = segmentDataMatch;
-            continue;
-          }
-          if (equals3(segment[1], vertex) && !componentSegments[uid][1]) {
-            if (componentSegments[uid][0] && componentSegments[uid][0].index === 0) {
-              let coordinates2 = segmentDataMatch.geometry.getCoordinates();
-              switch (segmentDataMatch.geometry.getType()) {
-                // prevent dragging closed linestrings by the connecting node
-                case "LineString":
-                case "MultiLineString":
-                  continue;
-                // if dragging the first vertex of a polygon, ensure the other segment
-                // belongs to the closing vertex of the linear ring
-                case "MultiPolygon":
-                  coordinates2 = coordinates2[depth[1]];
-                /* falls through */
-                case "Polygon":
-                  if (segmentDataMatch.index !== coordinates2[depth[0]].length - 2) {
-                    continue;
-                  }
-                  break;
-                default:
-              }
-            }
-            this.dragSegments_.push([segmentDataMatch, 1]);
-            componentSegments[uid][1] = segmentDataMatch;
-            continue;
-          }
-          if (getUid(segment) in this.vertexSegments_ && !componentSegments[uid][0] && !componentSegments[uid][1] && this.insertVertexCondition_(evt)) {
-            insertVertices.push(segmentDataMatch);
+      const insertVertices = this.findInsertVerticesAndUpdateDragSegments_(pixelCoordinate);
+      if (insertVertices?.length && this.insertVertexCondition_(evt)) {
+        this.willModifyFeatures_(evt, insertVertices);
+        if (this.vertexFeature_) {
+          const vertex = this.vertexFeature_.getGeometry().getCoordinates();
+          for (let j = insertVertices.length - 1; j >= 0; --j) {
+            this.insertVertex_(insertVertices[j], vertex);
           }
-        }
-        if (insertVertices.length) {
-          this.willModifyFeatures_(evt, [insertVertices]);
-        }
-        for (let j = insertVertices.length - 1; j >= 0; --j) {
-          this.insertVertex_(insertVertices[j], vertex);
+          this.ignoreNextSingleClick_ = true;
         }
       }
       return !!this.vertexFeature_;
@@ -43802,7 +43817,11 @@ uniform ${i3} ${a3} u_${s3};
         const segmentData = this.dragSegments_[i][0];
         const geometry = segmentData.geometry;
         if (geometry.getType() === "Circle") {
-          const coordinates2 = geometry.getCenter();
+          const circle = (
+            /** @type {import("../geom/Circle.js").default} */
+            geometry
+          );
+          const coordinates2 = circle.getCenter();
           const centerSegmentData = segmentData.featureSegments[0];
           const circumferenceSegmentData = segmentData.featureSegments[1];
           centerSegmentData.segment[0] = coordinates2;
@@ -43810,7 +43829,7 @@ uniform ${i3} ${a3} u_${s3};
           circumferenceSegmentData.segment[0] = coordinates2;
           circumferenceSegmentData.segment[1] = coordinates2;
           this.rBush_.update(createOrUpdateFromCoordinate(coordinates2), centerSegmentData);
-          let circleGeometry = geometry;
+          let circleGeometry = circle;
           const userProjection2 = getUserProjection();
           if (userProjection2) {
             const projection = evt.map.getView().getProjection();
@@ -43846,16 +43865,15 @@ uniform ${i3} ${a3} u_${s3};
      */
     handlePointerMove_(evt) {
       this.lastPixel_ = evt.pixel;
-      this.handlePointerAtPixel_(evt.pixel, evt.map, evt.coordinate);
+      this.handlePointerAtPixel_(evt.coordinate);
     }
     /**
-     * @param {import("../pixel.js").Pixel} pixel Pixel
-     * @param {import("../Map.js").default} map Map.
-     * @param {import("../coordinate.js").Coordinate} [coordinate] The pixel Coordinate.
+     * @param {import("../coordinate.js").Coordinate} pixelCoordinate The pixel Coordinate.
      * @private
      */
-    handlePointerAtPixel_(pixel, map, coordinate) {
-      const pixelCoordinate = coordinate || map.getCoordinateFromPixel(pixel);
+    handlePointerAtPixel_(pixelCoordinate) {
+      const map = this.getMap();
+      const pixel = map.getPixelFromCoordinate(pixelCoordinate);
       const projection = map.getView().getProjection();
       const sortByDistance = function(a, b) {
         return projectedDistanceToSegmentDataSquared(pixelCoordinate, a, projection) - projectedDistanceToSegmentDataSquared(pixelCoordinate, b, projection);
@@ -43873,10 +43891,10 @@ uniform ${i3} ${a3} u_${s3};
               );
             }
             const geom = geometry || feature2.getGeometry();
-            if (feature2 instanceof Feature_default && this.features_.getArray().includes(feature2)) {
+            if (geom && geom.getType() === "Point" && feature2 instanceof Feature_default && this.features_.getArray().includes(feature2)) {
               hitPointGeometry = /** @type {Point} */
               geom;
-              const coordinate2 = (
+              const coordinate = (
                 /** @type {Point} */
                 feature2.getGeometry().getFlatCoordinates().slice(0, 2)
               );
@@ -43884,7 +43902,7 @@ uniform ${i3} ${a3} u_${s3};
                 {
                   feature: feature2,
                   geometry: hitPointGeometry,
-                  segment: [coordinate2, coordinate2]
+                  segment: [coordinate, coordinate]
                 }
               ];
             }
@@ -43923,7 +43941,8 @@ uniform ${i3} ${a3} u_${s3};
             this.createOrUpdateVertexFeature_(
               vertex,
               [node.feature],
-              [node.geometry]
+              [node.geometry],
+              this.snappedToVertex_
             );
           } else {
             const pixel1 = map.getPixelFromCoordinate(closestSegment[0]);
@@ -43938,7 +43957,8 @@ uniform ${i3} ${a3} u_${s3};
             this.createOrUpdateVertexFeature_(
               vertex,
               [node.feature],
-              [node.geometry]
+              [node.geometry],
+              this.snappedToVertex_
             );
             const geometries = {};
             geometries[getUid(node.geometry)] = true;
@@ -43967,6 +43987,7 @@ uniform ${i3} ${a3} u_${s3};
     /**
      * @param {SegmentData} segmentData Segment data.
      * @param {import("../coordinate.js").Coordinate} vertex Vertex.
+     * @return {boolean} A vertex was inserted.
      * @private
      */
     insertVertex_(segmentData, vertex) {
@@ -43997,7 +44018,7 @@ uniform ${i3} ${a3} u_${s3};
           coordinates2.splice(index + 1, 0, vertex);
           break;
         default:
-          return;
+          return false;
       }
       this.setGeometryCoordinates_(geometry, coordinates2);
       const rTree = this.rBush_;
@@ -44021,17 +44042,70 @@ uniform ${i3} ${a3} u_${s3};
       };
       rTree.insert(boundingExtent(newSegmentData2.segment), newSegmentData2);
       this.dragSegments_.push([newSegmentData2, 0]);
-      this.ignoreNextSingleClick_ = true;
+      return true;
+    }
+    updatePointer_(coordinate) {
+      if (coordinate) {
+        this.findInsertVerticesAndUpdateDragSegments_(coordinate);
+      }
+      return this.vertexFeature_?.getGeometry().getCoordinates();
+    }
+    /**
+     * Get the current pointer position.
+     * @return {import("../coordinate.js").Coordinate | null} The current pointer coordinate.
+     */
+    getPoint() {
+      const coordinate = this.vertexFeature_?.getGeometry().getCoordinates();
+      if (!coordinate) {
+        return null;
+      }
+      return toUserCoordinate(
+        coordinate,
+        this.getMap().getView().getProjection()
+      );
+    }
+    /**
+     * Check if a point can be removed from the current linestring or polygon at the current
+     * pointer position.
+     * @return {boolean} A point can be deleted at the current pointer position.
+     * @api
+     */
+    canRemovePoint() {
+      if (!this.vertexFeature_) {
+        return false;
+      }
+      if (this.vertexFeature_.get("geometries").every(
+        (geometry) => geometry.getType() === "Circle" || geometry.getType().endsWith("Point")
+      )) {
+        return false;
+      }
+      const coordinate = this.vertexFeature_.getGeometry().getCoordinates();
+      const segments = this.rBush_.getInExtent(boundingExtent([coordinate]));
+      return segments.some(
+        ({ segment }) => equals3(segment[0], coordinate) || equals3(segment[1], coordinate)
+      );
     }
     /**
-     * Removes the vertex currently being pointed.
+     * Removes the vertex currently being pointed from the current linestring or polygon.
+     * @param {import('../coordinate.js').Coordinate} [coordinate] If provided, the pointer
+     * will be set to the provided coordinate. If not, the current pointer coordinate will be used.
      * @return {boolean} True when a vertex was removed.
      * @api
      */
-    removePoint() {
-      if (this.lastPointerEvent_ && this.lastPointerEvent_.type != MapBrowserEventType_default.POINTERDRAG) {
+    removePoint(coordinate) {
+      if (coordinate) {
+        coordinate = fromUserCoordinate(
+          coordinate,
+          this.getMap().getView().getProjection()
+        );
+        this.updatePointer_(coordinate);
+      }
+      if (!this.lastPointerEvent_ || this.lastPointerEvent_ && this.lastPointerEvent_.type != MapBrowserEventType_default.POINTERDRAG) {
         const evt = this.lastPointerEvent_;
-        this.willModifyFeatures_(evt, this.dragSegments_);
+        this.willModifyFeatures_(
+          evt,
+          this.dragSegments_.map(([segment]) => segment)
+        );
         const removed = this.removeVertex_();
         if (this.featuresBeingModified_) {
           this.dispatchEvent(
@@ -44160,6 +44234,45 @@ uniform ${i3} ${a3} u_${s3};
       }
       return deleted;
     }
+    /**
+     * Check if a point can be inserted to the current linestring or polygon at the current
+     * pointer position.
+     * @return {boolean} A point can be inserted at the current pointer position.
+     * @api
+     */
+    canInsertPoint() {
+      if (!this.vertexFeature_) {
+        return false;
+      }
+      if (this.vertexFeature_.get("geometries").every(
+        (geometry) => geometry.getType() === "Circle" || geometry.getType().endsWith("Point")
+      )) {
+        return false;
+      }
+      const coordinate = this.vertexFeature_.getGeometry().getCoordinates();
+      const segments = this.rBush_.getInExtent(boundingExtent([coordinate]));
+      return segments.some(
+        ({ segment }) => !(equals3(segment[0], coordinate) || equals3(segment[1], coordinate))
+      );
+    }
+    /**
+     * Inserts the vertex currently being pointed to the current linestring or polygon.
+     * @param {import('../coordinate.js').Coordinate} [coordinate] If provided, the pointer
+     * will be set to the provided coordinate. If not, the current pointer coordinate will be used.
+     * @return {boolean} A vertex was inserted.
+     * @api
+     */
+    insertPoint(coordinate) {
+      const pixelCoordinate = coordinate ? fromUserCoordinate(coordinate, this.getMap().getView().getProjection()) : this.vertexFeature_?.getGeometry().getCoordinates();
+      if (!pixelCoordinate) {
+        return false;
+      }
+      const insertVertices = this.findInsertVerticesAndUpdateDragSegments_(pixelCoordinate);
+      return insertVertices.reduce(
+        (prev, segmentData) => prev || this.insertVertex_(segmentData, pixelCoordinate),
+        false
+      );
+    }
     /**
      * @param {import("../geom/SimpleGeometry.js").default} geometry Geometry.
      * @param {Array} coordinates Coordinates.
@@ -44435,7 +44548,7 @@ uniform ${i3} ${a3} u_${s3};
      */
     createModifyInteraction() {
       this.modifyInteraction = new Modify_default({
-        // hitDetection: this.routingLayer, // Create a bug, the first point is always selected even if the mous eis far away
+        // hitDetection: this.routingLayer, // TODO: wait for ol, fixed in https://github.com/openlayers/openlayers/pull/16393
         deleteCondition: (e) => {
           const feats = e.target?.getFeaturesAtPixel(e.pixel, {
             hitTolerance: 5
@@ -44475,7 +44588,7 @@ uniform ${i3} ${a3} u_${s3};
      */
     drawRoute() {
       this.abortRequests();
-      this.routingLayer?.getSource()?.clear(true);
+      this.routingLayer?.getSource()?.clear();
       if (!this.viaPoints.length) {
         return null;
       }
@@ -45355,7 +45468,7 @@ uniform ${i3} ${a3} u_${s3};
         this.set("hitTolerance", newValue);
       }
       get key() {
-        return this.get("key") || this.get("name") || getUid(this);
+        return this.get("key") || this.get("name");
       }
       get map() {
         return this.getMapInternal();
@@ -45471,6 +45584,7 @@ uniform ${i3} ${a3} u_${s3};
         );
       }
       super(newOptions);
+      this.set("options", options);
     }
     /**
      * Initialize the layer and listen to feature clicks.
@@ -45519,6 +45633,9 @@ uniform ${i3} ${a3} u_${s3};
       if (this.url.includes("style.json")) {
         return this.url;
       }
+      if (this.get("options")?.mapLibreOptions?.style) {
+        return this.get("options").mapLibreOptions.style;
+      }
       return buildStyleUrl(this.url, this.style, this.apiKey, this.apiKeyName);
     }
     updateMaplibreMap() {
@@ -46868,11 +46985,18 @@ uniform ${i3} ${a3} u_${s3};
     if (minResolution && maxResolution && !inRange) {
       return [];
     }
+    const zIndex = feature2?.getGeometry()?.getType() === "Point" ? 100 : 0;
+    let styles = [blackBorder, redLine];
     const mot = feature2.get("mot");
-    if (mot !== "foot") {
-      return [blackBorder, redLine];
+    if (mot === "foot") {
+      styles = [dashedRedLine];
     }
-    return [dashedRedLine];
+    styles = styles.map((style) => {
+      const tmp = style.clone();
+      tmp.setZIndex(zIndex);
+      return tmp;
+    });
+    return styles;
   };
   var routingStyle_default = routingStyle;