0

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.

1 Answer 1

2

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

2
  • Great. I came to this solution myself, but within the CartoDB API: vis.getNativeMap().setOptions(options_with_styles) and without initializing a new google maps object. Thx.
    – grssnbchr
    Jul 15, 2014 at 6:28
  • Wow.... This sucks!
    – MrYellow
    Apr 4, 2023 at 2:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.