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/";
+});

src/NavigationRoute.php

@@ -0,0 +1,40 @@
+<?php
+
+namespace Lassehaslev\NovaMapFields;
+
+class Polyline extends MapField
+{
+    /**
+     * Create a new field.
+     * And set default properties.
+     *
+     * @param string      $name
+     * @param string|null $attribute
+     * @param mixed|null  $resolveCallback
+     */
+    public function __construct($name, $attribute = null, $resolveCallback = null)
+    {
+        $this->help('Click on the map to create a new point. Drag a marker to change the point. When the map is selected, you can press [backspace] to remove markers.');
+
+        parent::__construct($name, $attribute = null, $resolveCallback);
+    }
+
+    /**
+     * Resolve the attribute before sending to frontend.
+     *
+     * @param mixed      $resource
+     * @param mixed|null $attribute
+     *
+     * @return array
+     */
+    public function resolveAttribute($resource, $attribute = null)
+    {
+        $value = $resource->{$attribute};
+
+        if (is_array($value)) {
+            return $value;
+        }
+
+        return json_decode($value);
+    }
+}