Street geo

examples/google-tiles/index.html

@@ -100,21 +100,11 @@
         <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;
+        maps: google3d
+      " >      
       </a-entity>
 
       <a-entity id="environment" data-layer-name="Environment" street-environment="preset: day;"></a-entity>

src/components/street-geo.js

@@ -0,0 +1,100 @@
+/* global AFRAME, THREE */
+const MAPBOX_ACCESS_TOKEN_VALUE = 'pk.eyJ1Ijoia2llcmFuZmFyciIsImEiOiJjazB0NWh2YncwOW9rM25sd2p0YTlxemk2In0.mLl4sNGDFbz_QXk0GIK02Q';
+const GOOGLE_API_KEY = 'AIzaSyAQshwLVKTpwTfPJxFEkEzOdP_cgmixTCQ';
+
+
+AFRAME.registerComponent('street-geo', {
+  schema: {
+    longitude: { type: 'number', default: 0 },
+    latitude: { type: 'number', default: 0 },
+    elevation: { type: 'number', default: 0 },
+    maps: { type: 'array', default: [] }
+  },
+
+  update: function (oldData) {
+    const data = this.data;
+    const el = this.el;
+    const mapTypes = {
+    	// <mapName> : <function that creates and return map element>
+    	'mapbox2d': this.createMapbox2dElement.bind(this), 
+    	'google3d': this.createGoogle3dElement.bind(this)
+    };
+    const updatedData = AFRAME.utils.diff(data, oldData);
+
+    for (const mapType in mapTypes) {
+    	const createElementFunction = mapTypes[mapType];
+	    // create Map element and save a link to it in this[mapType]
+	    if (data.maps.includes(mapType) && !this[mapType]) {
+	    	this[mapType] = createElementFunction();
+	    } else if (data.maps.includes(mapType) && (updatedData.longitude || updatedData.latitude)) {
+	    	// 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;
+	    }    	
+    }
+  },
+  createMapbox2dElement: 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;    
+  },
+  createGoogle3dElement: 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: -16.5,
+			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
+  	});
+  },
+  mapbox2dUpdate: function () {
+		const data = this.data;
+		this.mapbox2d.setAttribute('mapbox', {
+			center: `${data.longitude}, ${data.latitude}`
+		});
+
+  },
+  removeChildMaps: function () {
+    const children = this.el.querySelectorAll('.autocreated');
+    children.forEach(child => child.parentNode.removeChild(child));
+  }
+});

src/index.js

@@ -15,6 +15,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: {