Tweet
Hello,
I can't get the "customelement_attr_openstreetmap.html5" to work for the automatic generation of location coordinates.
Is there something special to do?
Thanks for your help
(Order no.1386092614)
I can't get the "customelement_attr_openstreetmap.html5" to work for the automatic generation of location coordinates.
Is there something special to do?
PHP-Code:
<?php $GLOBALS['TL_JAVASCRIPT'][] = \Contao\Config::get('uploadPath').'/cto_layout/scripts/leaflet/leaflet.js|static'; $GLOBALS['TL_CSS'][] = \Contao\Config::get('uploadPath').'/cto_layout/scripts/leaflet/leaflet.css|static'; ?> <div id="leaflet_map_<?= $this->selector; ?>" class="<?= $this->class; ?> block" <?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?= $this->style; ?>"<?php endif; ?>> <div class="cc_leaflet_map_inside" id="map_<?= $this->selector; ?>" style="min-height:400px;"></div> </div> <script> /* <![CDATA[ */ /** * Initialize the googlemap */ function initializeMap_<?= $this->selector; ?>() { var center = {}; var centers_lat = []; var centers_lng = []; var mapOptions = { zoom: 5 }; // init leaflet var map = L.map('leaflet_map_<?= $this->selector; ?>'); var layerPreset = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; L.tileLayer(layerPreset, { maxZoom: 18, zoom: mapOptions.zoom, attribution: '© <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors', id: 'mapbox.streets' }).addTo(map); map.scrollWheelZoom.disable(); var markers = new Array(); var neededGeocoder = false; var search = ['Ä','ä','Ö','ö','Ü','ü','ß',"Ä","ä","Ö","ö","Ü","ü","ß"]; var replace = ['Ä','ä','Ö','ö','Ü','ü','ß','Ä','ä','Ö','ö','Ü','ü','ß']; var locations = [ { latitude: <?= $this->latitude; ?>, longitude: <?= $this->longitude; ?>, city:'<?= $this->city; ?>', street: '<?= $this->street; ?>', zipcode: '<?= $this->zipcode; ?>', country: '<?= $this->country; ?>', } ]; for(i = 0; i < locations.length; i++) { (function(location) // must encapsule to avoid wrong index in geocoder callback { var address = [locations[i].street,locations[i].zipcode,locations[i].city,locations[i].country]; //var address = [locations[i].street,locations[i].zipcode,locations[i].city,locations[i].country]; // array_filter address = jQuery.grep(address, function(v) {return v.length > 0;}); // need the geocoder to find coordinates if(location.latitude == undefined || location.longitude == undefined) { jQuery.ajax( { url: 'https://nominatim.openstreetmap.org/search', method: 'get', data: {'q':address.join('+'),'format':'json','addressdetails':1}, async: false, beforeSend: function(xhr,settings) { // unescape string and convert to utf-8 var url = unescape( decodeURIComponent(settings.url) ); jQuery.each(search, function(i,v) { url = url.replace(v, replace[i]); }); this.url = url; }, success:function(results) { if(typeof(results) == 'object' && results.length > 0) { var lat = Number(results[0].lat); var lon = Number(results[0].lon); var marker = L.marker([lat, lon]); marker.bindPopup( location.infotext ).openPopup(); marker.addTo(map); centers_lat.push(lat); centers_lng.push(lon); } }, }); } // location has coordinates. else { var lat = location.latitude; var lon = location.longitude; var marker = L.marker([lat, lon]); marker.bindPopup( location.infotext ).openPopup(); marker.addTo(map); centers_lat.push(lat); centers_lng.push(lon); } })(locations[i]); //closure passing in variables from loop } // find average coordinate as map center if(locations.length > 0) { var avg_lat = 0,avg_lng = 0; var c = centers_lat.length; for(var i = 0; i < c; i++) { avg_lat += Number(centers_lat[i]); avg_lng += Number(centers_lng[i]); } var center = { lat: avg_lat/c, lng: avg_lng/c }; setTimeout(function() { map.setView( center, mapOptions.zoom ); }, 1000); } // fallback to default center else { center.lat = 51.1958685; center.lng = 10.4809570; map.setView( center, mapOptions.zoom ); } } // Optin privacy setting token var token = localStorage.getItem('user_privacy_settings'); if( token == undefined ) { token = ''; } if(token.indexOf(2) >= 0) { // kickstarter: flag if map has been initialized already var mapInitialized_<?= $this->id; ?> = false; jQuery('script#js_leaflet_<?= $this->id; ?>').on('load',function() { initializeMap_<?= $this->selector; ?>(); // flag if map has been initialized already mapInitialized_<?= $this->id; ?> = true; }); setTimeout(function() { // if map has not been initialized yet, do so if(mapInitialized_<?= $this->id; ?> == false) { initializeMap_<?= $this->selector; ?>(); } }, 1000); } // listen to Eclipse.user_privacy Event jQuery(document).on('Eclipse.user_privacy',function(event,params) { if(params.level.indexOf(2) >= 0) { // kickstarter: flag if map has been initialized already var mapInitialized_<?= $this->id; ?> = false; jQuery('#privacy_info_<?= $this->id; ?>').fadeOut(); jQuery('script#js_leaflet_<?= $this->id; ?>').on('load',function() { initializeMap_<?= $this->selector; ?>(); // flag if map has been initialized already mapInitialized_<?= $this->id; ?> = true; }); setTimeout(function() { // if map has not been initialized yet, do so if(mapInitialized_<?= $this->id; ?> == false) { initializeMap_<?= $this->selector; ?>(); } }, 1000); } }); /* ]]> */ </script>
(Order no.1386092614)
Kommentar