Reduce Opacity of Google Maps Layer in CartoDB.js – How to Guide

cartogoogle mapsjavascriptweb-mapping

I have a CartoDB.js-App where I load my vis using cartodb.createVis (I do not manually define Leaflet layers).

How can I reduce the opacity of the Google Maps base layer? I tried the following, as Google Maps has the layer index 0.

var initializeMap = function() {
    // map initialization
    cartodb.createVis('map', VIZAPI, {
            shareable: false,
            title: false,
            description: false,
            search: true,
            tiles_loader: false,
            center_lat: 47,
            center_lon: 8,
            zoom: 9,
            cartodb_logo: false
        })
        .done(function(vis, layers) {
            // layer 0 is the base layer, layer 1 is cartodb layer
            // setInteraction is disabled by default
            window.layers = layers;
            layers[1].setInteraction(true);
            // layers[1] is "all"
            layers[1].on('featureOver', function(e, pos, latlng, data) {
                updateClubInfo(data.cartodb_id);
            });
            layers[1].on('featureClick', function(e, pos, latlng, data) {
                updateClubInfo(data.cartodb_id);
            });
            layers[0].setOpacity(0.3);
            // layers[1].getSubLayer(0).setCartoCSS()
            window.overlays = vis.getOverlays();
        })

    .error(function(err) {
        console.log(err);
    });
};

This doesn't work as setOpacity is not defined on the Google Maps layer.

I also came up with the idea of creating a white, "empty" sublayer between my data layer and the Google Maps layer and set its opacity. But I don't know how to do that with the CartoDB API.

Best Answer

Google allows you style the map tiles themselves. You won't need the CartoDB API for this. It's not a true "opacity" of the map layer, but you can use the map style to change the lightness of the map tiles to achieve what I believe is the effect you want.

Check out https://developers.google.com/maps/documentation/javascript/styling for examples. However here's one to get you started:

function initialize() {
  // Create an array of styles.
  var styles = [{
    stylers: [
      { lightness: 50 }
    ]
  }];

  // Create a new StyledMapType object, passing it the array of styles,
  // as well as the name to be displayed on the map type control.
  var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});

  // Create a map object, and include the MapTypeId to add
  // to the map type control.
  var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(55.6468, 37.581),
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  //Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');
}​

Working Demo: http://savedbythegoog.appspot.com/?id=9543a269e6d0ac93abc600f9d58d12db456f33bc

Related Question