First commit.

resources/js/components/fields/Marker.vue

@@ -0,0 +1,80 @@
+<template>
+    <field-map :center="position" :field="field">
+        <l-marker :lat-lng="position" :draggable="edit" @dragend="onDragEnd"/>
+    </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);
+        }
+    },
+
+    mounted() {
+        this.registerWatchers();
+    },
+
+    methods: {
+        onDragEnd(evt) {
+            let latLng = evt.target.getLatLng();
+
+            this.$emit('input', {
+                lat: latLng.lat,
+                lng: latLng.lng,
+            });
+        },
+
+        registerWatchers() {
+            this.getGlobalFieldComponents().forEach(component => {
+                if ([this.field.latitudeField, this.field.longitudeField].includes(component.field.attribute)) {
+                    component.$watch('value', (value) => {
+                        this.value[component.field.attribute] = 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/components/fields/Polyline.vue

@@ -0,0 +1,87 @@
+<template>
+    <div @keydown.backspace="removeLastMarker">
+        <field-map :bounds="bounds" :center="center" :field="field" @click="createMarker">
+            <l-marker v-for="marker in markers" :lat-lng="marker" :draggable="edit" @dragend="triggerChange" />
+            <l-polyline :lat-lngs="value" :visible="true" />
+        </field-map>
+    </div>
+</template>
+
+<script>
+import {LMarker, LPolyline} 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,
+        }
+    },
+
+    computed: {
+        markers() {
+            if (!this.value[0]) {
+                return [];
+            }
+
+            return this.value;
+        },
+
+        center() {
+            if (!this.markers.length) {
+                return {
+                    lat: this.field.map.center.latitude,
+                    lng: this.field.map.center.longitude,
+                };
+            }
+
+            return this.bounds.getCenter();
+        },
+
+        bounds() {
+            if (this.startBounds !== undefined) {
+                return this.startBounds;
+            }
+
+            if (!this.markers.length) {
+                return null;
+            }
+
+            return this.startBounds = new L.LatLngBounds(this.markers);
+        },
+    },
+
+    methods: {
+        triggerChange() {
+            this.$emit('input', this.markers);
+        },
+        removeLastMarker() {
+            this.markers.splice(-1,1);
+            this.triggerChange();
+        },
+        createMarker(evt) {
+            this.markers.push(evt.latlng);
+            this.triggerChange();
+        }
+    },
+
+    components: {
+        LMarker,
+        LPolyline,
+    }
+}
+</script>