Snck3rs/contao-leaflet-geocode-widget
1
0
Fork 1
mirror of https://github.com/netzmacht/contao-leaflet-geocode-widget.git synced 2025-11-28 03:33:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add feature to define the radius in the geocode widget.

Browse Source
This commit is contained in:
David Molineus
2018-02-06 16:32:56 +01:00
parent c0ce2f4c5c
commit 656ddc3089
5 changed files with 106 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
composer.json
View File

@@ -26,7 +26,7 @@
"require": {
"php": ">=5.6.0",
"contao/core-bundle": "^4.4.0",
"netzmacht/contao-leaflet-libraries": "~1.0"
"netzmacht/contao-leaflet-libraries": "~1.3"
},
"require-dev": {
"contao/manager-plugin": "^2.0",

24
src/Resources/contao/templates/be_widget_leaflet_geocode.html5
View File

@@ -6,6 +6,12 @@ $GLOBALS['TL_CSS'][] = 'bundles/leafletgeocodewidget/css/backend.css';
$GLOBALS['TL_JAVASCRIPT'][] = 'assets/leaflet/libs/leaflet/leaflet.js';
$GLOBALS['TL_JAVASCRIPT'][] = 'assets/leaflet/libs/control-geocoder/Control.Geocoder.js';
if ($this->radius) {
$GLOBALS['TL_CSS'][] = 'assets/leaflet/libs/leaflet-pm/leaflet.pm.css';
$GLOBALS['TL_JAVASCRIPT'][] = 'assets/leaflet/libs/leaflet-pm/leaflet.pm.min.js';
}
$GLOBALS['TL_JAVASCRIPT'][] = 'bundles/leafletgeocodewidget/js/geocode.widget.js';
?>
@@ -24,10 +30,16 @@ $GLOBALS['TL_JAVASCRIPT'][] = 'bundles/leafletgeocodewidget/js/geocode.widget.js
<?= $this->wizard ?>
<script>
new LeafletGeocodeWidget({
id: 'ctrl_<?= $this->id ?>',
searchPositionLabel: '<?= $GLOBALS['TL_LANG']['MSC']['leafletSearchPositionLabel'] ?>',
applyPositionLabel: '<?= $GLOBALS['TL_LANG']['MSC']['leafletApplyPositionLabel'] ?>',
modalTitle: '<?= $this->label ?>'
})
window.addEvent(
'domready',
function () {
new LeafletGeocodeWidget({
id: 'ctrl_<?= $this->id ?>',
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 ?>
})
}
);
</script>

12
src/Resources/public/css/backend.css
View File

@@ -2,3 +2,15 @@
width: 325px;
display: inline-block;
}
.leaflet-submit-btn {
margin-top: 10px;
display: block;
padding: 7px 12px;
border: 1px solid #aaa;
border-radius: 2px;
box-sizing: border-box;
cursor: pointer;
background: #eee;
transition: background .2s ease;
}

90
src/Resources/public/js/geocode.widget.js
View File

@@ -3,7 +3,7 @@
*
* @package netzmacht
* @author David Molineus <david.molineus@netzmacht.de>
* @copyright 2016-2017 netzmacht David Molineus. All rights reserved.
* @copyright 2016-2018 netzmacht David Molineus. All rights reserved.
* @license LGPL-3.0 https://github.com/netzmacht/contao-leaflet-geocode-widget/blob/master/LICENSE
* @filesource
*/
@@ -14,7 +14,13 @@ var LeafletGeocodeWidget = L.Class.extend({
modalWidth: 800,
modalTitle: 'Choose coordinates',
searchPositionLabel: 'Search',
applyPositionLabel: 'Apply'
applyPositionLabel: 'Apply',
radius: null,
mapOptions: {
maxZoom: 15,
minZoom: 2
},
bboxPadding: [0, 70]
},
initialize: function (options) {
L.Util.setOptions(this, options);
@@ -22,6 +28,10 @@ var LeafletGeocodeWidget = L.Class.extend({
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);
}
},
_showMap: function () {
var content, modal;
@@ -50,7 +60,7 @@ var LeafletGeocodeWidget = L.Class.extend({
});
},
_createMap: function (modal) {
var map = L.map('leaflet_geocode_widget_map_' + this.options.id).setView([0, 0], 2);
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: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
@@ -70,8 +80,12 @@ var LeafletGeocodeWidget = L.Class.extend({
var value = this.element.value.split(/,/);
this._createMarker(value, map);
map.setZoom(16);
map.panTo(value);
if (this.radius) {
map.fitBounds(this._geocodeMarker.getBounds());
} else {
map.setZoom(this.options.mapOptions.maxZoom);
map.panTo(value);
}
}
return map;
@@ -81,12 +95,12 @@ var LeafletGeocodeWidget = L.Class.extend({
var link = document.createElement('button');
var result = event.geocode;
link.set('style', 'margin-left: 10px;');
link.set('class', 'leaflet-submit-btn');
link.appendText(this.options.applyPositionLabel);
link.addEvent('click', function (e) {
e.stop();
this.element.set('value', result.center.lat + ',' + result.center.lng);
this._updateInputs(result.center);
modal.hide();
}.bind(this));
@@ -97,19 +111,63 @@ var LeafletGeocodeWidget = L.Class.extend({
map.removeLayer(this._geocodeMarker);
}
map.fitBounds(result.bbox, { padding: [0, 70]});
map.fitBounds(result.bbox, { padding: this.options.bboxPadding});
map.panTo(result.center);
this._createMarker(result.center, map);
this._geocodeMarker.bindPopup(container, {
keepInView: true,
autoPanPaddingTopLeft: [0, 70]
}).openPopup();
if (!this.radius) {
this._geocodeMarker.bindPopup(container, {
keepInView: true,
autoClose: false,
closeOnClick: false,
autoPanPaddingTopLeft: this.options.bboxPadding
}).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));
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] }
);
} else {
this._geocodeMarker = L.marker(position, {draggable: true}).addTo(map);
this._geocodeMarker.on('dragend', function (event) {
this._updateInputs(event.target._latlng);
}.bind(this));
}
},
_updateInputs: function (coordinates, radius) {
this.element.set('value', coordinates.lat + ',' + coordinates.lng);
if (this.radius && typeof(radius) !== 'undefined') {
this.radius.set('value', radius);
}
},
_formatRadius: function (radius) {
var unit = 'm';
radius = Math.floor(radius);
if (radius > 1000) {
unit = 'km';
radius = (radius / 1000).toFixed(1);
}
return radius.toString() + ' ' + unit;
}
});

1
src/Widget/GeocodeWidget.php
View File

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