Street geo editor

package.json

@@ -24,6 +24,7 @@
   "homepage": "https://github.com/3dstreet/3dstreet/",
   "license": "AGPLv3",
   "dependencies": {
+    "@react-google-maps/api": "^2.19.3",
     "aframe-atlas-uvs-component": "^3.0.0",
     "classnames": "^2.3.2",
     "clipboard": "^2.0.11",

src/components/street-geo.js

@@ -67,6 +67,7 @@ AFRAME.registerComponent('street-geo', {
       pxToWorldRatio: 4
     });
     mapbox2dElement.classList.add('autocreated');
+    mapbox2dElement.setAttribute('data-ignore-raycaster', '');
     el.appendChild(mapbox2dElement);
     return mapbox2dElement;
   },
@@ -75,6 +76,7 @@ AFRAME.registerComponent('street-geo', {
     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',
@@ -88,6 +90,7 @@ AFRAME.registerComponent('street-geo', {
       cameraEl: '#camera'
     });
     google3dElement.classList.add('autocreated');
+    google3dElement.setAttribute('data-ignore-raycaster', '');
     el.appendChild(google3dElement);
     return google3dElement;
   },

src/editor/components/Main.js

@@ -1,4 +1,4 @@
-import { Button, HelpButton, Logo, ZoomButtons } from './components';
+import { Button, HelpButton, GeoPanel, Logo, ZoomButtons } from './components';
 import { CameraToolbar } from './viewport';
 import { Compass32Icon } from '../icons';
 import { Component } from 'react';
@@ -13,6 +13,7 @@ import TransformToolbar from './viewport/TransformToolbar';
 import { injectCSS } from '../lib/utils';
 import { SignInModal } from './modals/SignInModal';
 import { ProfileModal } from './modals/ProfileModal';
+import { GeoModal } from './modals/GeoModal';
 import { ScenesModal } from './modals/ScenesModal';
 import { SceneEditTitle } from './components/SceneEditTitle';
 import { AddLayerButton } from './components/AddLayerButton';
@@ -35,6 +36,7 @@ export default class Main extends Component {
       isSignInModalOpened: false,
       isProfileModalOpened: false,
       isAddLayerPanelOpen: false,
+      isGeoModalOpened: false,
       isScenesModalOpened: !isStreetLoaded,
       sceneEl: AFRAME.scenes[0],
       visible: {
@@ -114,6 +116,9 @@ export default class Main extends Component {
     Events.on('openprofilemodal', () => {
       this.setState({ isProfileModalOpened: true });
     });
+    Events.on('opengeomodal', () => {
+      this.setState({ isGeoModalOpened: true });
+    });
   }
 
   onCloseHelpModal = (value) => {
@@ -149,6 +154,10 @@ export default class Main extends Component {
     this.setState({ isProfileModalOpened: false });
   };
 
+  onCloseGeoModal = () => {
+    this.setState({ isGeoModalOpened: false });
+  };
+
   toggleEdit = () => {
     if (this.state.inspectorEnabled) {
       AFRAME.INSPECTOR.close();
@@ -201,6 +210,7 @@ export default class Main extends Component {
     const scene = this.state.sceneEl;
     const isEditor = !!this.state.inspectorEnabled;
     const sceneData = AFRAME.scenes[0].getAttribute('metadata', 'sceneTitle');
+    const isProUser = currentUser && currentUser.isBeta;
 
     return (
       <div>
@@ -248,6 +258,10 @@ export default class Main extends Component {
           isOpen={this.state.isProfileModalOpened}
           onClose={this.onCloseProfileModal}
         />
+        <GeoModal
+          isOpen={this.state.isGeoModalOpened}
+          onClose={this.onCloseGeoModal}
+        />
         <ModalTextures
           isOpen={this.state.isModalTexturesOpen}
           selectedTexture={this.state.selectedTexture}
@@ -258,6 +272,11 @@ export default class Main extends Component {
             <HelpButton />
           </div>
         )}
+        {isProUser && this.state.inspectorEnabled && (
+          <div id="geo">
+            <GeoPanel />
+          </div>
+        )}
         {this.state.inspectorEnabled && (
           <div id="scene-title">
             <SceneEditTitle sceneData={sceneData} />
@@ -273,7 +292,7 @@ export default class Main extends Component {
             <Compass32Icon />
           </Button>
         )}
-        {currentUser && currentUser.isBeta && this.state.inspectorEnabled && (
+        {isProUser && this.state.inspectorEnabled && (
           <div id="layerWithCategory">
             <AddLayerButton onClick={this.toggleAddLayerPanel} />
           </div>

src/editor/components/components/AddLayerPanel/createLayerFunctions.js

@@ -27,22 +27,24 @@ function createSvgExtrudedEntity() {
 function createMapbox() {
   // This component accepts a long / lat and renders a plane with dimensions that
   // (should be) at a correct scale.
-  const newEl = document.createElement('a-entity');
-  newEl.setAttribute('geometry', 'primitive: plane; width: 512; height: 512;');
-  newEl.setAttribute('rotation', '-90 0 0');
-  newEl.setAttribute(
-    'mapbox',
-    `center: -122.417490, 37.765190; 
-		zoom: 18; 
-		accessToken: pk.eyJ1Ijoia2llcmFuZmFyciIsImEiOiJjazB0NWh2YncwOW9rM25sd2p0YTlxemk2In0.mLl4sNGDFbz_QXk0GIK02Q; 
-		style: mapbox://styles/mapbox/satellite-streets-v11; 
-		pxToWorldRatio: 4;`
+  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'];
+
+  if (coord) {
+    latitude = roundToSix(parseFloat(coord.latitude));
+    longitude = roundToSix(parseFloat(coord.longitude));
+  }
+
+  geoLayer.setAttribute(
+    'street-geo',
+    `
+    latitude: ${latitude}; longitude: ${longitude}; maps: mapbox2d
+    `
   );
-  newEl.setAttribute('data-layer-name', 'Aerial Imagery • Mapbox Satellite');
-  const parentEl = document.querySelector('#reference-layers');
-  parentEl.appendChild(newEl);
-  // update sceneGraph
-  Events.emit('entitycreated', newEl);
+  Events.emit('entitycreated', geoLayer);
 }
 
 function createStreetmixStreet() {
@@ -80,38 +82,42 @@ function loadScript(url, callback) {
   document.head.appendChild(script);
 }
 
+const roundToSix = (num) => {
+  return Math.round(num * 1e6) / 1e6;
+};
+
 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
+  // and you cannot save it yet, so beware before testing.
+
   const create3DtilesElement = () => {
-    const newEl = document.createElement('a-entity');
-    newEl.setAttribute('data-no-pause', '');
-    newEl.setAttribute('id', 'tileset');
-    newEl.setAttribute('data-layer-name', 'Aerial Imagery • Google 3D Tiles');
-    newEl.setAttribute(
-      'loader-3dtiles',
+    const geoLayer = document.getElementById('reference-layers');
+    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 = roundToSix(parseFloat(coord.latitude));
+      longitude = roundToSix(parseFloat(coord.longitude));
+      elevation = parseFloat(coord.elevation) || 0;
+    }
+
+    geoLayer.setAttribute(
+      'street-geo',
       `
-		    lat: 37.77522354250163;
-		    long: -122.41931773049723;
-		    height: -16.5;
-		    url: https://tile.googleapis.com/v1/3dtiles/root.json; 
-		    googleApiKey: AIzaSyAQshwLVKTpwTfPJxFEkEzOdP_cgmixTCQ; 
-		    geoTransform: WGS84Cartesian; 
-		    maximumSSE: 48; 
-		    maximumMem: 400;
-		    cameraEl: #camera
-		`
+      latitude: ${latitude}; longitude: ${longitude}; elevation: ${elevation}; maps: google3d
+    `
     );
+    // this line needs to load tiles from the Editor. Need to delete after updating aframe-loaders-3dtiles-component
+    geoLayer.play();
 
-    const refLayers = document.querySelector('#reference-layers');
-    // remove all reference elements
-    while (refLayers.firstChild) {
-      refLayers.removeChild(refLayers.firstChild);
-    }
-    refLayers.appendChild(newEl);
-    document.querySelector('#tileset').play();
     // update sceneGraph
-    Events.emit('entitycreated', newEl);
+    Events.emit('entitycreated', geoLayer);
   };
-  // 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 and you cannot save it yet, so beware before testing.
+
   if (AFRAME.components['loader-3dtiles']) {
     create3DtilesElement();
   } else {

src/editor/components/components/GeoPanel/GeoPanel.component.jsx

@@ -0,0 +1,21 @@
+import GeoImg from '../../../../../ui_assets/geo.png';
+import styles from './GeoPanel.module.scss';
+import Events from '../../../lib/Events';
+
+/**
+ * GeoPanel component.
+ *
+ * @author Rostyslav Nahornyi
+ * @category Components.
+ */
+const GeoPanel = () => {
+  const onClick = () => Events.emit('opengeomodal');
+
+  return (
+    <div className={styles.geo}>
+      <img src={GeoImg} onClick={onClick} alt="geo" />
+      <p>San Francisco, California at Market and Van Ness Streets</p>
+    </div>
+  );
+};
+export { GeoPanel };

src/editor/components/components/GeoPanel/GeoPanel.module.scss

@@ -0,0 +1,17 @@
+@use '../../../style/variables.scss';
+
+.geo {
+  display: flex;
+  column-gap: 24px;
+  position: absolute;
+  bottom: 32px;
+  left: 32px;
+
+  & > img {
+    cursor: pointer;
+  }
+
+  & > p {
+    font-size: 16px !important;
+  }
+}

src/editor/components/components/GeoPanel/index.js

@@ -0,0 +1 @@
+export { GeoPanel } from './GeoPanel.component.jsx';

src/editor/components/components/HelpButton/HelpButton.module.scss

@@ -5,7 +5,7 @@
     position: absolute;
     left: 32px;
     border: unset;
-    bottom: 31px;
+    bottom: 32px;
     border-radius: 50%;
     width: 43px;
     height: 43px;

src/editor/components/components/index.js

@@ -11,3 +11,4 @@ export { ScreenshotButton } from './ScreenshotButton';
 export { ProfileButton } from './ProfileButton';
 export { SceneCard } from './SceneCard';
 export { SceneEditTitle } from './SceneEditTitle';
+export { GeoPanel } from './GeoPanel';