nova-map-fields/resources/js/components/FieldMap.vue

<template>
    <div :style="{ height: field.map.height }">
        <l-map
            style="z-index: 0"
            :zoom="field.map.zoom"
            :center="center"
            :bounds="bounds"
            @click="onMapClick"
        >
            <l-tile-layer :url="url" :attribution="attribution" />
            <slot></slot>
        </l-map>
    </div>
</template>

<script>
import { LMap, LTileLayer } from "vue2-leaflet";

export default {
    props: {
        field: {
            type: Object,
            requred: true,
        },
        center: {
            type: Object,
            default: null,
        },
        bounds: {
            type: Object,
            default: null,
        },
    },

    data() {
        return {
            attribution:
                '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
            url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        };
    },

    methods: {
        onMapClick(evt) {
            this.$emit("click", evt);
        },
    },

    components: {
        LMap,
        LTileLayer,
    },
};
</script>

<style scoped>
@import "../../../node_modules/leaflet/dist/leaflet.css";
</style>