diff --git a/aframe/examples/click-places/places.js b/aframe/examples/click-places/places.js index a9cbb1ae7c4bef1f8e394c5acdc8a3723353adc9..14ef69bcee6ecba55b9655cd9aa7399880ce87f8 100644 --- a/aframe/examples/click-places/places.js +++ b/aframe/examples/click-places/places.js @@ -1,28 +1,60 @@ -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'; +window.onload = () => { + let method = 'dynamic'; + + // if you want to statically add places, de-comment following line + // method = 'static'; + + if (method === 'static') { + // setTimeout is a temporary fix + setTimeout(() => { + let places = staticLoadPlaces(); + renderPlaces(places); + }, 3000); + } + + if (method !== 'static') { + + // first get current user location + return navigator.geolocation.getCurrentPosition(function (position) { + + // than use it to load from remote APIs some places nearby + dynamicLoadPlaces(position.coords) + .then((places) => { + renderPlaces(places); + }) + }, + (err) => console.error('Error in retrieving position', err), + { + enableHighAccuracy: true, + maximumAge: 0, + timeout: 27000, + } + ); + } +}; - const PLACES = [ +function staticLoadPlaces() { + return [ { name: "Your place name", location: { lat: 0, // add here latitude if using static data lng: 0, // add here longitude if using static data - } }, + { + name: 'Another place name', + location: { + lat: 0, + lng: 0, + } + } ]; - - if (method === 'api') { - return loadPlaceFromAPIs(coords); - } - - return Promise.resolve(PLACES); -}; +} // getting places from REST APIs -function loadPlaceFromAPIs(position) { - const params = { +function dynamicLoadPlaces(position) { + let params = { radius: 300, // search places not farther than this value (in meters) clientId: 'HZIJGI4COHQ4AI45QXKCDFJWFJ1SFHYDFCCWKPIJDWHLVQVZ', clientSecret: '', @@ -30,10 +62,10 @@ function loadPlaceFromAPIs(position) { }; // CORS Proxy to avoid CORS problems - const corsProxy = 'https://cors-anywhere.herokuapp.com/'; + let corsProxy = 'https://cors-anywhere.herokuapp.com/'; // Foursquare API - const endpoint = `${corsProxy}https://api.foursquare.com/v2/venues/search?intent=checkin + let endpoint = `${corsProxy}https://api.foursquare.com/v2/venues/search?intent=checkin &ll=${position.latitude},${position.longitude} &radius=${params.radius} &client_id=${params.clientId} @@ -52,64 +84,83 @@ function loadPlaceFromAPIs(position) { }) }; +function renderPlaces(places) { + let scene = document.querySelector('a-scene'); + + places.forEach((place) => { + const latitude = place.location.lat; + const longitude = place.location.lng; + + // add place icon + const icon = document.createElement('a-image'); + icon.setAttribute('gps-entity-place', `latitude: ${latitude}; longitude: ${longitude}`); + icon.setAttribute('name', place.name); + icon.setAttribute('src', '../assets/map-marker.png'); + + // for debug purposes, just show in a bigger scale, otherwise I have to personally go on places... + icon.setAttribute('scale', '20, 20'); + + icon.addEventListener('loaded', () => window.dispatchEvent(new CustomEvent('gps-entity-place-loaded'))); + + const clickListener = function (ev) { + ev.stopPropagation(); + ev.preventDefault(); + + const name = ev.target.getAttribute('name'); + + const el = ev.detail.intersection && ev.detail.intersection.object.el; + + if (el && el === ev.target) { + const label = document.createElement('span'); + const container = document.createElement('div'); + container.setAttribute('id', 'place-label'); + label.innerText = name; + container.appendChild(label); + document.body.appendChild(container); + + setTimeout(() => { + container.parentElement.removeChild(container); + }, 1500); + } + }; + + icon.addEventListener('click', clickListener); + + scene.appendChild(icon); + }); +} window.onload = () => { - const scene = document.querySelector('a-scene'); - - // first get current user location - return navigator.geolocation.getCurrentPosition(function (position) { - - // then use it to load from remote APIs some places nearby - loadPlaces(position.coords) - .then((places) => { - places.forEach((place) => { - const latitude = place.location.lat; - const longitude = place.location.lng; - - // add place icon - const icon = document.createElement('a-image'); - icon.setAttribute('gps-entity-place', `latitude: ${latitude}; longitude: ${longitude}`); - icon.setAttribute('name', place.name); - icon.setAttribute('src', '../assets/map-marker.png'); - - // for debug purposes, just show in a bigger scale, otherwise I have to personally go on places... - icon.setAttribute('scale', '20, 20'); - - icon.addEventListener('loaded', () => window.dispatchEvent(new CustomEvent('gps-entity-place-loaded'))); - - const clickListener = function(ev) { - ev.stopPropagation(); - ev.preventDefault(); - - const name = ev.target.getAttribute('name'); - - const el = ev.detail.intersection && ev.detail.intersection.object.el; - - if (el && el === ev.target) { - const label = document.createElement('span'); - const container = document.createElement('div'); - container.setAttribute('id', 'place-label'); - label.innerText = name; - container.appendChild(label); - document.body.appendChild(container); - - setTimeout(() => { - container.parentElement.removeChild(container); - }, 1500); - } - }; - - icon.addEventListener('click', clickListener); - - scene.appendChild(icon); - }); - }) - }, - (err) => console.error('Error in retrieving position', err), - { - enableHighAccuracy: true, - maximumAge: 0, - timeout: 27000, - } - ); + let method = 'dynamic'; + + // if you want to statically add places, de-comment following line + method = 'static'; + + if (method === 'static') { + // setTimeout is a temporary fix + setTimeout(() => { + let places = staticLoadPlaces(); + renderPlaces(places); + }, 3000); + } + + if (method !== 'static') { + + // first get current user location + return navigator.geolocation.getCurrentPosition(function (position) { + + // than use it to load from remote APIs some places nearby + dynamicLoadPlaces(position.coords) + .then((places) => { + renderPlaces(places); + }) + }, + (err) => console.error('Error in retrieving position', err), + { + enableHighAccuracy: true, + maximumAge: 0, + timeout: 27000, + } + ); + } }; diff --git a/aframe/examples/places-name/places.js b/aframe/examples/places-name/places.js index 8db8526b6f330451182ac2468322cc0aee25206d..55c3422598f2ee612bdb74d264b0184e864a73ab 100644 --- a/aframe/examples/places-name/places.js +++ b/aframe/examples/places-name/places.js @@ -1,8 +1,41 @@ -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 = [ +window.onload = () => { + let method = 'dynamic'; + + // if you want to statically add places, de-comment following line + // method = 'static'; + + if (method === 'static') { + // setTimeout is a temporary fix + setTimeout(() => { + let places = staticLoadPlaces(); + renderPlaces(places); + }, 3000); + } + + if (method !== 'static') { + + // first get current user location + return navigator.geolocation.getCurrentPosition(function (position) { + + // than use it to load from remote APIs some places nearby + dynamicLoadPlaces(position.coords) + .then((places) => { + renderPlaces(places); + }) + }, + (err) => console.error('Error in retrieving position', err), + { + enableHighAccuracy: true, + maximumAge: 0, + timeout: 27000, + } + ); + } +}; + +function staticLoadPlaces() { + return [ { name: "Your place name", location: { @@ -10,29 +43,30 @@ const loadPlaces = function (coords) { lng: 0, // add here longitude if using static data } }, + { + name: 'Another place name', + location: { + lat: 0, + lng: 0, + } + } ]; - - if (method === 'api') { - return loadPlaceFromAPIs(coords); - } - - return Promise.resolve(PLACES); -}; +} // getting places from REST APIs -function loadPlaceFromAPIs(position) { - const params = { +function dynamicLoadPlaces(position) { + let params = { radius: 300, // search places not farther than this value (in meters) clientId: 'HZIJGI4COHQ4AI45QXKCDFJWFJ1SFHYDFCCWKPIJDWHLVQVZ', - clientSecret: '2VBFT2H3OWI03RY5TDIMANCX4ATUTRYSXWZJHUVYGRWEZQ24', + clientSecret: '', version: '20300101', // foursquare versioning, required but unuseful for this demo }; // CORS Proxy to avoid CORS problems - const corsProxy = 'https://cors-anywhere.herokuapp.com/'; + let corsProxy = 'https://cors-anywhere.herokuapp.com/'; // Foursquare API - const endpoint = `${corsProxy}https://api.foursquare.com/v2/venues/search?intent=checkin + let endpoint = `${corsProxy}https://api.foursquare.com/v2/venues/search?intent=checkin &ll=${position.latitude},${position.longitude} &radius=${params.radius} &client_id=${params.clientId} @@ -51,40 +85,24 @@ function loadPlaceFromAPIs(position) { }) }; +function renderPlaces(places) { + let scene = document.querySelector('a-scene'); -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 some places nearby - loadPlaces(position.coords) - .then((places) => { - places.forEach((place) => { - const latitude = place.location.lat; - const longitude = place.location.lng; + places.forEach((place) => { + let latitude = place.location.lat; + let longitude = place.location.lng; - // add place name - const text = document.createElement('a-link'); - text.setAttribute('gps-entity-place', `latitude: ${latitude}; longitude: ${longitude};`); - text.setAttribute('title', place.name); - text.setAttribute('href', 'http://www.example.com/'); - text.setAttribute('scale', '20 20 20'); + // add place name + let text = document.createElement('a-link'); + text.setAttribute('gps-entity-place', `latitude: ${latitude}; longitude: ${longitude};`); + text.setAttribute('title', place.name); + text.setAttribute('href', 'http://www.example.com/'); + text.setAttribute('scale', '20 20 20'); - text.addEventListener('loaded', () => { - window.dispatchEvent(new CustomEvent('gps-entity-place-loaded')) - }); + 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, - } - ); -}; + scene.appendChild(text); + }); +}