Merge pull request #10 from mostafaznv/dev

use ol-style-icon instead of static centered marker image

Author: mostafaznv

composer.json

@@ -10,6 +10,7 @@
         "multi polygon",
         "spatial",
         "openlayers",
+        "geocoder",
         "nova"
     ],
     "license": "MIT",

dist/css/field.css

@@ -3,7 +3,7 @@
         <template #value>
             <div class="map-detail-field">
                 <template v-if="mapType === 'POINT'">
-                    <point-form-field class="readonly" :field="field" :readonly="true" />
+                    <point-form-field :field="field" :readonly="true" />
                     <point-index-field class="mt-3" :field="field" :modal-mode="true" />
                 </template>
 
@@ -46,11 +46,3 @@ export default {
     }
 }
 </script>
-
-<style lang="scss" scoped>
-.map-detail-field {
-    .readonly {
-        pointer-events: none;
-    }
-}
-</style>

dist/js/field.js

@@ -1,5 +1,5 @@
 <template>
-    <div class="map-container" :class="['marker-icon-' + markerIcon, isDirty ? '' : 'is-not-dirty']">
+    <div class="map-container">
         <ol-map ref="map" @click="setDirty" :load-tiles-while-animating="true" :load-tiles-while-interacting="true" :style="mapStyles">
             <ol-view
                 @centerChanged="setDirty"

resources/js/components/DetailField.vue

@@ -1,19 +1,30 @@
 <template>
-    <div class="map-container with-marker" :class="['marker-icon-' + markerIcon, isDirty ? '' : 'is-not-dirty']">
-        <ol-map ref="map" @click="setDirty" :load-tiles-while-animating="true" :load-tiles-while-interacting="true"
-                :style="mapStyles">
-            <ol-view
-                @centerChanged="onCenterChanged"
-                :center="center"
-                :rotation="rotation"
-                :zoom="zoom"
-                :projection="projection"
-            />
+    <div class="map-container">
+        <ol-map ref="map" :load-tiles-while-animating="true" :load-tiles-while-interacting="true" :style="mapStyles">
+            <ol-view :center="center" :rotation="rotation" :zoom="zoom" :projection="projection" />
 
             <ol-tile-layer>
                 <ol-source-osm />
             </ol-tile-layer>
 
+            <ol-vector-layer>
+                <ol-source-vector :projection="projection">
+                    <ol-feature v-if="hasInitValue">
+                        <ol-geom-point :coordinates="[initValue.longitude, initValue.latitude]" />
+                    </ol-feature>
+
+                    <template v-if="!isReadonly">
+                        <ol-interaction-modify v-if="isDirty" @modifyend="onModifyEnd" />
+                        <ol-interaction-draw v-else type="Point" @drawend="onDrawEnd" />
+                    </template>
+                </ol-source-vector>
+
+                <ol-style>
+                    <ol-style-icon :src="markerIcon" :anchor="[0.5, 1]" :scale="0.1" />
+                </ol-style>
+            </ol-vector-layer>
+
+
             <ol-zoom-control v-if="withZoomControl" />
             <ol-zoomslider-control v-if="withZoomSlider" />
             <ol-fullscreen-control v-if="withFullScreenControl" />
