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>

resources/js/field.js

@@ -1,13 +1,21 @@
 Nova.booting((Vue, router) => {
-    Vue.component('index-nova-map-fields', require('./components/IndexField'));
-    Vue.component('detail-nova-map-fields', require('./components/DetailField'));
-    Vue.component('form-nova-map-fields', require('./components/FormField'));
+    Vue.component("index-nova-map-fields", require("./components/IndexField"));
+    Vue.component(
+        "detail-nova-map-fields",
+        require("./components/DetailField")
+    );
+    Vue.component("form-nova-map-fields", require("./components/FormField"));
 
-    Vue.component('field-map', require('./components/FieldMap'));
-    Vue.component('field-marker', require('./components/fields/Marker'));
-    Vue.component('field-polyline', require('./components/fields/Polyline'));
-    Vue.component('field-polygon', require('./components/fields/Polygon'));
+    Vue.component("field-map", require("./components/FieldMap"));
+    Vue.component("field-marker", require("./components/fields/Marker"));
+    Vue.component("field-polyline", require("./components/fields/Polyline"));
+    Vue.component("field-polygon", require("./components/fields/Polygon"));
+    Vue.component(
+        "field-navigation-route",
+        require("./components/fields/NavigationRoute")
+    );
 
     // Config leaflet images to load images from CDN
-    L.Icon.Default.imagePath = 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/images/';
-})
+    L.Icon.Default.imagePath =
+        "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/images/";
+});