Multiple Fixes: Default height, ability to change zoom and vue2-leaflet upgrade

package.json

@@ -16,6 +16,6 @@
     },
     "dependencies": {
         "vue": "^2.5.0",
-        "vue2-leaflet": "^1.0.2"
+        "vue2-leaflet": "^1.2.0"
     }
 }

resources/js/components/DetailField.vue

@@ -9,8 +9,9 @@
         </div>
         <div class="w-3/4 py-4">
             <div class="rounded flex flex-col" :style="'height: ' + field.height">
-                <map-detail 
-                    :type="field.spatialType" 
+                <map-detail
+                    :type="field.spatialType"
+                    :zoom="field.zoom"
                     :value="field.value"
                     :latitude_field="field.latitude_field"
                     :longitude_field="field.longitude_field"

resources/js/components/MapDetail.vue

@@ -1,127 +1,127 @@
 <template>
-    <l-map 
-        class="w-full h-full rounded z-10" 
-        ref="map" 
-        :zoom="zoom" 
-        :center="center" 
-        :bounds="bounds" 
-        :options="mapOptions"
+    <l-map
+            class="w-full h-full rounded z-10"
+            ref="map"
+            :zoom="zoom"
+            :center="center"
+            :bounds="bounds"
+            :options="mapOptions"
     >
-        <l-tile-layer 
-            v-for="tileProvider in tileProviders"
-            layerType="base" 
-            :name="tileProvider.name" 
-            :visible="tileProvider.visible"
-            :url="tileProvider.url" 
-            :attribution="tileProvider.attribution" 
-            :key="tileProvider.name"
-            />
+        <l-tile-layer
+                v-for="tileProvider in tileProviders"
+                layerType="base"
+                :name="tileProvider.name"
+                :visible="tileProvider.visible"
+                :url="tileProvider.url"
+                :attribution="tileProvider.attribution"
+                :key="tileProvider.name"
+        />
 
-            <l-geo-json
-            ref="geojsonLayer"
-            :geojson="geojson" 
-            :options="options"
-            ></l-geo-json>
+        <l-geo-json
+                ref="geojsonLayer"
+                :geojson="geojson"
+                :options="options"
+        ></l-geo-json>
 
     </l-map>
 </template>
 
 <script>
-import {LMap, LTileLayer, LGeoJson} from 'vue2-leaflet'
+    import {LMap, LTileLayer, LGeoJson} from 'vue2-leaflet'
 
