Add a dblclick option. Closes #43

sylvainjule · Nov 24, 2021 · 73553ec · 73553ec
1 parent ccd4966
commit 73553ec
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -264,14 +264,24 @@ mymap:
 
 #### 5.10. `language`
 
-If this options is set with an [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) (en, fr, de, etc.), the geocoding service will return results in the requested language if available. Default is `false`.
+If this option is set with an [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) (en, fr, de, etc.), the geocoding service will return results in the requested language if available. Default is `false`.
 
 ```yaml
 mymap:
   type: locator
   language: false # or 'de' | 'fr' | 'en' | …
 ```
 
+#### 5.11. `dblclick`
+
+Whether a double click on the map should trigger a zoom (`zoom`) or add a marker / move the existing marker to the coordinates of the click event (`marker`). Default is `zoom`.
+
+```yaml
+mymap:
+  type: locator
+  dblclick: zoom # or 'marker'
+```
+
 <br/>
 
 ## 6. Global options
@@ -293,6 +303,7 @@ return array(
     'sylvainjule.locator.liststyle'    => 'columns',
     'sylvainjule.locator.marker'       => 'dark',
     'sylvainjule.locator.language'     => false,
+    'sylvainjule.locator.dblclick'     => 'zoom',
 );
 ```
 

diff --git a/index.js b/index.js
diff --git a/index.php b/index.php
@@ -19,6 +19,7 @@
         'saveZoom'     => false,
         'autoSaveZoom' => false,
         'language'     => false,
+        'dblclick'     => 'zoom',
 	),
 	'fields'       => require_once __DIR__ . '/lib/fields.php',
 	'fieldMethods' => require_once __DIR__ . '/lib/fieldMethods.php',

diff --git a/lib/fields.php b/lib/fields.php
@@ -39,6 +39,9 @@
             'language' => function($language = null) {
                 return $language ?? option('sylvainjule.locator.language');
             },
+            'dblclick' => function($dblclick = null) {
+                return $dblclick ?? option('sylvainjule.locator.dblclick');
+            },
             'center' => function($center = []) {
             	return array(
             		'lat'     => $center['lat'] ?? option('sylvainjule.locator.center.lat'),

diff --git a/src/field/Locator.vue b/src/field/Locator.vue
@@ -85,6 +85,7 @@ export default {
         draggable:    Boolean,
         autocomplete: Boolean,
         language:     [String, Boolean],
+        dblclick:     String,
 
         // general options
         label:     String,
@@ -231,7 +232,11 @@ export default {
         initMap() {
             // init map
             let zoom = this.value ? this.value.zoom || this.defaultZoom : this.defaultZoom
-            this.map = L.map(this.mapId, {minZoom: this.zoom.min, maxZoom: this.zoom.max}).setView(this.defaultCoords, zoom)
+
+            this.map = L.map(this.mapId, {
+                minZoom: this.zoom.min,
+                maxZoom: this.zoom.max,
+            }).setView(this.defaultCoords, zoom)
 
             // set the tile layer
             this.tileLayer = L.tileLayer(this.tileUrl, {attribution: this.attribution})
@@ -254,6 +259,13 @@ export default {
                     }, 500)
                 });
             }
+
+            if(this.dblclick == 'marker') {
+                this.map.doubleClickZoom.disable()
+                this.map.on('dblclick', (e) => {
+                    this.setCoordinates(e.latlng.lat + ',' + e.latlng.lng)
+                })
+            }
         },
         updateMap() {
             if(this.map) {
@@ -376,9 +388,10 @@ export default {
             return regexExp.test(str);
         },
         setCoordinates(str) {
-            let arr = str.split(',')
-            let lat = arr[0].replace(' ', '')
-            let lon = arr[1].replace(' ', '')
+            let arr   = str.split(',')
+            let lat   = arr[0].replace(' ', '')
+            let lon   = arr[1].replace(' ', '')
+            let _this = this
 
             this.value = {
                 'lat': parseFloat(lat),
@@ -401,6 +414,10 @@ export default {
 
             this.location = ''
             this.$emit("input", this.value)
+            this.dragged = true
+            setTimeout(() => {
+                _this.dragged = false
+            }, 500)
         },
         setNominatimResponse(response) {
             response = response[0]
@@ -463,7 +480,7 @@ export default {
                 this.map.scrollWheelZoom.enable()
                 this.map.dragging.enable()
                 this.map.touchZoom.enable()
-                this.map.doubleClickZoom.enable()
+                if(this.dblclick != 'marker') this.map.doubleClickZoom.enable()
                 this.map.boxZoom.enable()
                 this.map.keyboard.enable()
                 if (this.map.tap) this.map.tap.enable()