forked from Snck3rs/contao-leaflet-maps
73 lines
2.8 KiB
Plaintext
73 lines
2.8 KiB
Plaintext
<?php $GLOBALS['TL_CSS'][] = 'assets/leaflet/libs/leaflet/leaflet.min.css'; ?>
|
|
<?php $GLOBALS['TL_CSS'][] = 'assets/leaflet/libs/control-geocoder/Control.Geocoder.min.css'; ?>
|
|
|
|
<?php $GLOBALS['TL_JAVASCRIPT'][] = 'assets/leaflet/libs/leaflet/leaflet.js'; ?>
|
|
<?php $GLOBALS['TL_JAVASCRIPT'][] = 'assets/leaflet/libs/control-geocoder/Control.Geocoder.min.js'; ?>
|
|
|
|
<div id="map_<?php echo $this->field; ?>" style="margin-top: 5px; width: calc(100% - 28px); height: 300px"></div>
|
|
<script>
|
|
var map = L.map('map_<?php echo $this->field; ?>').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 element = $('<?php echo $this->field; ?>');
|
|
var geocoder = L.Control.geocoder({
|
|
defaultMarkGeocode: false,
|
|
collapsed: false,
|
|
placeholder: '<?php echo $GLOBALS['TL_LANG']['leaflet']['searchPosition']; ?>'
|
|
}).addTo(map);
|
|
|
|
document.querySelector('.leaflet-control-geocoder input').addEventListener('keydown', function (event) {
|
|
if (event.keyCode === 13) {
|
|
event.preventDefault();
|
|
}
|
|
});
|
|
|
|
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);
|
|
this._geocodeMarker.closePopup();
|
|
}.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._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>
|