Added initual functionality

.gitignore

@@ -0,0 +1,10 @@
+/.idea
+/vendor
+/node_modules
+package-lock.json
+composer.phar
+composer.lock
+phpunit.xml
+.phpunit.result.cache
+.DS_Store
+Thumbs.db

composer.json

@@ -0,0 +1,36 @@
+{
+    "name": "genealabs/nova-map-marker-field",
+    "description": "A Laravel Nova field.",
+    "keywords": [
+        "laravel",
+        "nova"
+    ],
+    "license": "MIT",
+    "repositories": [
+        {
+            "type": "composer",
+            "url": "https://nova.laravel.com"
+        }
+    ],
+    "require": {
+        "laravel/nova": "2.*",
+        "php": ">=7.1.0"
+    },
+    "autoload": {
+        "psr-4": {
+            "GeneaLabs\\NovaMapMarkerField\\": "src/"
+        }
+    },
+    "extra": {
+        "laravel": {
+            "providers": [
+                "GeneaLabs\\NovaMapMarkerField\\Providers\\Service"
+            ]
+        }
+    },
+    "config": {
+        "sort-packages": true
+    },
+    "minimum-stability": "dev",
+    "prefer-stable": true
+}

dist/mix-manifest.json

@@ -0,0 +1,4 @@
+{
+    "/js/field.js": "/js/field.js",
+    "/css/field.css": "/css/field.css"
+}

package.json

@@ -0,0 +1,28 @@
+{
+    "private": true,
+    "scripts": {
+        "dev": "npm run development",
+        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "watch-poll": "npm run watch -- --watch-poll",
+        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "prod": "npm run production",
+        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+    },
+    "devDependencies": {
+        "cross-env": "^5.0.0",
+        "laravel-mix": "^4.0",
+        "laravel-nova": "^1.0",
+        "leaflet": "^1.5.1",
+        "resolve-url-loader": "2.3.1",
+        "sass": "^1.21.0",
+        "sass-loader": "7.*",
+        "vue": "^2.5.0",
+        "vue-template-compiler": "^2.6.10",
+        "vue2-leaflet": "^2.1.1"
+    },
+    "dependencies": {
+        "leaflet-geosearch": "^2.7.0",
+        "vue2-leaflet-geosearch": "^1.0.6"
+    }
+}

resources/js/components/DetailField.vue

@@ -0,0 +1,128 @@
+<script>
+import { FormField, HandlesValidationErrors } from 'laravel-nova';
+import L from "leaflet";
+import { LMap, LTileLayer, LMarker, LIcon } from 'vue2-leaflet';
+
+delete L.Icon.Default.prototype._getIconUrl;
+L.Icon.Default.mergeOptions({
+    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
+    iconUrl: require('leaflet/dist/images/marker-icon.png'),
+    shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
+});
+
+export default {
+    components: {
+        LMap,
+        LMarker,
+        LTileLayer,
+    },
+
+    mixins: [FormField, HandlesValidationErrors],
+
+    props: ['resourceName', 'resourceId', 'field'],
+
+    data: function () {
+        return {
+            url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
+            mapOptions: {
+                boxZoom: false,
+                doubleClickZoom: false,
+                dragging: false,
+            },
+            markerOptions: {
+                interactive: false,
+            },
+        };
+    },
+
+    computed: {
+        mapCenter: function () {
+            if (this.value.latitude === undefined) {
+                this.setInitialValue();
+            }
+
+            return [
+                this.value.latitude,
+                this.value.longitude,
+            ];
+        },
+
+        zoom: function () {
+            if (this.value.latitude === undefined) {
+                this.setInitialValue();
+            }
+
+            if (! this.value.latitude) {
+                return 4;
+            }
+
+            return 16;
+        }
+    },
+
+    methods: {
+        fill: function (formData) {
+			formData.append(this.field.latitude, this.value.latitude);
+            formData.append(this.field.longitude, this.value.longitude);
+        },
+
+        handleChange: function (value) {
+            this.value.latitude = value.latitude;
+            this.value.longitude = value.longitude;
+        },
+
+        mapMoved: function (event) {
+            let coordinates = event.target.getCenter();
+
+            this.value.latitude = coordinates.lat;
+            this.value.longitude = coordinates.lng;
+        },
+
+        setInitialValue: function () {
+            this.value = {
+                latitude: this.field.value.latitude || 0,
+                longitude: this.field.value.longitude || 0,
+            };
+        },
+    },
+};
+</script>
+
+<template>
+    <panel-item :field="field">
+        <div slot="value">
+            <l-map
+                class="z-10 map-field w-full form-control form-input-bordered overflow-hidden relative"
+                ref="map"
+                :center="mapCenter"
+                :options="mapOptions"
+                :zoom="zoom"
+                @move="mapMoved"
+            >
+                <l-tile-layer
+                    :url="url"
+                ></l-tile-layer>
+                <l-marker
+                    :options="markerOptions"
+                    :lat-lng="mapCenter"
+                ></l-marker>
+            </l-map>
+        </div>
+    </panel-item>
+</template>
+
+<style lang="scss" scoped>
+    @import "~leaflet/dist/leaflet.css";
+
+    .leaflet-pane {
+        position: relative;
+    }
+
+    .map-field {
+        height: 350px;
+    }
+
+    .leaflet-pane .leaflet-shadow-pane {
+        display: none;
+    }
+</style>

