Work on implementation.

src/GeocodeWidget.php

@@ -94,6 +94,7 @@ class GeocodeWidget extends \Widget
                 'id'         => $this->strId,
                 'attributes' => $this->getAttributes(),
                 'wizard'     => $this->wizard,
+                'label'      => $this->strLabel
             ]
         );
 

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

@@ -9,3 +9,5 @@
  */
 
 $GLOBALS['TL_LANG']['ERR']['leaflet_invalid_coordinate'] = 'Die angegebenen Koordinaten sind ungültig.';
+$GLOBALS['TL_LANG']['MSC']['leafletSearchPositionLabel'] = 'Suchen';
+$GLOBALS['TL_LANG']['MSC']['leafletApplyPositionLabel']  = 'Übernehmen';

src/Resources/contao/templates/be_widget_leaflet_geocode.html5

@@ -5,6 +5,7 @@ $GLOBALS['TL_CSS'][] = 'assets/leaflet/libs/control-geocoder/Control.Geocoder.cs
 
 $GLOBALS['TL_JAVASCRIPT'][] = 'assets/leaflet/libs/leaflet/leaflet.js';
 $GLOBALS['TL_JAVASCRIPT'][] = 'assets/leaflet/libs/control-geocoder/Control.Geocoder.js';
+$GLOBALS['TL_JAVASCRIPT'][] = 'bundles/leafletgeocodewidget/js/geocode.widget.js';
 
 ?>
 
@@ -16,64 +17,14 @@ $GLOBALS['TL_JAVASCRIPT'][] = 'assets/leaflet/libs/control-geocoder/Control.Geoc
        onfocus="Backend.getScrollOffset()"
 >
 
-<div id="map_<?php echo $this->name; ?>" style="margin-top: 5px; width: calc(100% - 28px); height: 300px"></div>
+<img src="bundles/leafletgeocodewidget/img/map.png" id="ctrl_<?= $this->id ?>_toggle">
-<script>
-    var map = L.map('map_<?php echo $this->name; ?>').setView([0, 0], 2);
-    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
-        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-    }).addTo(map);
-    var element  = $('<?php echo $this->name; ?>');
-    var geocoder = L.Control.geocoder({
-        defaultMarkGeocode: false,
-        collapsed: false,
-        placeholder: '<?php echo $GLOBALS['TL_LANG']['leaflet']['searchPosition']; ?>'
-    }).addTo(map);
-
-    geocoder.on('markgeocode', function(event) {
-        var container = document.createElement('div');
-        var link      = document.createElement('button');
-        var result    = event.geocode;
-
-        link.set('style', 'margin-left: 10px;');
-        link.appendText('<?php echo $GLOBALS['TL_LANG']['leaflet']['applyPosition']; ?>');
-        link.addEvent('click', function(e) {
-            e.stop();
-
-            element.set('value', result.center.lat + ',' + result.center.lng);
-        });
-
-        container.appendHTML(result.html || result.name);
-        container.appendChild(link);
-
-        if (this._geocodeMarker) {
-            map.removeLayer(this._geocodeMarker);
-        }
-
-        map.fitBounds(result.bbox, { padding: [0, 70]});
-        map.panTo(result.center);
-
-        this._geocodeMarker = new L.Marker(result.center, {draggable: true})
-            .bindPopup(container, {
-                keepInView: true,
-                autoPanPaddingTopLeft: [0, 70]
-            })
-            .addTo(map)
-            .openPopup();
-
-        this._geocodeMarker.on('dragend', function (event) {
-            element.set('value', event.target._latlng.lat + ',' + event.target._latlng.lng);
-        });
-    });
-
-    <?php if ($this->marker): ?>
-    geocoder._geocodeMarker = L.marker(<?php echo $this->marker; ?>, {draggable: true}).addTo(map);
-    geocoder._geocodeMarker.on('dragend', function (event) {
-        element.set('value', event.target._latlng.lat + ',' + event.target._latlng.lng);
-    });
-    map.setZoom(16);
-    map.panTo(<?php echo $this->marker; ?>);
-    <?php endif; ?>
-
-</script>
 
 <?= $this->wizard ?>