-export default {
-    props: {
-        type: String, 
-        value: {
-            default: null
+    export default {
+        props: {
+            type: String,
+            value: {
+                default: null
+            },
+            edit: {
+                type: Boolean,
+                default: false
+            },
+            latitude_field: String,
+            longitude_field: String,
+            geojson_field: String,
+            zoom: Number,
         },
-        edit: {
-            type: Boolean,
-            default: false
+        components: {
+            LMap,
+            LTileLayer,
+            LGeoJson,
         },
-        latitude_field: String,
-        longitude_field: String,
-        geojson_field: String,
-    },
-    components: {
-        LMap,
-        LTileLayer,
-        LGeoJson,
-    },
-    data() {
-        return {
-            map: null,
-            geojsonLayer: null,
-            center: [0, 0],
-            bounds: null,
-            zoom: 8,
-            tileProviders:[{
-                name: 'OpenStreetMap',
-                visible: true,
-                attribution: '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
-                url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
-            }],
-            options: {
-                style: function () {
-                    return {
-                        weight: 2,
-                        color: 'blue',
-                        opacity: 0.8,
-                        fillColor: 'blue',
-                        fillOpacity: 0.3
-                    }
-                },
-                pointToLayer: function (feature, latlng) {
-                    let base64img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII="
+        data() {
+            return {
+                map: null,
+                geojsonLayer: null,
+                center: [0, 0],
+                bounds: null,
+                tileProviders: [{
+                    name: 'OpenStreetMap',
+                    visible: true,
+                    attribution: '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+                    url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+                }],
+                options: {
+                    style: function () {
+                        return {
+                            weight: 2,
+                            color: 'blue',
+                            opacity: 0.8,
+                            fillColor: 'blue',
+                            fillOpacity: 0.3
+                        }
+                    },
+                    pointToLayer: function (feature, latlng) {
+                        let base64img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII="
 
-                    let icon = L.icon({
-                        iconUrl: base64img,
-                        iconSize: [25, 41],
-                        iconAnchor: [13, 40],
-                    })
+                        let icon = L.icon({
+                            iconUrl: base64img,
+                            iconSize: [25, 41],
+                            iconAnchor: [13, 40],
+                        })
 
-                    return L.marker(latlng).setIcon(icon)
-                }
-            },
-            mapOptions: {
-            },
-        }
-    },
-    computed: {
-        geojson(){
-            if(this.type == "LatLon" || this.type == "LatLonField"){
-                return {
-                    type: 'Point',
-                    coordinates: [
-                        this.value.lon,
-                        this.value.lat,
-                    ]
+                        return L.marker(latlng).setIcon(icon)
+                    }
+                },
+                mapOptions: {},
+            }
+        },
+        computed: {
+            geojson() {
+                if (this.type == "LatLon" || this.type == "LatLonField") {
+                    return {
+                        type: 'Point',
+                        coordinates: [
+                            this.value.lon,
+                            this.value.lat,
+                        ]
+                    }
+                } else if (this.type == "GeoJSON") {
+                    return JSON.parse(this.value)
+                } else {
+                    return this.value
                 }
-            }else if(this.type == "GeoJSON"){
-                return JSON.parse(this.value)
-            }else{
-                return this.value
             }
-        }
-    },
-    mounted() {
-        this.$nextTick(() => {
-            this.map = this.$refs.map.mapObject
+        },
+        mounted() {
+            this.$nextTick(() => {
+                this.map = this.$refs.map.mapObject
 
-            this.geojsonLayer = this.$refs.geojsonLayer.mapObject
+                this.geojsonLayer = this.$refs.geojsonLayer.mapObject
 
-            this.setCenter()
-        })
+                this.setCenter()
+
+            })
 
-    },
-    methods: {
-        setCenter(){
-            if(this.geojson !== null){
-                this.map.fitBounds(L.geoJSON(this.geojson).getBounds(),{maxZoom:12})
-            }
         },
+        methods: {
+            setCenter() {
+                if (this.geojson !== null) {
+                    this.map.fitBounds(L.geoJSON(this.geojson).getBounds(), {maxZoom: 18}).setZoom(this.zoom)
+                }
+            },
+        }
     }
-}
 </script>
 
 <style scoped>

src/Map.php

@@ -14,12 +14,36 @@ class Map extends Field
 
     public $showOnIndex = false;
 
-    public function height($height = '300px'){
-        return $this->withMeta([
-            'height' => $height
+    public $height = '300px';
+
+    public $zoom = 8;
+
+    public function __construct($name, $attribute = null, $resolveCallback = null)
+    {
+        parent::__construct($name, $attribute, $resolveCallback);
+
+        $this->withMeta([
+            'height' => $this->height,
+            'zoom' => $this->zoom,
         ]);
     }
 
+    public function height($height){
+        if($height) {
+            return $this->withMeta([
+                'height' => $height
+            ]);
+        }
+    }
+
+    public function zoom($zoom){
+        if($zoom) {
+            return $this->withMeta([
+                'zoom' => $zoom
+            ]);
+        }
+    }
+
     public function spatialType($type){
         return $this->withMeta([
             'spatialType' => $type
@@ -36,7 +60,7 @@ public function latitude($latitude_field){
 
     public function longitude($longitude_field){
         $this->attribute = null;
-        
+
         return $this->withMeta([
             'longitude_field' => $longitude_field
         ]);
@@ -57,7 +81,7 @@ public function resolveAttribute($resource, $attribute = null){
                     'lat' => $resource->{$this->meta['latitude_field']},
                     'lon' => $resource->{$this->meta['longitude_field']},
                 ];
-            break;
+                break;
             case 'LatLonField':
                 $parts = collect(explode(',',$resource->{$attribute}))->map(function($item){
                     return trim($item);
@@ -67,13 +91,13 @@ public function resolveAttribute($resource, $attribute = null){
                     'lat' => $parts[0],
                     'lon' => $parts[1],
                 ];
-            break;
+                break;
             case 'GeoJSON':
                 return $resource->{$attribute};
-            break;
+                break;
             default:
                 return $resource->{$attribute};
-            break;
+                break;
         }
     }