Skip to content

Commit

Permalink
Merge pull request #516 from 3DStreet/street-geo
Browse files Browse the repository at this point in the history
Street geo
  • Loading branch information
kfarr authored May 21, 2024
2 parents ea819af + 6501ff3 commit 913a0ef
Show file tree
Hide file tree
Showing 11 changed files with 271 additions and 17 deletions.
21 changes: 6 additions & 15 deletions examples/google-tiles/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -100,21 +100,12 @@
<a-entity id="rightHand" hand-controls="hand: right" blink-controls="cameraRig: #cameraRig; teleportOrigin: #camera; rotateOnTeleport:false;"></a-entity>
<a-entity id="screenshot" class="no-pause" screentock visible="false"></a-entity>
</a-entity>
<a-entity id="reference-layers" data-layer-name="Reference Layers" data-layer-show-children>
<a-entity
id="tileset"
loader-3dtiles="
url: https://tile.googleapis.com/v1/3dtiles/root.json;
lat: 37.77522354250163;
long: -122.41931773049723;
height: -16.5;
googleApiKey: AIzaSyAQshwLVKTpwTfPJxFEkEzOdP_cgmixTCQ;
geoTransform: WGS84Cartesian;
maximumSSE: 48;
maximumMem: 400;
cameraEl: #camera">
</a-entity>

<a-entity id="reference-layers" data-layer-name="Reference Layers" data-layer-show-children street-geo="
latitude: 37.77522354250163;
longitude: -122.41931773049723;
elevation: 16;
maps: google3d
" >
</a-entity>

<a-entity id="environment" data-layer-name="Environment" street-environment="preset: day;"></a-entity>
Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@
"prefirebase": "cp -R assets public && cp -R ui_assets public && cp index.html public && cp -R dist public",
"prepare": "husky install",
"prepublish": "npm run dist",
"test": "nyc --reporter=lcov --reporter=text mocha --recursive --full-trace test/*.test.js",
"test:watch": "mocha --recursive --full-trace --watch test/*.test.js",
"prettier": "prettier --write 'src/**/*.js' 'src/**/*.jsx'",
"test": "nyc --reporter=lcov --reporter=text mocha --recursive --full-trace",
"test:watch": "mocha --recursive --full-trace --watch",
"deploy": "npm run prefirebase && cd public && firebase deploy --only hosting:app3dstreet",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
Expand Down
14 changes: 14 additions & 0 deletions src/components/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
# Docs for custom A-Frame components used with 3DStreet

## Street-geo component

The components accept longitude, latitude, elevation and an array of map types to indicate which child maps to spawn. Possible values for maps array: 'mapbox2d', 'google3d'.

The component assigns the class 'autocreated' to its child elements. All attribute values can be changed at runtime and the component will update the child elements (map entities) and their corresponding parameters. The 'elevation' attribute is only used for the 'google3d' tiles element for now.

To add support for a new map type, you need to take the following steps:
* add map name to this.mapTypes variable
* add creating function with name: `<mapName>Create`
* add update function with name: `<mapName>Update`

It is assumed that the appropriate libraries for all map types are loaded in advance.
118 changes: 118 additions & 0 deletions src/components/street-geo.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
/* global AFRAME, THREE */
const MAPBOX_ACCESS_TOKEN_VALUE = 'pk.eyJ1Ijoia2llcmFuZmFyciIsImEiOiJjazB0NWh2YncwOW9rM25sd2p0YTlxemk2In0.mLl4sNGDFbz_QXk0GIK02Q';
const GOOGLE_API_KEY = 'AIzaSyAQshwLVKTpwTfPJxFEkEzOdP_cgmixTCQ';

