Add feature to pick a new location by clicking on the map.

src/Resources/contao/languages/de/default.php

@@ -13,3 +13,6 @@
 $GLOBALS['TL_LANG']['ERR']['leafletInvalidCoordinate']   = 'Die angegebenen Koordinaten sind ungültig.';
 $GLOBALS['TL_LANG']['MSC']['leafletSearchPositionLabel'] = 'Suchen';
 $GLOBALS['TL_LANG']['MSC']['leafletApplyPositionLabel']  = 'Übernehmen';
+$GLOBALS['TL_LANG']['MSC']['leafletConfirmPositionLabel'] = 'Als neue Position übernehmen?';
+$GLOBALS['TL_LANG']['MSC']['leafletOkLabel']              = 'Ja';
+$GLOBALS['TL_LANG']['MSC']['leafletCancelLabel']          = 'Nein';

src/Resources/contao/languages/en/default.php

@@ -13,3 +13,6 @@
 $GLOBALS['TL_LANG']['ERR']['leafletInvalidCoordinate']    = 'Invalid coordinates given.';
 $GLOBALS['TL_LANG']['MSC']['leafletSearchPositionLabel']  = 'Search';
 $GLOBALS['TL_LANG']['MSC']['leafletApplyPositionLabel']   = 'Apply';
+$GLOBALS['TL_LANG']['MSC']['leafletConfirmPositionLabel'] = 'Set as new position';
+$GLOBALS['TL_LANG']['MSC']['leafletOkLabel']              = 'Ok';
+$GLOBALS['TL_LANG']['MSC']['leafletCancelLabel']          = 'Cancel';

src/Resources/contao/templates/be_widget_leaflet_geocode.html5

@@ -37,6 +37,9 @@ $GLOBALS['TL_JAVASCRIPT'][] = 'bundles/leafletgeocodewidget/js/geocode.widget.js
                 id: 'ctrl_<?= $this->id ?>',
                 searchPositionLabel: '<?= $GLOBALS['TL_LANG']['MSC']['leafletSearchPositionLabel'] ?>',
                 applyPositionLabel: '<?= $GLOBALS['TL_LANG']['MSC']['leafletApplyPositionLabel'] ?>',
+                confirmPositionLabel: '<?= $GLOBALS['TL_LANG']['MSC']['leafletConfirmPositionLabel'] ?>',
+                okLabel: '<?= $GLOBALS['TL_LANG']['MSC']['leafletOkLabel'] ?>',
+                cancelLabel: '<?= $GLOBALS['TL_LANG']['MSC']['leafletCancelLabel'] ?>',
                 modalTitle: '<?= $this->label ?>'<?php if ($this->radius): ?>,
                 radius: <?= json_encode($this->radius) ?>,
                 picker: LeafletGeocodeCirclePicker

src/Resources/public/css/backend.css

@@ -9,9 +9,9 @@
     min-height: 400px
 }
 
-.leaflet-submit-btn {
+.leaflet-geocode-btn {
     margin-top: 10px;
-    display: block;
+    display: inline-block;
     padding: 7px 12px;
     border: 1px solid #aaa;
     border-radius: 2px;
@@ -20,3 +20,7 @@
     background: #eee;
     transition: background .2s ease;
 }
+
+.leaflet-geocode-btn + .leaflet-geocode-btn {
+    margin-left: 5px;
+}

src/Resources/public/js/geocode.widget.js

@@ -124,6 +124,9 @@ var LeafletGeocodeWidget = L.Class.extend({
         modalTitle: 'Choose coordinates',
         searchPositionLabel: 'Search',
         applyPositionLabel: 'Apply',
+        confirmPositionLabel: 'Set as new position',
+        okLabel: 'Ok',
+        cancelLabel: 'Cancel',
         radius: null,
         picker: LeafletGeocodeMarkerPicker,
         map: {
@@ -194,6 +197,38 @@ var LeafletGeocodeWidget = L.Class.extend({
             attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
         }).addTo(map);
 
+        map.on('click', function (event) {
+            var marker       = new L.marker(event.latlng).addTo(map);
+            var container    = document.createElement('div');
+            var okButton     = document.createElement('button');
+            var cancelButton = document.createElement('button');
+
+            okButton.set('class', 'leaflet-geocode-btn').appendHTML(this.options.okLabel);
+            okButton.addEvent('click', function (event) {
+                event.stop();
+
+                this.picker.show(marker.getLatLng());
+                map.removeLayer(marker);
+            }.bind(this));
+
+            cancelButton.set('class', 'leaflet-geocode-btn').appendHTML(this.options.cancelLabel);
+            cancelButton.addEvent('click', function (event) {
+                map.removeLayer(marker);
+            });
+
+            container.appendHTML('<h2>' + this.options.confirmPositionLabel + '</h2>');
+            container.appendChild(okButton);
+            container.appendChild(cancelButton);
+
+            marker.bindPopup (container, {
+                keepInView: true,
+                autoPanPaddingTopLeft: this.options.bboxPadding,
+                autoClose: false,
+                closeOnClick: false,
+                closeButton: false
+            }).openPopup();
+        }.bind(this));
+
         var geoCoder = L.Control.geocoder({
             defaultMarkGeocode: false,
             collapsed: false,