Testing new navigation route

resources/js/components/fields/NavigationRoute.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <Polyline
+      :edit="edit"
+      :field="field"
+      :value="value"
+      @input="triggerChange"
+    />
+  </div>
+</template>
+
+<script>
+import { Polyline } from "vue2-leaflet";
+
+export default {
+  props: {
+    value: {
+      type: Object,
+      default: null,
+    },
+    field: {
+      type: Object,
+      required: true,
+    },
+    edit: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      startBounds: undefined,
+      markerBeingDragged: undefined,
+      lastMarkerAddedTime: 0,
+    };
+  },
+
+  methods: {
+    queryNavigation(markers) {
+      const cords =
+        "6.985908836799895,61.28541170467011;7.092996407603286,61.23027059410228;10.761970380502788,59.927108594277456";
+      const URL = `https://api.mapbox.com/directions/v5/mapbox/driving/${cords}/geometries=geojson&access_token=pk.eyJ1Ijoia2V2aW5taWRib2UiLCJhIjoiY2pydWhlamQyMHJ2NTRhdGN1em5ndXVyMyJ9.Ejdo_3iuuGOD662Bh6es4w`;
+      fetch(URL)
+        .then((resp) => resp.json())
+        .then((response) => {
+          const { coordinates } = response.routes.geometry;
+          console.log("got coordinates:", coordinates);
+        });
+    },
+
+    triggerChange(markers) {
+      console.log("forwarding markers:", markers);
+      this.$emit("input", markers);
+    },
+  },
+
+  components: {
+    Polyline,
+  },
+};
+</script>