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);