/*
* Street-geo component
*
* the component accept longitude, latitude, elevation and an array of map types to indicate
* which child maps to spawn. Possible values for maps array: 'mapbox2d', 'google3d'.
* The component assigns the class 'autocreated' to its child elements.
* All attribute values can be changed at runtime and the component will update
* the child elements (map entities) and their corresponding parameters.
* The 'elevation' attribute is only used for the 'google3d' tiles element for now.
*
* to add support for a new map type, you need to take the following steps:
* - add map name to this.mapTypes variable
* - add creating function with name: <mapName>Create
* - add update function with name: <mapName>Update
*
* It is assumed that the appropriate libraries for all map types are loaded in advance.
*/
AFRAME.registerComponent('street-geo', {
schema: {
longitude: { type: 'number', default: 0 },
latitude: { type: 'number', default: 0 },
elevation: { type: 'number', default: 0 },
maps: { type: 'array', default: [] }
},
init: function () {
/*
Function names for the given function types must have the following format:
create function: <mapType>Create,
update function: <mapType>Update,
*/
this.mapTypes = ['mapbox2d', 'google3d'];
this.elevationHeightConstant = 32.49158;
},
update: function (oldData) {
const data = this.data;
const el = this.el;

const updatedData = AFRAME.utils.diff(oldData, data);

for (const mapType of this.mapTypes) {
// create map function with name: <mapType>Create
const createMapFunction = this[mapType + 'Create'].bind(this);
if (data.maps.includes(mapType) && !this[mapType]) {
// create Map element and save a link to it in this[mapType]
this[mapType] = createMapFunction();
} else if (data.maps.includes(mapType) && (updatedData.longitude || updatedData.latitude || updatedData.elevation)) {
// call update map function with name: <mapType>Update
this[mapType + 'Update'].bind(this)();
} else if (this[mapType] && !data.maps.includes(mapType)) {
// remove element from DOM and from this object
this.el.removeChild(this[mapType]);
this[mapType] = null;
}
}
},
mapbox2dCreate: function () {
const data = this.data;
const el = this.el;

const mapbox2dElement = document.createElement('a-entity');
mapbox2dElement.setAttribute('data-layer-name', 'Mapbox Satellite Streets');
mapbox2dElement.setAttribute('geometry', 'primitive: plane; width: 512; height: 512;');
mapbox2dElement.setAttribute('material', 'color: #ffffff; shader: flat; side: both; transparent: true;');
//mapbox2dElement.setAttribute('position', '-7 -1 -2');
mapbox2dElement.setAttribute('rotation', '-90 -4.25 0');
mapbox2dElement.setAttribute('anisotropy', '');
mapbox2dElement.setAttribute('mapbox', {
accessToken: MAPBOX_ACCESS_TOKEN_VALUE,
center: `${data.longitude}, ${data.latitude}`,
zoom: 15,
style: 'mapbox://styles/mapbox/satellite-streets-v11',
pxToWorldRatio: 4
});
mapbox2dElement.classList.add('autocreated');
el.appendChild(mapbox2dElement);
return mapbox2dElement;
},
google3dCreate: function () {
const data = this.data;
const el = this.el;

const google3dElement = document.createElement('a-entity');
google3dElement.setAttribute('data-layer-name', 'Google 3D Tiles');
google3dElement.setAttribute('loader-3dtiles', {
url: 'https://tile.googleapis.com/v1/3dtiles/root.json',
long: data.longitude,
lat: data.latitude,
height: data.elevation - this.elevationHeightConstant,
googleApiKey: GOOGLE_API_KEY,
geoTransform: 'WGS84Cartesian',
maximumSSE: 48,
maximumMem: 400,
cameraEl: '#camera'
});
google3dElement.classList.add('autocreated');
el.appendChild(google3dElement);
return google3dElement;
},
google3dUpdate: function () {
const data = this.data;
this.google3d.setAttribute('loader-3dtiles', {
lat: data.latitude,
long: data.longitude,
height: data.elevation - this.elevationHeightConstant,
});
},
mapbox2dUpdate: function () {
const data = this.data;
this.mapbox2d.setAttribute('mapbox', {
center: `${data.longitude}, ${data.latitude}`
});

}
});
1 change: 1 addition & 0 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ require('./components/create-from-json');
require('./components/screentock.js');
require('aframe-atlas-uvs-component');
require('./components/streetplan-loader');
require('./components/street-geo.js');

