don't store geo coords in metadata. Store it in street-geo

3DStreet · Jun 5, 2024 · 2a04971 · 2a04971
1 parent 43d7714
commit 2a04971
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 74 deletions.
diff --git a/src/components/street-geo.js b/src/components/street-geo.js
@@ -1,5 +1,6 @@
 /* global AFRAME */
 import { firebaseConfig } from '../editor/services/firebase.js';
+import { loadScript } from '../utils.js';
 
 const MAPBOX_ACCESS_TOKEN_VALUE =
   'pk.eyJ1Ijoia2llcmFuZmFyciIsImEiOiJjazB0NWh2YncwOW9rM25sd2p0YTlxemk2In0.mLl4sNGDFbz_QXk0GIK02Q';
@@ -76,24 +77,36 @@ AFRAME.registerComponent('street-geo', {
     const data = this.data;
     const el = this.el;
 
-    const google3dElement = document.createElement('a-entity');
-    google3dElement.setAttribute('data-no-pause', '');
-    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: firebaseConfig.apiKey,
-      geoTransform: 'WGS84Cartesian',
-      maximumSSE: 48,
-      maximumMem: 400,
-      cameraEl: '#camera'
-    });
-    google3dElement.classList.add('autocreated');
-    google3dElement.setAttribute('data-ignore-raycaster', '');
-    el.appendChild(google3dElement);
-    return google3dElement;
+    const create3DtilesElement = () => {
+      const google3dElement = document.createElement('a-entity');
+      google3dElement.setAttribute('data-no-pause', '');
+      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: firebaseConfig.apiKey,
+        geoTransform: 'WGS84Cartesian',
+        maximumSSE: 16,
+        maximumMem: 400,
+        cameraEl: '#camera'
+      });
+      google3dElement.classList.add('autocreated');
+      google3dElement.setAttribute('data-ignore-raycaster', '');
+      el.appendChild(google3dElement);
+      return google3dElement;
+    };
+
+    // check whether the library has been imported. Download if not
+    if (AFRAME.components['loader-3dtiles']) {
+      return create3DtilesElement();
+    } else {
+      return loadScript(
+        new URL('/src/lib/aframe-loader-3dtiles-component.js', import.meta.url),
+        create3DtilesElement
+      );
+    }
   },
   google3dUpdate: function () {
     const data = this.data;

diff --git a/src/editor/components/components/AddLayerPanel/createLayerFunctions.js b/src/editor/components/components/AddLayerPanel/createLayerFunctions.js
@@ -1,4 +1,5 @@
 import Events from '../../../lib/Events';
+import { loadScript, roundCoord } from '../../../../../src/utils.js';
 
 function createSvgExtrudedEntity() {
   // This component accepts a svgString and creates a new entity with geometry extruded
@@ -30,12 +31,13 @@ function createMapbox() {
   const geoLayer = document.getElementById('reference-layers');
   let latitude = 0;
   let longitude = 0;
-  // get coordinate data in this format: {latitude: ..., longitude: ...}
-  const coord = AFRAME.scenes[0].getAttribute('metadata')['coord'];
+  const streetGeo = document
+    .getElementById('reference-layers')
+    ?.getAttribute('street-geo');
 
-  if (coord) {
-    latitude = roundCoord(parseFloat(coord.latitude));
-    longitude = roundCoord(parseFloat(coord.longitude));
+  if (streetGeo && streetGeo['latitude'] && streetGeo['longitude']) {
+    latitude = roundCoord(parseFloat(streetGeo['latitude']));
+    longitude = roundCoord(parseFloat(streetGeo['longitude']));
   }
 
   geoLayer.setAttribute(
@@ -70,22 +72,6 @@ function createStreetmixStreet() {
   }
 }
 
-function loadScript(url, callback) {
-  const script = document.createElement('script');
-  script.type = 'text/javascript';
-  script.src = url;
-
-  script.onload = function () {
-    callback();
-  };
-
-  document.head.appendChild(script);
-}
-
-const roundCoord = (num) => {
-  return Math.round(num * 1e7) / 1e7;
-};
-
 function create3DTiles() {
   // This code snippet adds an entity to load and display 3d tiles from
   // Google Maps Tiles API 3D Tiles endpoint. This will break your scene
@@ -96,13 +82,14 @@ function create3DTiles() {
     let latitude = 0;
     let longitude = 0;
     let elevation = 0;
-    // get coordinate data in this format: {latitude: ..., longitude: ..., elevation: ...}
-    const coord = AFRAME.scenes[0].getAttribute('metadata')['coord'];
-
-    if (coord) {
-      latitude = roundCoord(parseFloat(coord.latitude));
-      longitude = roundCoord(parseFloat(coord.longitude));
-      elevation = parseFloat(coord.elevation) || 0;
+    const streetGeo = document
+      .getElementById('reference-layers')
+      ?.getAttribute('street-geo');
+
+    if (streetGeo && streetGeo['latitude'] && streetGeo['longitude']) {
+      latitude = roundCoord(parseFloat(streetGeo['latitude']));
+      longitude = roundCoord(parseFloat(streetGeo['longitude']));
+      elevation = parseFloat(streetGeo['elevation']) || 0;
     }
 
     geoLayer.setAttribute(

diff --git a/src/editor/components/modals/GeoModal/GeoModal.component.jsx b/src/editor/components/modals/GeoModal/GeoModal.component.jsx
@@ -13,6 +13,7 @@ import {
   Autocomplete
 } from '@react-google-maps/api';
 import GeoImg from '../../../../../ui_assets/geo.png';
+import { roundCoord } from '../../../../../src/utils.js';
 
 const GeoModal = ({ isOpen, onClose }) => {
   const { isLoaded } = useJsApiLoader({
@@ -26,19 +27,16 @@ const GeoModal = ({ isOpen, onClose }) => {
   const [elevation, setElevation] = useState(10);
   const [autocomplete, setAutocomplete] = useState(null);
 
-  const roundCoord = (num) => {
-    return Math.round(num * 1e7) / 1e7;
-  };
-
   useEffect(() => {
     if (isOpen) {
-      // get coordinate data in this format: {latitude: ..., longitude: ..., elevation: ...}
-      const metadata = AFRAME.scenes[0].getAttribute('metadata');
-      if (metadata && metadata['coord']) {
-        const coord = metadata['coord'];
-        const lat = roundCoord(parseFloat(coord.latitude));
-        const lng = roundCoord(parseFloat(coord.longitude));
-        const elevation = parseFloat(coord.elevation) || 0;
+      const streetGeo = document
+        .getElementById('reference-layers')
+        ?.getAttribute('street-geo');
+
+      if (streetGeo && streetGeo['latitude'] && streetGeo['longitude']) {
+        const lat = roundCoord(parseFloat(streetGeo['latitude']));
+        const lng = roundCoord(parseFloat(streetGeo['longitude']));
+        const elevation = parseFloat(streetGeo['elevation']) || 0;
 
         if (!isNaN(lat) && !isNaN(lng)) {
           setMarkerPosition({ lat, lng });
@@ -105,11 +103,6 @@ const GeoModal = ({ isOpen, onClose }) => {
   const onSaveHandler = () => {
     const latitude = markerPosition.lat;
     const longitude = markerPosition.lng;
-    AFRAME.scenes[0].setAttribute('metadata', 'coord', {
-      latitude: latitude,
-      longitude: longitude,
-      elevation: elevation
-    });
     const geoLayer = document.getElementById('reference-layers');
     geoLayer.setAttribute(
       'street-geo',

diff --git a/src/json-utils_1.1.js b/src/json-utils_1.1.js
@@ -35,11 +35,6 @@ const getCurrentSceneTitle = () => {
 };
 STREET.utils.getCurrentSceneTitle = getCurrentSceneTitle;
 
-const getGeoData = () => {
-  const currentGeoCoord = AFRAME.scenes[0].getAttribute('metadata').coord;
-  return currentGeoCoord;
-};
-
 /*
 Takes one or more elements (from a DOM queryselector call)
 and returns a Javascript object
@@ -49,7 +44,6 @@ function convertDOMElToObject(entity) {
   const environmentElement = document.querySelector('#environment');
   const referenceEntities = document.querySelector('#reference-layers');
   const sceneEntities = [entity, environmentElement, referenceEntities];
-  const geoData = getGeoData();
 
   // get assets url address
   assetsUrl = document.querySelector('street-assets').getAttribute('url');
@@ -64,7 +58,6 @@ function convertDOMElToObject(entity) {
   return {
     title: 'scene',
     version: '1.0',
-    geoData: geoData,
     data: data
   };
 }
@@ -679,11 +672,6 @@ function createElementsFromJSON(streetJSON) {
     AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', sceneTitle);
   }
 
-  const geoData = streetObject['geoData'];
-  if (geoData) {
-    AFRAME.scenes[0].setAttribute('metadata', 'coord', geoData);
-  }
-
   const streetContainerEl = document.getElementById('street-container');
   while (streetContainerEl.firstChild) {
     streetContainerEl.removeChild(streetContainerEl.lastChild);

diff --git a/src/utils.js b/src/utils.js
@@ -0,0 +1,17 @@
+function loadScript(url, callback) {
+  const script = document.createElement('script');
+  script.type = 'text/javascript';
+  script.src = url;
+
+  script.onload = function () {
+    callback();
+  };
+
+  document.head.appendChild(script);
+}
+
+function roundCoord(num) {
+  return Math.round(num * 1e7) / 1e7;
+}
+
+export { loadScript, roundCoord };