mirror of
https://github.com/netzmacht/contao-leaflet-geocode-widget.git
synced 2025-12-02 13:43:40 +01:00
Refactor geocode widget and add support for default, min, max value of the radius.
This commit is contained in:
David Molineus
@@ -38,7 +38,9 @@ $GLOBALS['TL_JAVASCRIPT'][] = 'bundles/leafletgeocodewidget/js/geocode.widget.js
|
||||
searchPositionLabel: '<?= $GLOBALS['TL_LANG']['MSC']['leafletSearchPositionLabel'] ?>',
|
||||
applyPositionLabel: '<?= $GLOBALS['TL_LANG']['MSC']['leafletApplyPositionLabel'] ?>',
|
||||
modalTitle: '<?= $this->label ?>'<?php if ($this->radius): ?>,
|
||||
radius: 'ctrl_<?= $this->radius ?>'<?php endif ?>
|
||||
radius: <?= json_encode($this->radius) ?>,
|
||||
picker: LeafletGeocodeCirclePicker
|
||||
<?php endif ?>
|
||||
})
|
||||
}
|
||||
);
|
||||
|
||||
@@ -3,6 +3,12 @@
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.leaflet-geocode-map {
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
min-height: 400px
|
||||
}
|
||||
|
||||
.leaflet-submit-btn {
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
|
||||
@@ -8,155 +8,96 @@
|
||||
* @filesource
|
||||
*/
|
||||
|
||||
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',
|
||||
radius: null,
|
||||
mapOptions: {
|
||||
maxZoom: 15,
|
||||
minZoom: 2
|
||||
},
|
||||
bboxPadding: [0, 70]
|
||||
},
|
||||
initialize: function (options) {
|
||||
var LeafletGeocodeAbstractPicker = L.Class.extend({
|
||||
initialize: function (map, 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));
|
||||
|
||||
if (this.options.radius) {
|
||||
this.radius = $(this.options.radius);
|
||||
}
|
||||
this.map = map;
|
||||
},
|
||||
_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, this.options.mapOptions).setView([0, 0], 2);
|
||||
|
||||
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <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);
|
||||
|
||||
if (this.radius) {
|
||||
map.fitBounds(this._geocodeMarker.getBounds());
|
||||
} else {
|
||||
map.setZoom(this.options.mapOptions.maxZoom);
|
||||
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('class', 'leaflet-submit-btn');
|
||||
link.appendText(this.options.applyPositionLabel);
|
||||
link.addEvent('click', function (e) {
|
||||
e.stop();
|
||||
|
||||
this._updateInputs(result.center);
|
||||
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: this.options.bboxPadding});
|
||||
map.panTo(result.center);
|
||||
|
||||
this._createMarker(result.center, map);
|
||||
|
||||
if (!this.radius) {
|
||||
this._geocodeMarker.bindPopup(container, {
|
||||
keepInView: true,
|
||||
autoClose: false,
|
||||
closeOnClick: false,
|
||||
autoPanPaddingTopLeft: this.options.bboxPadding
|
||||
}).openPopup();
|
||||
}
|
||||
},
|
||||
_createMarker: function (position, map) {
|
||||
if (this.radius) {
|
||||
this._geocodeMarker = L.circle(position, { radius: this.radius.get('value') });
|
||||
this._geocodeMarker.addTo(map);
|
||||
map.fitBounds(this._geocodeMarker.getBounds());
|
||||
|
||||
this._geocodeMarker.on('pm:markerdragend', function (event) {
|
||||
var radius = Math.floor(this._geocodeMarker.getRadius());
|
||||
|
||||
this._updateInputs(event.target._latlng, radius);
|
||||
this._geocodeMarker.pm._outerMarker.setTooltipContent(this._formatRadius(radius));
|
||||
map.fitBounds(this._geocodeMarker.getBounds());
|
||||
}.bind(this));
|
||||
this._geocodeMarker.pm.enable({dragable: false});
|
||||
|
||||
this._geocodeMarker.pm._outerMarker.bindTooltip(
|
||||
this._formatRadius(this._geocodeMarker.getRadius()),
|
||||
{permanent: true, direction: 'right', offset: [10, 0] }
|
||||
);
|
||||
show: function (position) {
|
||||
if (!this.marker) {
|
||||
this._createMarker(position);
|
||||
} else {
|
||||
this._geocodeMarker = L.marker(position, {draggable: true}).addTo(map);
|
||||
this._geocodeMarker.on('dragend', function (event) {
|
||||
this._updateInputs(event.target._latlng);
|
||||
}.bind(this));
|
||||
this._updateCoordinates(position);
|
||||
}
|
||||
},
|
||||
_updateInputs: function (coordinates, radius) {
|
||||
this.element.set('value', coordinates.lat + ',' + coordinates.lng);
|
||||
|
||||
if (this.radius && typeof(radius) !== 'undefined') {
|
||||
this.radius.set('value', radius);
|
||||
}
|
||||
this._panTo(position);
|
||||
},
|
||||
_updateCoordinates: function (position) {
|
||||
this.marker.setLatLng(position);
|
||||
}
|
||||
});
|
||||
|
||||
var LeafletGeocodeMarkerPicker = LeafletGeocodeAbstractPicker.extend({
|
||||
apply: function (coordinatesInput) {
|
||||
var coordinates = this.marker
|
||||
? ( this.marker.getLatLng().lat + ',' + this.marker.getLatLng().lng)
|
||||
: '';
|
||||
|
||||
coordinatesInput.set('value', coordinates);
|
||||
},
|
||||
_panTo: function (position) {
|
||||
this.map.setZoom(this.map.getMaxZoom());
|
||||
this.map.panTo(position);
|
||||
},
|
||||
_createMarker: function (position) {
|
||||
this.marker = L.marker(position, {draggable: true}).addTo(this.map);
|
||||
this.marker.on('dragend', function () {
|
||||
this.map.panTo(this.marker.getLatLng());
|
||||
}.bind(this));
|
||||
}
|
||||
});
|
||||
|
||||
var LeafletGeocodeCirclePicker = LeafletGeocodeAbstractPicker.extend({
|
||||
apply: function (coordinatesInput, radiusInput) {
|
||||
var coordinates = this.marker
|
||||
? ( this.marker.getLatLng().lat + ',' + this.marker.getLatLng().lng)
|
||||
: '';
|
||||
|
||||
coordinatesInput.set('value', coordinates);
|
||||
radiusInput.set('value', this.marker ? Math.round(this.marker.getRadius()) : '');
|
||||
},
|
||||
_panTo: function () {
|
||||
this.map.fitBounds(this.marker.getBounds());
|
||||
},
|
||||
_createMarker: function (position) {
|
||||
this.marker = L.circle(position, { radius: this.options.radius.default });
|
||||
this.marker.addTo(this.map);
|
||||
|
||||
this.marker.on('pm:markerdragend', function () {
|
||||
var radius = this.marker.getRadius();
|
||||
|
||||
if (this.options.radius.min > 0 && this.options.radius.min > radius) {
|
||||
radius = this.options.radius.min;
|
||||
}
|
||||
|
||||
if (this.options.radius.max > 0 && this.options.radius.max < radius) {
|
||||
radius = this.options.radius.max;
|
||||
}
|
||||
|
||||
if (radius != this.marker.getRadius()) {
|
||||
this.marker.pm.disable();
|
||||
this.marker.setRadius(radius);
|
||||
this._enableEditMode();
|
||||
} else {
|
||||
this.marker.pm._outerMarker.setTooltipContent(this._formatRadius(radius));
|
||||
}
|
||||
|
||||
this.map.fitBounds(this.marker.getBounds());
|
||||
}.bind(this));
|
||||
|
||||
this._enableEditMode();
|
||||
},
|
||||
_updateCoordinates: function (position) {
|
||||
this.marker.pm.disable();
|
||||
this.marker.setLatLng(position);
|
||||
this.marker.pm.enable();
|
||||
},
|
||||
_enableEditMode: function () {
|
||||
this.marker.pm.enable();
|
||||
this.marker.pm._outerMarker.bindTooltip(
|
||||
this._formatRadius(this.marker.getRadius()),
|
||||
{permanent: true, direction: 'right', offset: [10, 0] }
|
||||
);
|
||||
},
|
||||
_formatRadius: function (radius) {
|
||||
var unit = 'm';
|
||||
@@ -171,3 +112,89 @@ var LeafletGeocodeWidget = L.Class.extend({
|
||||
return radius.toString() + ' ' + unit;
|
||||
}
|
||||
});
|
||||
|
||||
var LeafletGeocodeWidget = L.Class.extend({
|
||||
options: {
|
||||
mapTemplate: '<div id="leaflet_geocode_widget_map_{id}" class="leaflet-geocode-map"></div>',
|
||||
modalWidth: 800,
|
||||
modalTitle: 'Choose coordinates',
|
||||
searchPositionLabel: 'Search',
|
||||
applyPositionLabel: 'Apply',
|
||||
radius: null,
|
||||
picker: LeafletGeocodeMarkerPicker,
|
||||
map: {
|
||||
maxZoom: 15,
|
||||
minZoom: 2
|
||||
},
|
||||
bboxPadding: [0, 70]
|
||||
},
|
||||
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));
|
||||
|
||||
if (this.options.radius) {
|
||||
this.radius = $(this.options.radius.element);
|
||||
|
||||
if (this.radius.get('value').length > 0) {
|
||||
this.options.radius.default = parseInt(this.radius.get('value'));
|
||||
}
|
||||
}
|
||||
},
|
||||
_showMap: function () {
|
||||
// Create modal window.
|
||||
var content = L.Util.template(this.options.mapTemplate, this.options);
|
||||
this.modal = this._createModal();
|
||||
|
||||
this.modal.show({title: this.options.modalTitle, contents: content});
|
||||
|
||||
// Initialize map after showing modal so element exists.
|
||||
this._createMap();
|
||||
},
|
||||
_createModal: function () {
|
||||
var modal = new SimpleModal({
|
||||
width: this.options.modalWidth,
|
||||
hideFooter: false,
|
||||
draggable: false,
|
||||
overlayOpacity: .5,
|
||||
btn_ok: Contao.lang.close,
|
||||
onShow: function () {
|
||||
document.body.setStyle('overflow', 'hidden');
|
||||
},
|
||||
onHide: function () {
|
||||
document.body.setStyle('overflow', 'auto');
|
||||
}
|
||||
});
|
||||
|
||||
modal.addButton(Contao.lang.apply, 'btn', function () {
|
||||
this.picker.apply(this.element, this.radius);
|
||||
modal.hide();
|
||||
}.bind(this));
|
||||
|
||||
return modal;
|
||||
},
|
||||
_createMap: function () {
|
||||
var map = L.map('leaflet_geocode_widget_map_' + this.options.id, this.options.map).setView([0, 0], 2);
|
||||
this.picker = new this.options.picker(map, this.options);
|
||||
|
||||
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <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.picker.show(event.geocode.center);
|
||||
}.bind(this));
|
||||
|
||||
if (this.element.value) {
|
||||
this.picker.show(L.latLng(this.element.value.split(/,/)));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -123,7 +123,7 @@ class GeocodeWidget extends \Widget
|
||||
'attributes' => $this->getAttributes(),
|
||||
'wizard' => $this->wizard,
|
||||
'label' => $this->strLabel,
|
||||
'radius' => $this->radius
|
||||
'radius' => $this->buildRadiusOptions()
|
||||
]
|
||||
);
|
||||
|
||||
@@ -132,4 +132,35 @@ class GeocodeWidget extends \Widget
|
||||
|
||||
return $buffer;
|
||||
}
|
||||
|
||||
/**
|
||||
* Build the radius options.
|
||||
*
|
||||
* @return array|null
|
||||
*
|
||||
* @SuppressWarnings(PHPMD.Superglobals)
|
||||
*/
|
||||
private function buildRadiusOptions()
|
||||
{
|
||||
if (!$this->radius || !isset($GLOBALS['TL_DCA'][$this->strTable]['fields'][$this->radius])) {
|
||||
return null;
|
||||
}
|
||||
|
||||
$options = [
|
||||
'element' => 'ctrl_' . $this->radius,
|
||||
'min' => 0,
|
||||
'max' => 0,
|
||||
'defaultValue' => 0
|
||||
];
|
||||
|
||||
if (isset($GLOBALS['TL_DCA'][$this->strTable]['fields'][$this->radius]['eval'])) {
|
||||
$config = $GLOBALS['TL_DCA'][$this->strTable]['fields'][$this->radius]['eval'];
|
||||
|
||||
$options['min'] = isset($config['minval']) ? (int) $config['minval'] : 0;
|
||||
$options['max'] = isset($config['maxval']) ? (int) $config['maxval'] : 0;
|
||||
$options['defaultValue'] = isset($config['default']) ? (int) $config['default'] : 0;
|
||||
}
|
||||
|
||||
return $options;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user