@@ -33,6 +44,10 @@ export default {
     data() {
         return {
             isDirty: false,
+            initValue: {
+                longitude: null,
+                latitude: null
+            },
             fieldValue: {
                 longitude: null,
                 latitude: null
@@ -42,6 +57,10 @@ export default {
     computed: {
         isReadonly() {
             return this.readonly === true
+        },
+
+        hasInitValue() {
+            return this.initValue.latitude && this.initValue.longitude
         }
     },
     methods: {
@@ -59,6 +78,10 @@ export default {
                 ])
 
                 this.center = lonLat
+                this.initValue = {
+                    longitude: lonLat[0],
+                    latitude: lonLat[1]
+                }
 
                 this.setValue(lonLat[1], lonLat[0])
             }
@@ -70,8 +93,20 @@ export default {
             }
         },
 
-        onCenterChanged(center) {
-            this.setValue(center[1], center[0])
+        onDrawEnd(evt) {
+            const coordinate = evt.feature?.getGeometry().getCoordinates()
+
+            if (Array.isArray(coordinate)) {
+                this.setValue(coordinate[1], coordinate[0])
+            }
+        },
+
+        onModifyEnd(evt) {
+            const coordinate = evt.features?.getArray()[0].getGeometry().getCoordinates()
+
+            if (Array.isArray(coordinate)) {
+                this.setValue(coordinate[1], coordinate[0])
+            }
         },
 
         setDirty() {

resources/js/components/form-fields/MultiPolygonFormField.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="map-container" :class="['marker-icon-' + markerIcon, isDirty ? '' : 'is-not-dirty']">
+    <div class="map-container">
         <ol-map ref="map" @click="setDirty" :load-tiles-while-animating="true" :load-tiles-while-interacting="true" :style="mapStyles">
             <ol-view
                 @centerChanged="setDirty"

resources/js/components/form-fields/PointFormField.vue

@@ -4,38 +4,6 @@
 .map-container {
     position: relative;
 
-    &.is-not-dirty {
-        filter: grayscale(1);
-    }
-
-    &.with-marker {
-        transition: all 300ms;
-
-        &:before {
-            position: absolute;
-            content: '';
-            width: 46px;
-            height: 46px;
-            top: calc(50% - 46px);
-            left: calc(50% - 23px);
-            background: url('/vendor/nova-map-field/dist/images/ic-pin-1.png') center;
-            background-size: cover !important;
-            z-index: 10;
-        }
-
-        &.marker-icon-2 {
-            &:before {
-                background-image: url('/vendor/nova-map-field/dist/images/ic-pin-2.png');
-            }
-        }
-
-        &.marker-icon-3 {
-            &:before {
-                background-image: url('/vendor/nova-map-field/dist/images/ic-pin-3.png');
-            }
-        }
-    }
-
     .ol-overlaycontainer-stopevent {
         z-index: 15 !important;
     }

resources/js/components/form-fields/PolygonFormField.vue

@@ -16,6 +16,15 @@ class MapPointField extends Field
 
     private string $mapType = 'POINT';
 
+    public function markerIcon(int $icon): self
+    {
+        if (in_array($icon, [1, 2, 3])) {
+            $this->markerIcon = url($this->markerIconPath . "ic-pin-{$icon}.png");
+        }
+
+        return $this;
+    }
+
     protected function fillAttributeFromRequest(NovaRequest $request, $requestAttribute, $model, $attribute)
     {
         if ($request->exists($requestAttribute)) {

resources/scss/field.scss

@@ -17,7 +17,11 @@ trait WithMapProps
 
     private int $mapHeight;
 
-    private int $markerIcon;
+    /**
+     * @readonly
+     */
+    private string $markerIconPath = '/vendor/nova-map-field/dist/images/';
+    private string $markerIcon;
 
     private bool              $showSearchBox;
     private MapSearchProvider $searchProvider;
@@ -50,7 +54,7 @@ public function __construct($name, $attribute = null, callable $resolveCallback
         $this->withZoomSlider = $config['controls']['zoom-slider'];
         $this->withFullScreenControl = $config['controls']['full-screen-control'];
         $this->mapHeight = $config['map-height'];
-        $this->markerIcon = $config['icon'];
+        $this->markerIcon = url($this->markerIconPath . "ic-pin-{$config['icon']}.png");
 
         $this->showSearchBox = $searchConfig['enable'];
         $this->searchProvider = $searchConfig['provider'];
@@ -115,15 +119,6 @@ public function mapHeight(int $height): self
         return $this;
     }
 
-    public function markerIcon(int $icon): self
-    {
-        if (in_array($icon, [1, 2, 3])) {
-            $this->markerIcon = $icon;
-        }
-
-        return $this;
-    }
-
     public function withSearchBox(bool $status = true): self
     {
         $this->showSearchBox = $status;