Tuesday, 5 May 2015

carto - Setting zIndex of CartoDB.js layer on top of Google Map's GroundOverlay?


I am trying to combine the Google Maps API Ground Overlay example with CartoDB.js example using Google Maps. It appears both APIs are displaying their layers correctly.


However, the ground overlay is always displayed on top. I would like to see the positions from the CartoDB viz layer to appear on top of the ground overlay. Any suggestions?



Answer




After trying a couple of different things, and based on information from this SO post and Google Maps Custom Overlays. I ended up with this solution:


      // Constructor
function CustomOverlay(map) {
this.setMap(map);
}

// Inside main function
// ...
/*
Custom Overlay


Overlay holds the Pane that holds GroundOverlay, so we can
accquire the handle to set the appropriate zIndex.

See:
https://developers.google.com/maps/documentation/javascript/customoverlays.
https://stackoverflow.com/a/3063476/82180
*/
var customOverlay;
CustomOverlay.prototype = new google.maps.OverlayView();

overlay = new CustomOverlay(map);

CustomOverlay.prototype.onAdd = function() {
var panes = this.getPanes();
panes.overlayLayer.style['zIndex'] = 10;
}

CustomOverlay.prototype.draw = function() {
// NOOP
// The overlay is just a container, we are not adding any custom

// graphics/text onto it.
}

No comments:

Post a Comment

arcpy - Changing output name when exporting data driven pages to JPG?

Is there a way to save the output JPG, changing the output file name to the page name, instead of page number? I mean changing the script fo...