geoarJS:places-name: testing changes heading

evaristoc · Dec 11, 2019 · 5a9dde5 · 5a9dde5
1 parent 0348fbb
commit 5a9dde5
Show file tree

Hide file tree

Showing 5 changed files with 157 additions and 0 deletions.
diff --git a/geoarJS/tests/assets/map-marker.png b/geoarJS/tests/assets/map-marker.png
diff --git a/geoarJS/tests/assets/place_icon.png b/geoarJS/tests/assets/place_icon.png
diff --git a/geoarJS/tests/places-name/index (copy).html b/geoarJS/tests/places-name/index (copy).html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>GeoAR.js demo</title>
+    <script src='https://aframe.io/releases/0.9.2/aframe.min.js'></script>
+    <script src='https://raw.githack.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js'></script>
+    <script>
+        THREEx.ArToolkitContext.baseURL = 'https://raw.githack.com/jeromeetienne/ar.js/master/three.js/'
+    </script>
+</head>
+
+<link rel="stylesheet" href="../../src/stylesheets/index.css">
+
+<!-- Dynamically add places from Javascript -->
+<script src="./places.js"></script>
+
+<body style='margin: 0; overflow: hidden;'>
+    <a-scene
+        cursor='rayOrigin: mouse; fuse: true; fuseTimeout: 0;'
+        raycaster="objects: [gps-entity-place];"
+        vr-mode-ui="enabled: false"
+		embedded
+		arjs='sourceType: webcam; sourceWidth:1280; sourceHeight:960; displayWidth: 1280; displayHeight: 960; debugUIEnabled: false;'>
+
+        <a-camera gps-camera="minDistance: 40;" rotation-reader>
+		</a-camera>
+	</a-scene>
+</body>
diff --git a/geoarJS/tests/places-name/index.html b/geoarJS/tests/places-name/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>GeoAR.js demo</title>
+    <script src='https://aframe.io/releases/0.9.2/aframe.min.js'></script>
+    <script src='https://raw.githack.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js'></script>
+    <script>
+        THREEx.ArToolkitContext.baseURL = 'https://raw.githack.com/jeromeetienne/ar.js/master/three.js/'
+    </script>
+</head>
+
+<link rel="stylesheet" href="../../src/stylesheets/index.css">
+
+<!-- Dynamically add places from Javascript -->
+<script src="./places.js"></script>
+
+<body style='margin: 0; overflow: hidden;'>
+    <a-scene
+        cursor='rayOrigin: mouse; fuse: true; fuseTimeout: 0;'
+        raycaster="objects: [gps-entity-place];"
+        vr-mode-ui="enabled: false"
+		embedded
+		arjs='sourceType: webcam; sourceWidth:1280; sourceHeight:960; displayWidth: 1280; displayHeight: 960; debugUIEnabled: false;'>
+
+        <a-camera gps-camera="minDistance: 40;" rotation-reader>
+		</a-camera>
+		<div><h4>SOMETHING</h4></div>
+	</a-scene>
+</body>
diff --git a/geoarJS/tests/places-name/places.js b/geoarJS/tests/places-name/places.js
@@ -0,0 +1,96 @@
+const loadPlaces = function (coords) {
+    // COMMENT FOLLOWING LINE IF YOU WANT TO USE STATIC DATA AND ADD COORDINATES IN THE FOLLOWING 'PLACES' ARRAY
+    const method = 'api';
+
+    const PLACES = [
+        {
+            name: "Your place name",
+            location: {
+                lat: 0, // add here latitude if using static data
+                lng: 0, // add here longitude if using static data
+            }
+        },
+    ];
+
+    if (method === 'api') {
+        return loadPlaceFromAPIs(coords);
+    }
+
+    return Promise.resolve(PLACES);
+};
+
+// getting places from REST APIs
+function loadPlaceFromAPIs(position) {
+    const params = {
+        radius: 300,    // search places not farther than this value (in meters)
+        clientId: 'HZIJGI4COHQ4AI45QXKCDFJWFJ1SFHYDFCCWKPIJDWHLVQVZ',
+        clientSecret: 'QWT2HBMQ1LUC4BYQHZWO2UQNEEANJENUIMYBG4JH32AC1OGA',
+        version: '20300101',    // foursquare versioning, required but unuseful for this demo
+    };
+
+    // CORS Proxy to avoid CORS problems
+    const corsProxy = 'https://cors-anywhere.herokuapp.com/';
+
+    // Foursquare API
+    // E: using proxy for cors handling; ES6 text formatting
+    const endpoint = `${corsProxy}https://api.foursquare.com/v2/venues/search?intent=checkin
+        &ll=${position.latitude},${position.longitude}
+        &radius=${params.radius}
+        &client_id=${params.clientId}
+        &client_secret=${params.clientSecret}
+        &limit=15
+        &v=${params.version}`;
+
+    return fetch(endpoint)
+        .then((res) => {
+            return res.json()
+                .then((resp) => {
+                    return resp.response.venues;
+                })
+        })
+        .catch((err) => {
+            console.error('Error with Foursquare Places API', err);
+        })
+};
+
+
+window.onload = () => {
+    const scene = document.querySelector('a-scene');
+
+    // first get current user location
+    return navigator.geolocation.getCurrentPosition(function (position) {
+
+        // than use it to load from remote APIs (E: Foursquare) some places nearby
+        // E: in this case, Foursquare will fetch for 15 places (config at endpoint) around 300meters radius (initial config)
+        loadPlaces(position.coords)
+            .then((places) => {
+                places.forEach((place) => {
+                    const latitude = place.location.lat;
+                    const longitude = place.location.lng;
+
+                    // add place name
+                    // E: this is the a-frame part
+                    const text = document.createElement('a-link');
+                    text.setAttribute('href', 'http://www.example.com/');
+                    text.setAttribute('title', place.name);
+
+                    //E: the following, gps-entity-place, is a custom component
+                    text.setAttribute('gps-entity-place', `latitude: ${latitude}; longitude: ${longitude};`);
+                    text.setAttribute('scale', '20 20 20');
+
+                    text.addEventListener('loaded', () => {
+                        window.dispatchEvent(new CustomEvent('gps-entity-place-loaded'))
+                    });
+
+                    scene.appendChild(text);
+                });
+            })
+    },
+        (err) => console.error('Error in retrieving position', err),
+        {
+            enableHighAccuracy: true,
+            maximumAge: 0,
+            timeout: 27000,
+        }
+    );
+};