From 815bbb48fe3e7d9f337af53d6174b40ec52ce48a Mon Sep 17 00:00:00 2001
From: vjrj <vjrj@ourproject.org>
Date: Sun, 4 Mar 2018 10:44:26 +0100
Subject: [PATCH] Added opacity to maps

---
 imports/ui/components/Maps/DefMapLayers.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/imports/ui/components/Maps/DefMapLayers.js b/imports/ui/components/Maps/DefMapLayers.js
index 33da655..0db329c 100644
--- a/imports/ui/components/Maps/DefMapLayers.js
+++ b/imports/ui/components/Maps/DefMapLayers.js
@@ -11,6 +11,8 @@ import { TileLayer, LayersControl } from 'react-leaflet';
 
 const { BaseLayer } = LayersControl;
 
+const defOpacity = 0.7;
+
 class DefMapLayers extends Component {
   constructor(props) {
     super(props);
@@ -31,6 +33,7 @@ class DefMapLayers extends Component {
     const osmgraylayer = (
       <BaseLayer checked={this.props.gray} name={t('Mapa gris de OpenStreetMap')}>
         <TileLayer
+            opacity={defOpacity}
             attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
             url="https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png"
         />
@@ -38,6 +41,7 @@ class DefMapLayers extends Component {
     const osmlayer = (
       <BaseLayer checked={this.props.osmcolor} name={t('Mapa color de OpenStreetMap')}>
         <TileLayer
+            opacity={defOpacity}
             attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
             url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
@@ -49,15 +53,15 @@ class DefMapLayers extends Component {
         {/* React.Fragment does not work here */}
         { this.state.gkey &&
         <BaseLayer name={t('Mapa de carreteras de Google')}>
-          <GoogleLayer googlekey={this.state.gkey} maptype="ROADMAP" />
+          <GoogleLayer opacity={defOpacity} googlekey={this.state.gkey} maptype="ROADMAP" />
         </BaseLayer> }
         { this.state.gkey &&
         <BaseLayer name={t('Mapa de terreno de Google')}>
-          <GoogleLayer googlekey={this.state.gkey} maptype="TERRAIN" />
+          <GoogleLayer opacity={defOpacity} googlekey={this.state.gkey} maptype="TERRAIN" />
         </BaseLayer> }
         { this.state.gkey &&
           <BaseLayer name={t('Mapa de satélite de Google')} checked={this.props.satellite}>
-            <GoogleLayer googlekey={this.state.gkey} maptype="SATELLITE" />
+            <GoogleLayer opacity={defOpacity} googlekey={this.state.gkey} maptype="SATELLITE" />
           </BaseLayer> }
       </LayersControl>
     );