Geomazing

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

[[Weiter|Video1]]

<div id="map"></div> <<script>> $(document).one(":passagedisplay", function() { setup.mapboxLoaded.then(function () { mapboxgl.accessToken = State.variables.accessToken var map = new mapboxgl.Map({ container: 'map', style: State.variables.style, }); var geolocate = new mapboxgl.GeolocateControl(window.geolocation.getGeolocateControl()); map.addControl(geolocate); var remainingFences = State.variables.fences.filter(f => f.alreadyEntered === false) geolocate.on('geolocate', ({ coords }) => { const lat = coords.latitude const lon = coords.longitude // console.log(`Koordinaten : ${lat}; ${lon}`); for (const fence of remainingFences) { if (window.geolocation.inside(fence.latitude,fence.longitude,fence.radius,lat, lon)) { map.setPaintProperty(fence.id, 'fill-color', 'red'); map.on('click', fence.id, (e) => { State.variables.fences.find(f => f.id === fence.id).alreadyEntered = true; switch (fence.id) { case 'lene_tauscho': $.wiki('<<goto "lene_tauscho">>') break; case 'lene_tischtennis': $.wiki('<<goto "lene_tischtennis">>') break; case 'wiedebach_spielplatz': $.wiki('<<goto "wiedebach_spielplatz">>') break; case 'wiedebach_tram': $.wiki('<<goto "wiedebach_tram">>') break; case 'johannistorturm': $.wiki('<<goto "1.1">>') break; case 'marsfeld': $.wiki('<<goto "2.1">>') break; case 'grauer_hof': $.wiki('<<goto "3.1">>') break; case 'markt': $.wiki('<<goto "4.1">>') break; case 'holzmarkt': $.wiki('<<goto "5.1">>') break; case 'halken': $.wiki('<<goto "6.1">>') break; case 'rabenturm': $.wiki('<<goto "7.1">>') break; case 'ozelot': $.wiki('<<goto "8.1">>') break; case 'pferd': $.wiki('<<goto "9.1">>') break; case 'schildkröte': $.wiki('<<goto "10.1">>') break; case 'schlange': $.wiki('<<goto "11.1">>') break; case 'schwein': $.wiki('<<goto "12.1">>') break; case 'truthahn': $.wiki('<<goto "13.1">>') break; case 'zebra': $.wiki('<<goto "14.1">>') break; case 'affe': $.wiki('<<goto "15.1">>') break; case 'eule': $.wiki('<<goto "16.1">>') break; case 'gazelle': $.wiki('<<goto "17.1">>') break; case 'katze': $.wiki('<<goto "18.1">>') break; case 'krokodil': $.wiki('<<goto "19.1">>') break; case 'lama': $.wiki('<<goto "20.1">>') break; default: console.log(`${fence.id} not found`); } }); } else { map.setPaintProperty(fence.id, 'fill-color', 'blue'); } } }); map.on('load', () => { renderMap(); // console.log($(".mapboxgl-ctrl-geolocate")); $(".mapboxgl-ctrl-geolocate").click(); }) map.on('zoomend', () => { let zoom = map.getZoom().toFixed(); // Zoomstufe in Pixel wird als Größe der H1-Überschrift gesetzt $('.mapboxgl-popup-content h1').css('font-size', zoom+'px') // Ab Zoomstufe kleiner 14 werden die Boxen ausgeblendet if (zoom < 14){ $('.mapboxgl-popup-content').css('display','none') $('.mapboxgl-popup-tip').css('display','none') } else { $('.mapboxgl-popup-content').css('display', 'block') $('.mapboxgl-popup-tip').css('display', 'block') } }) function renderMap() { map.resize(); console.log(map.getStyle().layers) map.setFilter('Lene', ['==', 'id', 'lene_tischtennis']); const places = { "features": [ { "type": "Feature", "properties": { "id": "lene_tischtennis" }, "geometry": { "coordinates": [ 12.402368, 51.333427 ], "type": "Point" } }, { "type": "Feature", "properties": { "id": "lene_tauscho" }, "geometry": { "coordinates": [ 12.404369, 51.33318 ], "type": "Point" } } ], "type": "FeatureCollection" } for (const feature of places.features) { map.addLayer({ 'id': feature.id, 'type': 'symbol', 'source': 'places', 'filter': ['==', 'id', 'lene_tischtennis'] }); } for (const fence of remainingFences) { map.addSource(fence.id, window.geolocation.createGeoJSONCircle([fence.longitude, fence.latitude], fence.radius / 1000)); map.addLayer({ 'id': fence.id, 'type': 'fill', 'source': fence.id, 'layout': {}, 'paint': { 'fill-color': 'blue', 'fill-opacity': 0.6 } }); new mapboxgl.Popup({closeButton: false, closeOnClick: false, className: 'popup', offset: [0, -50], anchor: 'bottom'}) .setLngLat([fence.longitude, fence.latitude]) .setHTML("<h1>"+fence.description+"</h1>") .addTo(map); } } }) }); <</script>>

Lene Tauscho <<nobr>> <<set $fences to setup.getDisplayedFences(['wiedebach_spielplatz', 'wiedebach_tram'])>> <</nobr>> <<button "Folge den Hinweisen auf der Karte">> <<goto "Map">> <</button>>

Lene Tischtennis <<button "Zurück">> <<goto "Map">> <</button>>

<<nobr>> <<set $fences to setup.getFences()>> <<set $accessToken to 'pk.eyJ1IjoiZ2VyZGVzcXVlIiwiYSI6ImNsNnowcWg1eDAwZmQzY211cTYyZ2FsaHYifQ.gOYM4cFcp8rcqUCwsgsjug'>> <<set $style to 'mapbox://styles/gerdesque/clckluor2000l14lbev40r74r'>> <</nobr>>

Wiedebach Spielplatz <<nobr>> <<set $fences to setup.getDisplayedFences(['wiedebach_tram'])>> <</nobr>> <<button "Zurück">> <<goto "Map">> <</button>>

Wiedebach Tram <<button "Zurück">> <<goto "Map">> <</button>>

<<nobr>> <<script>> if (window.matchMedia('(display-mode: standalone)').matches) { $.wiki('<<goto "Intro">>') } <</script>> <<set $is_safari to navigator.userAgent.indexOf('Safari') > -1 && navigator.userAgent.indexOf('Chrome') <= -1>> <<set $is_chrome to navigator.userAgent.indexOf('Chrome') > -1>> <div class="wrapper"> <h1>Installation</h1> <h2>Willkommen zu Geomazing. Bitte füge diese WebApp deinem Homescreen hinzu. Nur so können wir sichergehen, dass die Rallye optimal auf deinem Gerät funktioniert. <br> <br> <<if $is_safari>> iOS Geräte<br>1. Link in Safari öffnen<br>2. Teilen<br>3. Zum Home-Bildschirm hinzufügen. <<elseif $is_chrome>> Android Geräte<br>1.Link in Chrome öffnen<br>2.Teilen<br>3.Zum Home-Bildschirm hinzufügen. <<else>> Bitte benutze entweder Chrome oder Safari Browser. <</if>> </h2> </div> <div class="btn-group"> <<button "Start">> <<goto "Intro">> <</button>> </div> <</nobr>>

[[Weiter|Map]] <<nobr>> <h1>Autoplay loop playsinline</h1> <video autoplay loop playsinline> <source src="https://www.w3schools.com/html/mov_bbb.mp4"> </video> <</nobr>>