diff --git a/index.html b/index.html
index 81a17cc..e66f2fb 100644
--- a/index.html
+++ b/index.html
@@ -1,25 +1,18 @@
-
-
-
-
-
- GeoAR.js demo
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ AR.js Peakfinder (2D - no elevation)
+
+
+
+
+
+
+
+
+
-
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/index.js b/index.js
index 22ca83b..9041bf7 100644
--- a/index.js
+++ b/index.js
@@ -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);
- });
-}
\ No newline at end of file
+ }
+});
\ No newline at end of file