Merge pull request #612 from 3DStreet/add-google-maps-copyright-notice

Add google maps copyright notice
3DStreet · Jun 11, 2024 · ea4fe4d · ea4fe4d
2 parents bb2faf5 + 63598d6
commit ea4fe4d
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -73,6 +73,12 @@
     </button>
   </div>
 
+  <!-- maps copyright start -->
+  <div id="map-data-attribution" style="visibility: hidden;">
+    <div id="map-logo">Map Attribution:</div>
+    <span id="map-copyright"></span>
+  </div>
+
   <!-- <div class="right-fixed">
     <ul class="right-menu">
       <li onclick="buttonScreenshotTock()"> <a class="camera" href="#"> <span> Capture image as PNG </span> <img

diff --git a/src/components/street-geo.js b/src/components/street-geo.js
@@ -30,6 +30,9 @@ AFRAME.registerComponent('street-geo', {
       this[mapType + 'Update'].bind(this);
     }
   },
+  remove: function () {
+    document.getElementById('map-data-attribution').style.visibility = 'hidden';
+  },
   update: function (oldData) {
     const data = this.data;
 
@@ -51,6 +54,10 @@ 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';
+        }
       }
     }
   },
@@ -81,6 +88,7 @@ AFRAME.registerComponent('street-geo', {
     mapbox2dElement.setAttribute('data-ignore-raycaster', '');
     el.appendChild(mapbox2dElement);
     this['mapbox2d'] = mapbox2dElement;
+    document.getElementById('map-data-attribution').style.visibility = 'hidden';
   },
   google3dCreate: function () {
     const data = this.data;
@@ -100,12 +108,15 @@ AFRAME.registerComponent('street-geo', {
         geoTransform: 'WGS84Cartesian',
         maximumSSE: 16,
         maximumMem: 400,
-        cameraEl: '#camera'
+        cameraEl: '#camera',
+        copyrightEl: '#map-copyright'
       });
       google3dElement.classList.add('autocreated');
       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

diff --git a/src/viewer-styles.css b/src/viewer-styles.css
@@ -18,6 +18,32 @@ body {
 	margin: 0;
 }
 
+/* maps copyright notice */
+#map-data-attribution {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	font-size: 10px;
+	background-color: rgba(0, 0, 0, 0.3);
+	color: #bebebe;
+	z-index: 1;
+}
+
+#map-logo {
+	display: inline;
+	font-style: normal;
+	font-size: 10px;
+	line-height: 10px;
+	color: #bebebe;
+}
+
+#map-copyright {
+	display: inline-block;
+	line-height: 10px;
+	color: #bebebe;
+
+}
+
 /* notification hack */
 .notyf__message {
 	font-size: 20px !important;