AFRAME.registerComponent('street', {
schema: {
Expand Down
File renamed without changes.
File renamed without changes.
104 changes: 104 additions & 0 deletions test/browserTests/street-geo-test-bdd.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
describe('street-geo component', function() {
let el;

before((done) => {
const scene = document.createElement('a-scene');
document.body.appendChild(scene);
el = document.createElement('a-entity');
el.setAttribute('id', 'street-geo-test');
el.setAttribute('street-geo', {
longitude: 10,
latitude: 20,
elevation: 30,
maps: 'mapbox2d'
});
scene.appendChild(el);

setTimeout(() => {
done();
}, 500);
});

it('should create a mapbox2d element', () => {
const mapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]');
expect(mapbox2dElement).to.exist;
});

it('should create a google3d element and delete mapbox2d element', (done) => {
const mapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]');
const google3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]');

expect(mapbox2dElement).to.exist;

el.setAttribute('street-geo', 'maps', 'google3d');

setTimeout(() => {
setTimeout(() => {
const updatedMapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]');
const updatedGoogle3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]');

expect(updatedMapbox2dElement).to.not.exist;
expect(updatedGoogle3dElement).to.exist;

done();
});
});
});

it('should create both mapbox2d and google3d elements', (done) => {
el.setAttribute('street-geo', 'maps', 'mapbox2d, google3d');

setTimeout(() => {
setTimeout(() => {
const mapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]');
const google3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]');
expect(mapbox2dElement).to.exist;
expect(google3dElement).to.exist;
done();
});
});
});

it('should delete mapbox2d and google3d elements after setting maps attribute to empty', (done) => {
const mapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]');
const google3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]');

expect(mapbox2dElement).to.exist;
expect(google3dElement).to.exist;

el.setAttribute('street-geo', 'maps', '');

setTimeout(() => {
setTimeout(() => {
const updatedMapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]');
const updatedGoogle3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]');

expect(updatedMapbox2dElement).to.not.exist;
expect(updatedGoogle3dElement).to.not.exist;

done();
});
});
});

it('should update latitude, longitude, and elevation for google3d', (done) => {
el.setAttribute('street-geo', 'maps', 'google3d');
el.setAttribute('street-geo', 'longitude', 40);
el.setAttribute('street-geo', 'latitude', 50);
el.setAttribute('street-geo', 'elevation', 100);

setTimeout(() => {
setTimeout(() => {
const google3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]');
expect(google3dElement).to.exist;

const loader3dtilesAttr = google3dElement.getAttribute('loader-3dtiles');
expect(loader3dtilesAttr.long).to.equal(40);
expect(loader3dtilesAttr.lat).to.equal(50);
expect(loader3dtilesAttr.height).to.equal(100 - 32.49158);

done();
});
});
});
});
26 changes: 26 additions & 0 deletions test/browserTests/street-geo-test.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mocha Tests</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/9.0.2/mocha.min.css">
</head>
<body>
<div id="mocha"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/9.0.2/mocha.min.js"></script>
<script src="https://www.chaijs.com/chai.js"></script>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="/src/lib/aframe-loader-3dtiles-component.js"></script>
<script src="/src/lib/aframe-mapbox-component.min.js"></script>
<script src="/src/components/street-geo.js"></script>

<script type="module">
window.expect = chai.expect;
mocha.setup('bdd');
mocha.run();
</script>

<script type="module" src="/test/browserTests/street-geo-test-bdd.mjs"></script>

</body>
</html>
File renamed without changes.
File renamed without changes.

0 comments on commit 913a0ef

Please sign in to comment.