+<script>
+    new LeafletGeocodeWidget({
+        id: 'ctrl_<?= $this->id ?>',
+        searchPositionLabel: '<?= $GLOBALS['TL_LANG']['MSC']['leafletSearchPositionLabel'] ?>',
+        applyPositionLabel: '<?= $GLOBALS['TL_LANG']['MSC']['leafletApplyPositionLabel'] ?>',
+        modalTitle: '<?= $this->label ?>'
+    })
+</script>

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

@@ -0,0 +1,101 @@
+var LeafletGeocodeWidget = L.Class.extend({
+    options: {
+        mapTemplate: '<div id="leaflet_geocode_widget_map_{id}" class="" style="width 100%; height: 50vh; min-height: 400px"></div>',
+        modalWidth: 800,
+        modalTitle: 'Choose coordinates',
+        searchPositionLabel: 'Search',
+        applyPositionLabel: 'Apply'
+    },
+    initialize: function (options) {
+        L.Util.setOptions(this, options);
+
+        this.element = $(this.options.id);
+        this.toggle  = $(this.options.id + '_toggle');
+        this.toggle.addEvent('click', this._showMap.bind(this));
+    },
+    _showMap: function () {
+        var content, modal;
+
+        // Create modal window.
+        content = L.Util.template(this.options.mapTemplate, this.options);
+        modal   = this._createModal();
+
+        modal.show({'title': this.options.modalTitle, 'contents': content});
+
+        // Initialize map after showing modal so element exists.
+        this._createMap(modal);
+    },
+    _createModal: function () {
+        return new SimpleModal({
+            'width': this.options.modalWidth,
+            'hideFooter': true,
+            'draggable': false,
+            'overlayOpacity': .5,
+            'onShow': function() { document.body.setStyle('overflow', 'hidden'); },
+            'onHide': function() { document.body.setStyle('overflow', 'auto'); }
+        });
+    },
+    _createMap: function (modal) {
+        var map = L.map('leaflet_geocode_widget_map_' + this.options.id).setView([0, 0], 2);
+
+        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+        }).addTo(map);
+
+        var geoCoder = L.Control.geocoder({
+            defaultMarkGeocode: false,
+            collapsed: false,
+            placeholder: this.options.searchPositionLabel
+        }).addTo(map);
+
+        geoCoder.on('markgeocode', function (event) {
+            this._handleGeoCode.call(this, modal, map, event);
+        }.bind(this));
+
+        if (this.element.value) {
+            var value = this.element.value.split(/,/);
+            this._createMarker(value, map);
+
+            map.setZoom(16);
+            map.panTo(value);
+        }
+
+        return map;
+    },
+    _handleGeoCode: function (modal, map, event) {
+        var container = document.createElement('div');
+        var link      = document.createElement('button');
+        var result    = event.geocode;
+
+        link.set('style', 'margin-left: 10px;');
+        link.appendText(this.options.applyPositionLabel);
+        link.addEvent('click', function(e) {
+            e.stop();
+
+            this.element.set('value', result.center.lat + ',' + result.center.lng);
+            modal.hide();
+        }.bind(this));
+
+        container.appendHTML(result.html || result.name);
+        container.appendChild(link);
+
+        if (this._geocodeMarker) {
+            map.removeLayer(this._geocodeMarker);
+        }
+
+        map.fitBounds(result.bbox, { padding: [0, 70]});
+        map.panTo(result.center);
+
+        this._createMarker(result.center, map);
+        this._geocodeMarker.bindPopup(container, {
+            keepInView: true,
+            autoPanPaddingTopLeft: [0, 70]
+        }).openPopup();
+    },
+    _createMarker: function (position, map) {
+        this._geocodeMarker = L.marker(position, {draggable: true}).addTo(map);
+        this._geocodeMarker.on('dragend', function (event) {
+            this.element.set('value', event.target._latlng.lat + ',' + event.target._latlng.lng);
+        }.bind(this));
+    }
+});