Bienenstände body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; height:500px } #marker1 { background-image: url('http://www.bee-o-logisch.at/images/Bienenstand_Wienerwald_Sonnleiten.jpg'); background-size: cover; width: 140px; height: 140px; border-radius: 50%; cursor: pointer; } #marker2 { background-image: url('http://www.bee-o-logisch.at/images/grossweikersdorf1.jpg'); background-size: cover; width: 140px; height: 140px; border-radius: 50%; cursor: pointer; } #marker3 { background-image: url('http://www.bee-o-logisch.at/images/Bienenstand_Wienerwald_Kloster_Stein.jpg'); background-size: cover; width: 140px; height: 140px; border-radius: 50%; cursor: pointer; } #marker4 { background-image: url('http://www.bee-o-logisch.at/images/Bienenstand_Wienerwald_Duerreberg.jpg'); background-size: cover; width: 140px; height: 140px; border-radius: 50%; cursor: pointer; } #marker5 { background-image: url('http://www.bee-o-logisch.at/images/Bienenstand_Wienerwald_Bierbachwiese.jpg'); background-size: cover; width: 140px; height: 140px; border-radius: 50%; cursor: pointer; } #marker7 { background-image: url('http://www.bee-o-logisch.at/images/Bienenstand_Wienerwald_Buchberg.jpg'); background-size: cover; width: 140px; height: 140px; border-radius: 50%; cursor: pointer; } #marker8 { background-image: url('http://www.bee-o-logisch.at/images/Bienenstand_Wienerwald_Hochbuch.jpg'); background-size: cover; width: 140px; height: 140px; border-radius: 50%; cursor: pointer; } #marker9 { background-image: url('http://www.bee-o-logisch.at/images/Bienenstand_Wienerwald_Heimbautal.jpg'); background-size: cover; width: 140px; height: 140px; border-radius: 50%; cursor: pointer; } .mapboxgl-popup { max-width: 200px; } .map-overlay-container { position: absolute; width: 25%; top: 0; left: 0; padding: 10px; z-index: 1; } .map-overlay { font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif; background-color: #fff; border-radius: 3px; padding: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .map-overlay h1, .map-overlay p { margin: 0 0 10px; } mapboxgl.accessToken = 'pk.eyJ1IjoiZXVyb2RpdmVyIiwiYSI6ImNraDkwaGs4MDAwdXkycXRpbGZwNG9qYncifQ.cbyvKgg-kI5QFntHsdoi8Q'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/cjaudgl840gn32rnrepcb9b9g', // the outdoors-v10 style but without Hillshade layers center: [16.010124, 48.316068], maxZoom: 17, minZoom: 9, zoom: 9 }); var eichgraben = [16.001197, 48.172748]; var ziegelhengst = [15.970376, 48.468153]; var bruderhof = [15.977368, 48.185498]; var duerreberg = [16.011565, 48.173727]; var bierbachwiese = [16.016619, 48.167822]; var buchberg = [16.027343, 48.172161]; var hochbuch = [16.036527, 48.182148]; var heimbautal =[16.148545, 48.174041]; var title = document.getElementById('location-title'); var description = document.getElementById('location-description'); var locations = [ { 'id': '1', 'title': 'Sonnleiten', 'description': "Unser Bienenstand auf der Sonnleiten im Wienerwald.Von hier stammt unser Blüten- und Waldhonig.", 'camera': { center: [16.001197, 48.172748], zoom: 14, pitch: 50 } }, { 'id': '2', 'title': 'Ziegelhengst', 'description': "Unser Bienenstand im Schmidatal. Hier ernten wir unseren wunderbaren Akazienhonig.", 'camera': { center: [15.970376, 48.468153], bearing: -8.9, zoom: 14 } }, { 'id': '3', 'title': 'Kloster Stein im Wienerwald', 'description': "Unser Bienenstand am Bruderhof im Kloster Stein im Wienerwald. Hier ernten wir fantastischen Blütenhonig vom ehrwürdigen Kloster-Obstgarten.", 'camera': { center: [15.977368, 48.185498], bearing: -8.9, zoom: 14 } }, { 'id': '4', 'title': 'Dürreberg', 'description': "Unser Bienenstand am Dürreberg bei Rekawinkel. Hier ernten wir ausgezeichneten Blütenhonig von einer großen Naturwiese und würzigen Waldhonig vom angrenzenden Wald.", 'camera': { center: [16.011565, 48.173727], bearing: -8.9, zoom: 14 } }, { 'id': '5', 'title': 'Bierbachwiese', 'description': "Unser Bienenstand auf der Bierbachwiese. Hier ernten wir wunderbaren Blütenhonig von den Wiesenblumen und Obstbäumen und g'schmackigen Waldhonig.", 'camera': { center: [16.016619, 48.167822], bearing: -8.9, zoom: 14 } }, { 'id': '7', 'title': 'Buchberg', 'description': "Unser Bienenstand am Buchberg. Hier ernten wir besten Blütenhonig von den wunderbaren Wiesenblumen und kräftigen Mischwaldhonig.", 'camera': { center: [16.027343, 48.172161], bearing: -8.9, zoom: 14 } }, { 'id': '8', 'title': 'Hochbuch', 'description': "Unser Bienenstand am Hochbuch. Hier ernten wir unseren Heidehonig.", 'camera': { center: [16.036527, 48.182148], bearing: -8.9, zoom: 14 } }, { 'id': ‚9', 'title': 'Heimbautal', 'description': „Im Heimbautal ernten wir wunderbaren Blüten- und Mischwaldhonig", 'camera': { center: [16.148545, 48.174041], bearing: -8.9, zoom: 14 } }, { 'title': 'Bienenstände', 'description': 'Unsere Bienenstände', 'camera': { center: [16.010124, 48.316068], zoom: 9, bearing: 0, pitch: 0 } } ]; function highlightBorough(code) { // Only show the polygon feature that cooresponds to `borocode` in the data map.setFilter('highlight', ['==', 'borocode', code]); } function playback(index) { title.textContent = locations[index].title; description.textContent = locations[index].description; highlightBorough(locations[index].id ? locations[index].id : ''); // Animate the map position based on camera properties map.flyTo(locations[index].camera); map.once('moveend', function () { // Duration the slide is on screen after interaction window.setTimeout(function () { // Increment index index = index + 1 === locations.length ? 0 : index + 1; playback(index); }, 5000); // After callback, show the location for 5 seconds. }); } // Display the last title/description first title.textContent = locations[locations.length - 1].title; description.textContent = locations[locations.length - 1].description; map.on('load', function () { map.addSource('boroughs', { 'type': 'vector', 'url': 'mapbox://mapbox.8ibmsn6u' }); map.addLayer( { 'id': 'highlight', 'type': 'fill', 'source': 'boroughs', 'source-layer': 'original', 'paint': { 'fill-color': '#fd6b50', 'fill-opacity': 0.25 }, 'filter': ['==', 'borocode', ''] }, 'settlement-subdivision-label' ); // Place polygon under the neighborhood labels. // Start the playback animation for each borough playback(0); }); map.on('load', function () { map.addSource('dem', { 'type': 'raster-dem', 'url': 'mapbox://mapbox.terrain-rgb' }); map.addLayer( { 'id': 'hillshading', 'source': 'dem', 'type': 'hillshade' // insert below waterway-river-canal-shadow; // where hillshading sits in the Mapbox Outdoors style }, 'waterway-river-canal-shadow' ); }); // create DOM element for the marker var el1 = document.createElement('div'); el1.id = 'marker1'; var el2 = document.createElement('div'); el2.id = 'marker2'; var el3 = document.createElement('div'); el3.id = 'marker3'; var el4 = document.createElement('div'); el4.id = 'marker4'; var el5 = document.createElement('div'); el5.id = 'marker5'; var el7 = document.createElement('div'); el7.id = 'marker7'; var el8 = document.createElement('div'); el8.id = 'marker8'; var el9 = document.createElement('div'); el9.id = 'marker9'; // create the marker new mapboxgl.Marker(el1) .setLngLat(eichgraben) .addTo(map); new mapboxgl.Marker(el2) .setLngLat(ziegelhengst) .addTo(map); new mapboxgl.Marker(el3) .setLngLat(bruderhof) .addTo(map); new mapboxgl.Marker(el4) .setLngLat(duerreberg) .addTo(map); new mapboxgl.Marker(el5) .setLngLat(bierbachwiese) .addTo(map); new mapboxgl.Marker(el7) .setLngLat(buchberg) .addTo(map); new mapboxgl.Marker(el8) .setLngLat(hochbuch) .addTo(map); new mapboxgl.Marker(el9) .setLngLat(heimbautal) .addTo(map); function cookiehintsubmitnoc(obj) { if (confirm("Eine Ablehnung wird die Funktionen der Website beeinträchtigen. Möchten Sie wirklich ablehnen?")) { document.cookie = 'reDimCookieHint=-1; expires=0; path=/'; cookiehintfadeOut(document.getElementById('redim-cookiehint-bottom')); return true; } else { return false; } } Wir benutzen Cookies Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell für den Betrieb der Seite, während andere uns helfen, diese Website und die Nutzererfahrung zu verbessern (Tracking Cookies). Sie können selbst entscheiden, ob Sie die Cookies zulassen möchten. Bitte beachten Sie, dass bei einer Ablehnung womöglich nicht mehr alle Funktionalitäten der Seite zur Verfügung stehen. Akzeptieren Ablehnen document.addEventListener("DOMContentLoaded", function(event) { if (!navigator.cookieEnabled){ document.getElementById('redim-cookiehint-bottom').remove(); } }); function cookiehintfadeOut(el) { el.style.opacity = 1; (function fade() { if ((el.style.opacity -= .1) < 0) { el.style.display = "none"; } else { requestAnimationFrame(fade); } })(); } function cookiehintsubmit(obj) { document.cookie = 'reDimCookieHint=1; expires=Wed, 30 Dec 2026 23:59:59 GMT;57; path=/'; cookiehintfadeOut(document.getElementById('redim-cookiehint-bottom')); return true; } function cookiehintsubmitno(obj) { document.cookie = 'reDimCookieHint=-1; expires=0; path=/'; cookiehintfadeOut(document.getElementById('redim-cookiehint-bottom')); return true; }