Files
contao-leaflet-maps/module/templates/be_leaflet_geocode.html5
2015-01-06 21:52:36 +01:00

59 lines
2.1 KiB
Plaintext

<?php $GLOBALS['TL_CSS'][] = 'assets/leaflet/libs/leaflet/leaflet.css'; ?>
<?php $GLOBALS['TL_CSS'][] = 'assets/leaflet/libs/control-geocoder/Control.Geocoder.css'; ?>
<?php $GLOBALS['TL_JAVASCRIPT'][] = 'assets/leaflet/libs/leaflet/leaflet.js'; ?>
<?php $GLOBALS['TL_JAVASCRIPT'][] = 'assets/leaflet/libs/control-geocoder/Control.Geocoder.js'; ?>
<div id="map_<?php echo $this->field; ?>" style="margin-top: 5px; width: 670px; 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: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var geocoder = L.Control.geocoder({
collapsed: false,
placeholder: '<?php echo $GLOBALS['TL_LANG']['tl_leaflet_map']['searchPosition']; ?>'
}).addTo(map);
geocoder.markGeocode = function(result) {
var container = document.createElement('div');
var link = document.createElement('button');
var element = $('<?php echo $this->field; ?>');
link.set('style', 'margin-left: 10px;');
link.appendText('<?php echo $GLOBALS['TL_LANG']['tl_leaflet_map']['applyPosition']; ?>');
link.addEvent('click', function(e) {
e.stop();
element.set('value', result.center.lat + ',' + result.center.lng);
});
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)
.bindPopup(container, {
keepInView: true,
autoPanPaddingTopLeft: [0, 70]
})
.addTo(map)
.openPopup();
return this;
};
<?php if ($this->marker): ?>
geocoder._geocodeMarker = L.marker(<?php echo $this->marker; ?>).addTo(map);
map.setZoom(16);
map.panTo(<?php echo $this->marker; ?>);
<?php endif; ?>
</script>