From 506811e535dc306a11b041e31e1dad0f9599e631 Mon Sep 17 00:00:00 2001
From: Utopiah <fabien-services@benetou.fr>
Date: Fri, 20 May 2022 12:13:16 +0200
Subject: [PATCH] OSM to AFrame basic example

---
 index.html | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 52 insertions(+), 4 deletions(-)
diff --git a/index.html b/index.html
index 918d1b2..8c90ccf 100644
--- a/index.html
+++ b/index.html
@@ -5,9 +5,14 @@
   <body>
 <script>
 var currentGeoPose = null; // https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition
-Geolocation.getCurrentPosition( console.log )
+navigator.geolocation.getCurrentPosition( geolocalized ) // should handle error, including being ignored
 // otherwise have 2 fallbacks via menu
-var positionsCurated = [{0,0},{1,1}]
+var positionsCurated = [
+		[50.8440239,4.3952614], // brussels for tests
+		[1,1]
+	]
+
+// should get in turn nwr(50.844,4.395,50.845,4.396); as example of scale
 
 // default position fallback to faciliate tests
 var position = positionsCurated[0]
@@ -17,8 +22,20 @@ var forcePosition = AFRAME.utils.getUrlParameter('position');
 if ( forcePosition ) position = positionsCurated[forcePosition]
 
 // generate 3D model from the target location from OSM data
+var bbox = "" + position[0]
+		+ "," + position[1]
+		+ "," + (position[0]+0.001)
+		+ "," + (position[1]+0.001)
+var queryOSM = `https://overpass-api.de/api/interpreter?data=[out:json];nwr(${bbox});out;`
+console.log( bbox )
+// format https://overpass-api.de/output_formats.html#json
+// bounding box https://dev.overpass-api.de/overpass-doc/en/full_data/bbox.html
+// testing https://overpass-turbo.eu
+fetch(queryOSM).then(response => response.json()).then(data => fromOSMTo3DElements(data) )
 
 // fetch flood data of target location (should be only 2 available) as timeseries
+var queryCEREMA = "https://cerema.fr/api/"+position
+fetch(queryCEREMA).then(response => response.json()).then(data => console.log(data) )
 
 // animate water based on flood data
 
@@ -26,16 +43,47 @@ if ( forcePosition ) position = positionsCurated[forcePosition]
 
 // modify environment to reflect time of day
 
-AFRAME.registerComponent('pinchtest', { // currently only 1 hand, the right one
+AFRAME.registerComponent('osm', { // currently only 1 hand, the right one
   init: function () {
   }
 });
 
+var globaljosm
+
+function fromOSMTo3DElements( josm ){
+	globaljosm = josm
+	var ways = josm.elements.filter( e => (e.type == "way") )
+	var houses = josm.elements.filter( e => (e.type == "node" && e.tags && e.tags["addr:housenumber"]))
+	// does not give a polygon, might need further requests. Might also not be the right way.
+	addHouses( houses )
+	console.log( ways.length, houses.length )
+}
+
+function addHouses( houses ){
+	houses.map( h => {
+		var el = document.createElement("a-box")
+		el.setAttribute("position", 
+				(((h.lat*1000)-(Math.round(h.lat*1000)))*10).toFixed(3) 
+				+ " 0 " 
+				+ (((h.lon*1000)-(Math.round(h.lon*1000)))*10).toFixed(3) 
+			)
+		AFRAME.scenes[0].appendChild( el )
+	})
+}
+
+function geolocalized( pos ){
+	console.log( pos.coords )
+}
+
 </script>
-    <a-scene >
+    <a-scene osm>
+      <!-- Quest available only during event, otherwise cardboard -->
       <a-entity id="leftHand" hand-tracking-controls="hand: left;"></a-entity>
       <a-entity id="rightHand" hand-tracking-controls="hand: right;"></a-entity>
+      <!-- for cardboard consider instead https://aframe.io/docs/1.3.0/components/cursor.html  -->
 
+      <a-sound src="src: url(birds.mp3)" autoplay="true" position="0 2 5"></a-sound>
+      <a-sound src="src: url(river.mp3)" autoplay="true" position="0 2 5"></a-sound>
       <a-box position="-0.1 1.2 -0.3" scale="0.5 0.5 0.5" rotation="0 45 0" color="#4CC3D9"></a-box>
       <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
       <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
