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