Risk Literacy/Real World Labs/web-based Exploration

Markers for two cities on the map with discription and links in marker popup.

Image map example of The Club. Clicking on a person in the picture causes the browser to load the appropriate article.

Click on Water Wheel - Image River: Queich, City: Annweiler, Country: Germany

ImageMap Editor HTML5 - runs in Browser - no uploads

AR.js Example with Kanji Marker with Water Molecule as 3D object for web-based exploration of 3D objects in a browser

With this learning resource you will be able to create web-based exploration platform for a Real World Lab. This approach combines a

• geographical map to show were the Real World Lab is located and
• image map that add clickable areas on an image with other web content and
• VR environments in AFrame for web-based exploration even with a VR headset.

This approach can replace the augmented reality approach with Mixare or AR.js that provides augmented reality in the browser.

Learning Tasks

360^o Panorama and VR environments

Explore a option virtual reality environment which can be explored with a browser, VR headset or mobile device with e.g. Card Board.

• AFrame Example - Puy de Sancy
• Aframe 3D-Scene of a virtual Museum
• Panorama Tour Builder - Marzipano

Explain the options to improve risk literacy with a 3D environment and visualized invisible risks with exposure of users to risky situations physically. Design the VR environment as an exploratory learning resource with ToDos for the user (see also gamification and serious games).

Geographical Maps

• (Learner's Geolocation on Map) Learn about geolocation aware browser applications by checking the OpenLayers Example for Geolocation and press of the button "track position". This retrieve the geolocation of GPS or estimates geolocation by IP-address of browser.
• (Create your first web-based Map) Learn to create your first map on your computer.
  • Install an OpenSource Editor Copy and Paste the code below the OpenLayers Example into the Atom-Editor and save the file. Browse your local file in your Webbrowser (e.g. Firefox, Chromium, Chrome, ...)
  • Center the map over your Real World Map and select an appropriate zoom factor for your map in OpenLayers

Image Map

• Explore the Image Map features and the requirments and constraints for learners with the following examples
  • Image Map Example on Wikipedia - click on single person in painting on the right.
  • You can create an Image Map in LibreOffice or GIMP. See Youtube Video for GIMP or you can try the Online image editor.
  • Create ImageMaps with webbased tool ImgMap, that does

• Select images for your Real World Lab (e.g. the image on the right with the river Queich) and create an image map that informs about the objects seen on the image (e.g. the water wheel or the river). The ImageMap editor will defined clickable areas on the image. Users explore the Real World Lab just by the web browser by selecting the river bed, or a building. By clicking on the river or the building the user can select further details of river or the building (view inside the building).
  • Use the following URL in the Online Image Map by Dario D. Müller (2017)

https://upload.wikimedia.org/wikipedia/commons/5/5e/Annweiler_Queich_05.JPG

• Mark the water wheel and create a reference to an online resource in Wikipedia, that explains this type of old technology.
• Try other types of links that make a reference objects see on the image, e.g. a geographical map with a marker, that shows where the image was taken, or any other web-based resouce including quizzes, YouTube Videos, ...

• For further details see GIMP Image Maps in Wikiversity.

3D Panorama Videos

The OpenSource Library Valiant360 is a 360 degree panoramic video player.

• Look around (drag view) in top video on Valiant360 Website on GitHub
• As video source you need an equirectangular video (see example on Youtube)
• Exxplore an artifical 3D world with and panorama video (see also 3D Modelling)
• Explore Hardware Setup with 4 Cameras and explain why you need 4 cameras and an overlap of camera images!
• Explain the decomposition of video into single frame (e.g. 25 frames per second) and how a single webbased 360^o Image to explore the environment!
• Explore the device sensors of mobile device. Explain how these sensors can be used look around in a 3D video just by turning and moving the device.
• Explain how a geolocation at a mobile device can be used to add 360^o to place yourself in 360^o video refers to the current geolocation your are currently. View a flood event from previous years, so that the learner will be able to understand, what the impact will be for the current geolocation of the Real World Lab and learn and do something to make place a bit save (see Risk Awareness and Response to the perceived risk)

Integration of Approaches

The following learning task we will integrate digital maps with OpenLayers with Markers with 3D scenes in Aframe. Furthermore with will link an image map with wikipedia article for further information about the displayed people or objects in the images.

1. (OpenLayers Map ) Create an OpenLayers Map with Markers4Map that contain markers for a certain geolocation.

• OpenLayers Map with Wikipedia Content
• OpenLayer Map with 360^o Panorama Image linked in Marker/Icon popup.

1. (360^o Image -Panorama) Create a webbased $360^{o}$ Image for that geolocation on Github with AFrame. Link in Wikiversity Source of this article is generated with Markers4Map by pressing the Display-Map-Button and copy the link in the browser URL.
2. (Image Map) Create ImageMap with and image of the geolocation on the map and reference objects on the image to corresponding Wikipedia or Wikiversity articles that explain the purpose or background of the object.

See also

• AppLSAC
• Real World Lab
• Risk Management Learning Resources
• 3D Modelling
• Augemented Reality in Browser
• Image Maps in Wikiversity and Wikipedia

Tools

• Markers4Map - OpenSource GitHub Tool to create an URL that encodes the geolocation of markers with their pop-ups for OpenStreetMap in OpenLayers
• OpenLayers Display Markers - OpenSource GitHub Tool takes a JSON file as input via URL to display geo-encoded markers with pop-ups for OpenStreetMap Maps in OpenLayers

Links

• LibreOffice Image Maps
• W3 Schools example of Image Maps
• Geolocation in OpenLayers, With one click you can determine the geo-position on the map.
• Tracking and Simulate a Path in the Real World Lab.
• Online Image Map Generator - AppLSAC Tool Example for Wikiversity
• Create Image Maps with GIMP