fix: layout Google copyright

Greenstand · Jul 8, 2021 · ab1402f · ab1402f
1 parent e683cdf
commit ab1402f
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 21 deletions.
diff --git a/src/map.js b/src/map.js
@@ -882,12 +882,15 @@ var initialize = function() {
 
 
   map = window.L.map('map-canvas', mapOptions);
+  map.attributionControl.setPrefix('YOUR_ATTRIBUTION')
 
   //control
   window.L.control.zoom({
       position: 'bottomright'
   }).addTo(map);
 
+
+
   //google satillite map
 //  window.L.gridLayer.googleMutant({
 //    maxZoom: 20,

diff --git a/src/models/Map.js b/src/models/Map.js
@@ -119,6 +119,7 @@ export default class Map{
     });
     this.control.addTo(this.map);
     this.map.setView(this.initialCenter, this.minZoom);
+    this.map.attributionControl.setPrefix('')
 
     //load google map
     await this.loadGoogleSatellite();
@@ -229,14 +230,14 @@ export default class Map{
     });
 
     log.warn("load google satellite map");
-    this.layerGoogle = new GoogleLayer(
-      'http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{
-        maxZoom: this.maxZoom,
-        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors ',
-        // 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
-        subdomains:['mt0','mt1','mt2','mt3'],
-        zIndex: 0,
-      });
+     this.layerGoogle = new GoogleLayer(
+       'http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{
+         maxZoom: this.maxZoom,
+         attribution: '<a href="HTTP://map.google.com" target=”_blank”>Map data &nbsp; © Google</a> ' +
+          '&nbsp<a href="HTTP://greenstand.org" target=”_blank”>© Greenstand.</a>',
+         subdomains:['mt0','mt1','mt2','mt3'],
+         zIndex: 0,
+       });
     this.layerGoogle.addTo(this.map);
     await new Promise((res, _rej) => {
       this.layerGoogle.once("load", async () => {

diff --git a/src/style.css b/src/style.css
@@ -114,7 +114,20 @@ body {
   background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHN0eWxlPi5zdDB7ZmlsbDojZmZmfTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTMxOS4xIDIxN2MyMC4yIDIwLjIgMTkuOSA1My4yLS42IDczLjdzLTUzLjUgMjAuOC03My43LjZsLTE5MC0xOTBjLTIwLjEtMjAuMi0xOS44LTUzLjIuNy03My43UzEwOSA2LjggMTI5LjEgMjdsMTkwIDE5MHoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzE5LjEgMjkwLjVjMjAuMi0yMC4yIDE5LjktNTMuMi0uNi03My43cy01My41LTIwLjgtNzMuNy0uNmwtMTkwIDE5MGMtMjAuMiAyMC4yLTE5LjkgNTMuMi42IDczLjdzNTMuNSAyMC44IDczLjcuNmwxOTAtMTkweiIvPjwvc3ZnPg==);
 }
 
-/* Customize CSS of leaflet */
+/* Customize CSS of leaflet copyright */
+a {
+  color: #000;
+  cursor: pointer;
+  text-decoration: none;
+  outline: none;
+  margin-right: 5px;
+}
+
+a:hover {
+  color: #1a73e8;
+  text-decoration: none;
+}
+
 .leaflet-control {
   animation-name: slideInFromBottom;
   animation-duration: 1s;
@@ -123,17 +136,15 @@ body {
 .leaflet-control-attribution {
   line-height: 13px;
   float: right;
-  background-color: rgba(255, 255, 255, 0.8);
-  padding-left: 3px;
+  /* padding-left: 3px; */
+  margin-right: 15px;
   display: table-row;
   font-size: 10px;
-  color: #000;
-  background: #fff;
+  /* background: #fff; */
   overflow: hidden;
-  /* position: absolute; */
   bottom: 0;
-  width: 100%;
   z-index: 0;
+  background-color: rgba(255, 255, 255, 0.8);
 }
 
 .leaflet-control-attribution,
@@ -143,22 +154,19 @@ body {
 }
 
 .leaflet-bar {
-  box-shadow: 0 1px 5px rgb(0 0 0 / 65%);
+  /* box-shadow: 0 1px 5px rgb(0 0 0 / 65%); */
+  box-shadow: 0 0px 0px rgb(0 0 0 / 0%);
   border-radius: 4px;
 }
 
 .leaflet-control-zoom-out {
   font: bold 18px 'Lucida Console', Monaco, monospace;
-  /* text-indent: 1px; */
   margin-bottom: 10px;
 }
 
-/* .leaflet-right .leaflet-control {
-  margin-right: 10px;
-}*/
-
 .leaflet-bottom .leaflet-control {
   margin-bottom: 0px;
+  box-shadow: 0 0px 0px rgb(0 0 0 / 0%);
 }
 
 @keyframes slideInFromBottom {