add osm3d map type

src/components/street-geo.js

@@ -16,7 +16,7 @@ AFRAME.registerComponent('street-geo', {
     maps: {
       type: 'string',
       default: 'google3d',
-      oneOf: ['google3d', 'mapbox2d']
+      oneOf: ['google3d', 'mapbox2d', 'osm3d']
     }
   },
   init: function () {
@@ -51,6 +51,8 @@ AFRAME.registerComponent('street-geo', {
         // create Map element and save a link to it in this[mapType]
         if (!this.isAR) {
           this[mapType + 'Create']();
+          document.getElementById('map-data-attribution').style.visibility =
+            'visible';
         }
       } else if (
         data.maps === mapType &&
@@ -64,9 +66,8 @@ AFRAME.registerComponent('street-geo', {
         // remove element from DOM and from this object
         this.el.removeChild(this[mapType]);
         this[mapType] = null;
-        if (mapType === 'google3d') {
-          document.getElementById('map-data-attribution').style.visibility =
-            'hidden';
+        if (mapType === 'osm3d') {
+          this.el.removeChild(this['osm3dBuilding']);
         }
       }
     }
@@ -98,7 +99,7 @@ AFRAME.registerComponent('street-geo', {
     mapbox2dElement.setAttribute('data-ignore-raycaster', '');
     el.appendChild(mapbox2dElement);
     this['mapbox2d'] = mapbox2dElement;
-    document.getElementById('map-data-attribution').style.visibility = 'hidden';
+    document.getElementById('map-copyright').textContent = 'MapBox';
   },
   google3dCreate: function () {
     const data = this.data;
@@ -141,8 +142,6 @@ AFRAME.registerComponent('street-geo', {
       google3dElement.setAttribute('data-ignore-raycaster', '');
       el.appendChild(google3dElement);
       self['google3d'] = google3dElement;
-      document.getElementById('map-data-attribution').style.visibility =
-        'visible';
     };
 
     // check whether the library has been imported. Download if not
@@ -176,5 +175,77 @@ AFRAME.registerComponent('street-geo', {
     this.mapbox2d.setAttribute('mapbox', {
       center: `${data.longitude}, ${data.latitude}`
     });
+  },
+  osm3dCreate: function () {
+    const data = this.data;
+    const el = this.el;
+    const self = this;
+
+    const createOsm3dElement = () => {
+      const osm3dElement = document.createElement('a-entity');
+      osm3dElement.setAttribute('data-layer-name', 'OpenStreetMap 2D Tiles');
+      osm3dElement.setAttribute('osm-tiles', {
+        lon: data.longitude,
+        lat: data.latitude,
+        radius_m: 2000,
+        trackId: 'camera',
+        url: 'https://tile.openstreetmap.org/'
+      });
+      osm3dElement.setAttribute('rotation', '-90 -90 0');
+      osm3dElement.setAttribute('data-no-pause', '');
+      osm3dElement.classList.add('autocreated');
+      osm3dElement.setAttribute('data-ignore-raycaster', '');
+
+      const osm3dBuildingElement = document.createElement('a-entity');
+      osm3dBuildingElement.setAttribute(
+        'data-layer-name',
+        'OpenStreetMap 3D Buildings'
+      );
+      osm3dBuildingElement.setAttribute('osm-geojson', {
+        lon: data.longitude,
+        lat: data.latitude,
+        radius_m: 500,
+        trackId: 'camera'
+      });
+      osm3dBuildingElement.setAttribute('rotation', '0 -90 0');
+      osm3dBuildingElement.setAttribute('data-no-pause', '');
+      osm3dBuildingElement.classList.add('autocreated');
+      osm3dBuildingElement.setAttribute('data-ignore-raycaster', '');
+
+      if (AFRAME.INSPECTOR && AFRAME.INSPECTOR.opened) {
+        // emit play event to start loading tiles in Editor mode
+        osm3dElement.addEventListener(
+          'loaded',
+          () => {
+            osm3dElement.play();
+            osm3dBuildingElement.play();
+          },
+          { once: true }
+        );
+      }
+      el.appendChild(osm3dElement);
+      el.appendChild(osm3dBuildingElement);
+
+      self['osm3d'] = osm3dElement;
+      self['osm3dBuilding'] = osm3dBuildingElement;
+      document.getElementById('map-copyright').textContent = 'OpenStreetMap';
+    };
+
+    // check whether the library has been imported. Download if not
+    if (AFRAME.components['osm-tiles']) {
+      createOsm3dElement();
+    } else {
+      loadScript(
+        new URL('/src/lib/osm4vr.min.js', import.meta.url),
+        createOsm3dElement
+      );
+    }
+  },
+  osm3dUpdate: function () {
+    const data = this.data;
+    this.osm3d.setAttribute('osm-tiles', {
+      lon: data.longitude,
+      lat: data.latitude
+    });
   }
 });

src/json-utils_1.1.js

@@ -68,7 +68,7 @@ function getElementData(entity) {
     return;
   }
   // node id's that should save without child nodes
-  const skipChildrenNodes = ['environment'];
+  const skipChildrenNodes = ['environment', 'reference-layers'];
   const elementTree = getAttributes(entity);
   const children = entity.childNodes;
   if (children.length && !skipChildrenNodes.includes(elementTree.id)) {

src/viewer-styles.css

@@ -23,7 +23,7 @@ body {
 	position: absolute;
 	bottom: 0;
 	left: 0;
-	font-size: 10px;
+	font-size: 12px;
 	background-color: rgba(0, 0, 0, 0.3);
 	color: #bebebe;
 	z-index: 1;
@@ -32,14 +32,13 @@ body {
 #map-logo {
 	display: inline;
 	font-style: normal;
-	font-size: 10px;
-	line-height: 10px;
+	font-size: 12px;
 	color: #bebebe;
 }
 
 #map-copyright {
 	display: inline-block;
-	line-height: 10px;
+	line-height: 12px;
 	color: #bebebe;
 
 }