resources/js/components/FormField.vue

@@ -0,0 +1,139 @@
+<script>
+import { FormField, HandlesValidationErrors } from 'laravel-nova';
+import L from "leaflet";
+import { LMap, LTileLayer, LMarker, LIcon } from 'vue2-leaflet';
+import { EsriProvider } from 'leaflet-geosearch';
+import VGeosearch from 'vue2-leaflet-geosearch';
+
+delete L.Icon.Default.prototype._getIconUrl;
+L.Icon.Default.mergeOptions({
+    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
+    iconUrl: require('leaflet/dist/images/marker-icon.png'),
+    shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
+});
+
+export default {
+    components: {
+        LMap,
+        LMarker,
+        LTileLayer,
+        VGeosearch,
+    },
+
+    mixins: [FormField, HandlesValidationErrors],
+
+    props: ['resourceName', 'resourceId', 'field'],
+
+    data: function () {
+        return {
+            url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
+            geosearchOptions: {
+                provider: new EsriProvider(),
+                showMarker: false,
+                style: "bar",
+            },
+            markerOptions: {
+                interactive: false,
+            },
+        };
+    },
+
+    computed: {
+        mapCenter: function () {
+            if (this.value.latitude === undefined) {
+                this.setInitialValue();
+            }
+
+            return [
+                this.value.latitude,
+                this.value.longitude,
+            ];
+        },
+
+        zoom: function () {
+            if (this.value.latitude === undefined) {
+                this.setInitialValue();
+            }
+
+            if (! this.value.latitude) {
+                return 4;
+            }
+
+            return 18;
+        }
+    },
+
+    methods: {
+        fill: function (formData) {
+			formData.append(this.field.latitude, this.value.latitude);
+            formData.append(this.field.longitude, this.value.longitude);
+        },
+
+        handleChange: function (value) {
+            this.value.latitude = value.latitude;
+            this.value.longitude = value.longitude;
+        },
+
+        mapMoved: function (event) {
+            let coordinates = event.target.getCenter();
+
+            this.value.latitude = coordinates.lat;
+            this.value.longitude = coordinates.lng;
+        },
+
+        setInitialValue: function () {
+            this.value = {
+                latitude: this.field.value.latitude || 0,
+                longitude: this.field.value.longitude || 0,
+            };
+        },
+    },
+};
+</script>
+
+<template>
+    <default-field
+        :field="field"
+        :errors="errors"
+        :full-width-content="true"
+    >
+        <template slot="field">
+            <l-map
+                class="z-10 map-field w-full form-control form-input-bordered overflow-hidden relative"
+                ref="map"
+                :center="mapCenter"
+                :options="{}"
+                :zoom="zoom"
+                @move="mapMoved"
+            >
+                <l-tile-layer
+                    :url="url"
+                ></l-tile-layer>
+                <l-marker
+                    :options="markerOptions"
+                    :lat-lng="mapCenter"
+                ></l-marker>
+                <v-geosearch
+                    :options="geosearchOptions"
+                ></v-geosearch>
+            </l-map>
+        </template>
+    </default-field>
+</template>
+
+<style lang="scss" scoped>
+    @import "~leaflet/dist/leaflet.css";
+    @import "~leaflet-geosearch/assets/css/leaflet.css";
+
+    .leaflet-pane {
+        position: relative;
+    }
+
+    .map-field {
+        height: 350px;
+    }
+
+    .leaflet-pane .leaflet-shadow-pane {
+        display: none;
+    }
+</style>

