Suite

Comment réduire l'opacité d'une couche Google Maps dans CartoDB.js


J'ai une application CartoDB.js où je charge mon vis en utilisantcartodb.createVis(Je ne définis pas manuellement les calques Leaflet).

Comment réduire l'opacité de la couche de base de Google Maps ? J'ai essayé ce qui suit, car Google Maps a l'indice de couche 0.

var initializeMap = function() { // initialisation de la carte 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, layer) { // le calque 0 est le calque de base, le calque 1 est le calque cartodb // setInteraction est désactivé par défaut window.layers = calques; calques[1] .setInteraction(true); // calques[1] est "tous" calques[1].on('featureOver', function(e, pos, latlng, data) { updateClubInfo(data.cartodb_id); }); calques[ 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); }); } ;

Cela ne fonctionne pas commesetOpacityn'est pas défini sur la couche Google Maps.

J'ai également eu l'idée de créer une sous-couche blanche "vide" entre ma couche de données et la couche Google Maps et de définir son opacité. Mais je ne sais pas comment faire cela avec l'API CartoDB.


Google vous permet de styliser les tuiles de la carte elles-mêmes. Vous n'aurez pas besoin de l'API CartoDB pour cela. Ce n'est pas une véritable "opacité" de la couche de carte, mais vous pouvez utiliser le style de carte pour modifier la luminosité des tuiles de la carte afin d'obtenir ce que je pense être l'effet souhaité.

Consultez https://developers.google.com/maps/documentation/javascript/styling pour des exemples. Cependant, en voici un pour vous aider à démarrer :

function initialize() { // Crée un tableau de styles. var styles = [{ stylers : [ { légèreté : 50 } ] }] ; // Crée un nouvel objet StyledMapType, en lui passant le tableau de styles, // ainsi que le nom à afficher sur le contrôle de type de carte. var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"}); // Créez un objet de carte et incluez le MapTypeId pour ajouter // au contrôle de type de carte. var mapOptions = { zoom : 11, centre : nouveau 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); // Associez la carte stylisée au MapTypeId et définissez-la sur display. map.mapTypes.set('map_style', styledMap); map.setMapTypeId('map_style'); }​

Démo de travail : http://savedbythegoog.appspot.com/?id=9543a269e6d0ac93abc600f9d58d12db456f33bc