New tripmarkers field.

resources/js/components/fields/TripMarkers.vue

@@ -0,0 +1,84 @@
+<template>
+    <field-map :center="markers[0]" :field="field">
+        <l-marker v-for="pos in markers" :lat-lng="pos" :draggable="edit" @dragend="onDragEnd" @click="(event) => toggleMarker(event, Math.random())" />
+            <!-- :opacity="Math.random() > 0.5 ? 1 : 0.5"/> -->
+    </field-map>
+</template>
+
+<script>
+import {LMarker} from 'vue2-leaflet'
+
+export default {
+    props: {
+        value: {
+            type: Object,
+            default: null,
+        },
+        field: {
+            type: Object,
+            required: true,
+        },
+        edit: {
+            type: Boolean,
+            default: false,
+        }
+    },
+
+    computed: {
+        position() {
+            return L.latLng(this.value.lat || this.field.map.center.latitude, this.value.lng || this.field.map.center.longitude);
+        },
+        markers() {
+            let { selected_products, all_products } = this.field;
+            return selected_products.map(prod => L.latLng(prod.lat, prod.lng))
+        }
+    },
+
+    methods: {
+        toggleMarker(event, id) {
+            console.log('marker clicked!');
+            console.log("id:", id)
+        },
+
+        onDragEnd(evt) {
+            let latLng = evt.target.getLatLng();
+
+            this.$emit('input', {
+                lat: latLng.lat,
+                lng: latLng.lng,
+            });
+        },
+
+        registerWatchers() {
+            this.getGlobalFieldComponents().forEach(component => {
+                component.$watch('value', (value) => {
+                    this.value['selected_products'] = value;
+                }, {immediate: true})
+            });
+
+        },
+
+        getGlobalFieldComponents(components = null) {
+            if (! components) {
+                components = this.$root.$children;
+            }
+
+            let returnArray = [];
+
+            components.forEach(component => {
+                if (component.field) {
+                    return returnArray.push(component);
+                }
+
+                returnArray = returnArray.concat(this.getGlobalFieldComponents(component.$children));
+            });
+
+            return returnArray;
+        },
+    },
+
+    components: {
+        LMarker,
+    }
+}
+</script>

resources/js/field.js

@@ -5,6 +5,7 @@ Nova.booting((Vue, router) => {
 
     Vue.component('field-map', require('./components/FieldMap'));
     Vue.component('field-marker', require('./components/fields/Marker'));
+    Vue.component('field-markers', require('./components/fields/TripMarkers'));
     Vue.component('field-polyline', require('./components/fields/Polyline'));
 
     // Config leaflet images to load images from CDN

src/TripMarkers.php

@@ -0,0 +1,74 @@
+<?php
+
+namespace Lassehaslev\NovaMapFields;
+
+use Laravel\Nova\Http\Requests\NovaRequest;
+
+class TripMarkers 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('Drag the marker to change the point.');
+
+        parent::__construct($name, $attribute = null, $resolveCallback);
+    }
+
+     /**
+     * Set the name field.
+     *
+     * @param mixed $fieldName
+     *
+     * @return $this
+     */
+    public function setProducts($fieldName)
+    {
+        return $this->withMeta([
+            'selected_products' => $fieldName,
+        ]);
+    }
+
+    /**
+     * Resolve the attribute before sending to frontend.
+     *
+     * @param mixed      $resource
+     * @param mixed|null $attribute
+     *
+     * @return array
+     */
+    public function resolveAttribute($resource, $attribute = null)
+    {
+        return [
+            // 'lat' => $resource->{$this->meta['latitudeField']},
+            // 'lng' => $resource->{$this->meta['longitudeField']},
+            'selected_products' => $resource->{$this->meta['selected_products']},
+        ];
+    }
+
+    /**
+     * Hydrate the given attribute on the model based on the incoming request.
+     *
+     * @param \Laravel\Nova\Http\Requests\NovaRequest $request
+     * @param string                                  $requestAttribute
+     * @param object                                  $model
+     * @param string                                  $attribute
+     */
+    protected function fillAttributeFromRequest(NovaRequest $request, $requestAttribute, $model, $attribute)
+    {
+        return json_decode($resource->{$attribute});
+
+        if ($request->exists($requestAttribute)) {
+            $latLng = json_decode($request[$requestAttribute]);
+
+            $model->{$this->meta['all_products']} = $latLng->all_products;
+            $model->{$this->meta['selected_products']} = $latLng->selected_products;
+        }
+    }
+}