Skip to content

Commit

Permalink
Test 1 Redid
Browse files Browse the repository at this point in the history
  • Loading branch information
@MascheroniNatan
MascheroniNatan committed Oct 25, 2024
1 parent 5da6291 commit 578f1ea
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 117 deletions.
39 changes: 16 additions & 23 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,18 @@
<!DOCTYPE html>
<html>

<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>GeoAR.js demo</title>
<!-- Dynamically add places from Javascript -->
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script type='text/javascript' src='aframe-ar-nft.js'></script>
<script type='text/javascript' src='index.js'></script>

</head>

<link rel="stylesheet" href="index.css">


<body style='margin: 0; overflow: hidden;'>
<a-scene vr-mode-ui="enabled: false" embedded
arjs='sourceType: webcam; sourceWidth:1280; sourceHeight:960; displayWidth: 1280; displayHeight: 960; debugUIEnabled: false;'>

<a-camera gps-camera rotation-reader>
</a-camera>
<head>
<title>AR.js Peakfinder (2D - no elevation)</title>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-look-at-component.min.js"></script>
<script type='text/javascript' src='aframe-ar-nft.js'></script>
<script type='text/javascript' src='index.js'></script>
</head>
<body>
<a-scene
vr-mode-ui="enabled: false"
arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false;'
renderer='antialias: true; alpha: true'>
<a-camera gps-projected-camera='simulateLatitude: 51.049; simulateLongitude: -0.723' rotation-reader></a-camera>
<a-entity peakfinder></a-entity>
</a-scene>
</body>
</body>
</html>
153 changes: 59 additions & 94 deletions index.js
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,61 @@
window.onload = () => {
let method = 'dynamic';

// if you want to statically add places, de-comment following line:
// method = 'static';
if (method === 'static') {
let places = staticLoadPlaces();
return renderPlaces(places);
}

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: {
lat: 44.493271, // change here latitude if using static data
lng: 11.326040, // change here longitude if using static data
}
},
];
}

// getting places from REST APIs
function dynamicLoadPlaces(position) {
let params = {
radius: 300, // search places not farther than this value (in meters)
clientId: 'HZIJGI4COHQ4AI45QXKCDFJWFJ1SFHYDFCCWKPIJDWHLVQVZ',
clientSecret: '',
version: '20300101', // foursquare versioning, required but unuseful for this demo
};

// CORS Proxy to avoid CORS problems
// NOTE this no longer works - please replace with your own proxy
let corsProxy = 'https://cors-anywhere.herokuapp.com/';

// Foursquare API
let 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 places API', err);
})
};

function renderPlaces(places) {
let scene = document.querySelector('a-scene');

places.forEach((place) => {
let latitude = place.location.lat;
let longitude = place.location.lng;

// 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', '15 15 15');

text.addEventListener('loaded', () => {
window.dispatchEvent(new CustomEvent('gps-entity-place-loaded', { detail: { component: this.el }}))
AFRAME.registerComponent('peakfinder', {
schema: {
scale: {
type: 'number',
default: 10
}
},

init: function() {
const longitude = -0.72, latitude = 51.05, textScale = this.data.scale * 100;

// Call the Hikar API (OpenStreetMap-based) to get local POIs.
// Note that data is only available for Europe and Turkey.
fetch(`https://www.hikar.org/webapp/map?bbox=${longitude-0.1},${latitude-0.1},${longitude+0.1},${latitude+0.1}&layers=poi&outProj=4326`
)
.then(response => response.json())
.then(json => {
json.features.filter( f => f.properties.natural == 'peak')
.forEach( peak => {
const entity = document.createElement('a-entity');
entity.setAttribute('look-at', '[gps-projected-camera]');
const text = document.createElement('a-text');
text.setAttribute('value', peak.properties.name);
text.setAttribute('scale', {
x: textScale,
y: textScale,
z: textScale
});
text.setAttribute('align', 'center');
text.setAttribute('position', {
x: 0,
y: this.data.scale * 20,
z: 0
});
entity.setAttribute('gps-projected-entity-place', {
latitude: peak.geometry.coordinates[1],
longitude: peak.geometry.coordinates[0]
});
entity.appendChild(text);
const cone = document.createElement('a-cone');
cone.setAttribute('radiusTop', 0.1);
cone.setAttribute('scale', {
x: this.data.scale * 10,
y: this.data.scale * 10,
z: this.data.scale * 10
});
cone.setAttribute('height', 3);
cone.setAttribute('material', { color: 'magenta' } );
entity.appendChild(cone);
entity.setAttribute('position', {
x: 0,
y: peak.geometry.coordinates[2],
z: 0
});

this.el.appendChild(entity);
});
});

scene.appendChild(text);
});
}
}
});

0 comments on commit 578f1ea

Please sign in to comment.