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

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

Browse Source
This commit is contained in:
David Molineus
2018-02-12 16:51:24 +01:00
parent 572b58edeb
commit 178520dd6f
5 changed files with 53 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/Resources/contao/languages/de/default.php
View File

@@ -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';

9
src/Resources/contao/languages/en/default.php
View File

@@ -10,6 +10,9 @@
* @filesource
*/
$GLOBALS['TL_LANG']['ERR']['leafletInvalidCoordinate'] = 'Invalid coordinates given.';
$GLOBALS['TL_LANG']['MSC']['leafletSearchPositionLabel'] = 'Search';
$GLOBALS['TL_LANG']['MSC']['leafletApplyPositionLabel'] = 'Apply';
$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';

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

@@ -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

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

@@ -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;
}

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

@@ -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,