Work on implementation.

2025-12-04 06:28:32 +01:00 · 2017-01-18 17:16:40 +01:00
parent 5086041111
commit 9880307f6d
5 changed files with 115 additions and 60 deletions
--- a/src/Resources/public/js/geocode.widget.js
+++ b/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));
+    }
+});