From a0f4e9a1cebb5c218be509c5247d91ee2c45cd2a Mon Sep 17 00:00:00 2001
From: Utopiah <fabien-services@benetou.fr>
Date: Fri, 27 May 2022 12:09:24 +0200
Subject: [PATCH] parametrize scaling and elevation test via dedicated API

---
 index.html | 64 +++++++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 54 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index fbaa14b..2260195 100644
--- a/index.html
+++ b/index.html
@@ -21,11 +21,16 @@ var position = positionsCurated[0]
 var forcePosition = AFRAME.utils.getUrlParameter('position');
 if ( forcePosition ) position = positionsCurated[forcePosition]
 
+var precision = 4
+var bbox_limit = 10/10**precision
+
+var elevation_res = 10
+
 // generate 3D model from the target location from OSM data
 var bbox = "" + position[0]
 		+ "," + position[1]
-		+ "," + (position[0]+0.001)
-		+ "," + (position[1]+0.001)
+		+ "," + (position[0]+bbox_limit)
+		+ "," + (position[1]+bbox_limit)
 var queryOSM = `https://overpass-api.de/api/interpreter?data=[out:json];nwr(${bbox});out;`
 // format https://overpass-api.de/output_formats.html#json
 // bounding box https://dev.overpass-api.de/overpass-doc/en/full_data/bbox.html
@@ -49,6 +54,44 @@ AFRAME.registerComponent('osm', { // currently only 1 hand, the right one
 
 var globaljosm
 
+function rescale( value ){
+	return (((value*10**precision)-(Math.round(value*10**precision)))*10).toFixed(precision) 
+}
+
+function elevationTo3DElements( locations ){
+	console.log( locations )
+	locations.map( h => {
+		var el = document.createElement("a-sphere")
+		el.setAttribute("color", "blue")
+		el.setAttribute("radius", "0.1")
+		// simplification, for a proper polygon see make3DFloor() but here shouldn't assume a centroid
+			// could instead rely on a grid
+		el.setAttribute("position", h.latitude + " "+ h.elevation +" " + h.longitude )
+			// rescale() does not work here, probably different format than in addHouses()
+		// could find the minimum altitude then remove it from every other values
+		AFRAME.scenes[0].appendChild( el )
+	})
+}
+
+function getElevation(){
+	var locations = []
+	for (var i=0;i<elevation_res;i++)
+		for (var j=0;j<elevation_res;j++)
+			locations.push({
+				latitude:Number( (position[0]+(bbox_limit/elevation_res)*i).toFixed(precision) ),
+				longitude:Number( (position[1]+(bbox_limit/elevation_res)*j).toFixed(precision) ),
+			})
+	fetch('https://api.open-elevation.com/api/v1/lookup', {
+	  method: 'POST',
+	  headers: {
+	    'Accept': 'application/json',
+	    'Content-Type': 'application/json',
+	  },
+	  body: JSON.stringify({locations:locations})
+	}).then(response => response.json()).then(data => elevationTo3DElements(data.results) )
+}
+
+
 function fromOSMTo3DElements( josm ){
 	globaljosm = josm
 	var ways = josm.elements.filter( e => (e.type == "way") )
@@ -60,13 +103,8 @@ function fromOSMTo3DElements( josm ){
 function addHouses( houses ){
 	houses.map( h => {
 		var el = document.createElement("a-box")
-		// simplification, for a proper polygon see past work
-		// https://glitch.com/edit/#!/ar-room?path=README.md
-		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) 
-			)
+		// simplification, for a proper polygon see addWall() and make3DFloor()
+		el.setAttribute("position", rescale( h.lat ) + " 0 " + rescale( h.lon ))
 		AFRAME.scenes[0].appendChild( el )
 	})
 }
@@ -139,6 +177,12 @@ function getCentroid(points){
   return centroid;  
 }
 
+AFRAME.registerComponent('elevation', {
+  init: function () {
+	var el = this.el
+	getElevation()
+  }
+})
 AFRAME.registerComponent('procgen', {
   init: function () {
 	var el = this.el
@@ -155,7 +199,7 @@ AFRAME.registerComponent('procgen', {
 });
 
 </script>
-    <a-scene osm>
+    <a-scene osm elevation>
       <!-- 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>