resources/js/components/IndexField.vue

@@ -0,0 +1,41 @@
+<script>
+export default {
+    props: ['resourceName', 'field'],
+
+    computed: {
+        hasLatitude: function () {
+            return (this.field.value.latitude.length > 0);
+        },
+
+        hasLongitude: function () {
+            return (this.field.value.longitude.length > 0);
+        },
+    },
+};
+</script>
+
+<template>
+    <span>
+        <span
+            v-if="hasLatitude"
+            class="location"
+        >
+            <svg aria-hidden="true" width="16" height="16" focusable="false" data-prefix="fas" data-icon="line-height" class="svg-inline--fa fa-line-height fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M626.29 224H269.71c-7.57 0-13.71 7.16-13.71 16v32c0 8.84 6.14 16 13.71 16h356.58c7.57 0 13.71-7.16 13.71-16v-32c0-8.84-6.14-16-13.71-16zm0 160H269.71c-7.57 0-13.71 7.16-13.71 16v32c0 8.84 6.14 16 13.71 16h356.58c7.57 0 13.71-7.16 13.71-16v-32c0-8.84-6.14-16-13.71-16zm0-320H269.71C262.14 64 256 71.16 256 80v32c0 8.84 6.14 16 13.71 16h356.58c7.57 0 13.71-7.16 13.71-16V80c0-8.84-6.14-16-13.71-16zM176 144c14.31 0 21.33-17.31 11.31-27.31l-80-80a16 16 0 0 0-22.62 0l-80 80C-4.64 126 .36 144 16 144h48v224H16c-14.29 0-21.31 17.31-11.29 27.31l80 80a16 16 0 0 0 22.62 0l80-80C196.64 386 191.64 368 176 368h-48V144z"></path></svg>
+            {{ field.value.latitude }}
+        </span>
+        <span
+            v-if="hasLongitude"
+            class="location"
+        >
+            <svg aria-hidden="true" width="16" height="16" focusable="false" data-prefix="fas" data-icon="line-height" class="svg-inline--fa fa-line-height fa-w-20 fa-rotate-270" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M626.29 224H269.71c-7.57 0-13.71 7.16-13.71 16v32c0 8.84 6.14 16 13.71 16h356.58c7.57 0 13.71-7.16 13.71-16v-32c0-8.84-6.14-16-13.71-16zm0 160H269.71c-7.57 0-13.71 7.16-13.71 16v32c0 8.84 6.14 16 13.71 16h356.58c7.57 0 13.71-7.16 13.71-16v-32c0-8.84-6.14-16-13.71-16zm0-320H269.71C262.14 64 256 71.16 256 80v32c0 8.84 6.14 16 13.71 16h356.58c7.57 0 13.71-7.16 13.71-16V80c0-8.84-6.14-16-13.71-16zM176 144c14.31 0 21.33-17.31 11.31-27.31l-80-80a16 16 0 0 0-22.62 0l-80 80C-4.64 126 .36 144 16 144h48v224H16c-14.29 0-21.31 17.31-11.29 27.31l80 80a16 16 0 0 0 22.62 0l80-80C196.64 386 191.64 368 176 368h-48V144z"></path></svg>
+            {{ field.value.longitude }}
+        </span>
+    </span>
+</template>
+
+<style lang="scss" scoped>
+    .location {
+        white-space: nowrap;
+    }
+</style>
+

resources/js/field.js

@@ -0,0 +1,5 @@
+Nova.booting((Vue, router, store) => {
+    Vue.component('index-nova-map-marker-field', require('./components/IndexField').default);
+    Vue.component('detail-nova-map-marker-field', require('./components/DetailField').default);
+    Vue.component('form-nova-map-marker-field', require('./components/FormField').default);
+});