USGSOverlay.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. USGSOverlay.prototype = new google.maps.OverlayView();
  2. /** @constructor */
  3. function USGSOverlay(bounds, image, map) {
  4. // Initialize all properties.
  5. this.bounds_ = bounds;
  6. this.image_ = image;
  7. this.map_ = map;
  8. // Define a property to hold the image's div. We'll
  9. // actually create this div upon receipt of the onAdd()
  10. // method so we'll leave it null for now.
  11. this.div_ = null;
  12. // Explicitly call setMap on this overlay.
  13. this.setMap(map);
  14. }
  15. /**
  16. * onAdd is called when the map's panes are ready and the overlay has been
  17. * added to the map.
  18. */
  19. USGSOverlay.prototype.onAdd = function() {
  20. var div = document.createElement('div');
  21. div.style.borderStyle = 'none';
  22. div.style.borderWidth = '0px';
  23. div.style.position = 'absolute';
  24. // Create the img element and attach it to the div.
  25. var img = document.createElement('img');
  26. img.src = this.image_;
  27. img.style.width = '100%';
  28. img.style.height = '100%';
  29. img.style.position = 'absolute';
  30. div.appendChild(img);
  31. this.div_ = div;
  32. // Add the element to the "overlayLayer" pane.
  33. var panes = this.getPanes();
  34. panes.overlayLayer.appendChild(div);
  35. };
  36. USGSOverlay.prototype.draw = function() {
  37. // We use the south-west and north-east
  38. // coordinates of the overlay to peg it to the correct position and size.
  39. // To do this, we need to retrieve the projection from the overlay.
  40. var overlayProjection = this.getProjection();
  41. // Retrieve the south-west and north-east coordinates of this overlay
  42. // in LatLngs and convert them to pixel coordinates.
  43. // We'll use these coordinates to resize the div.
  44. var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  45. var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
  46. // Resize the image's div to fit the indicated dimensions.
  47. var div = this.div_;
  48. div.style.left = sw.x + 'px';
  49. div.style.top = ne.y + 'px';
  50. div.style.width = (ne.x - sw.x) + 'px';
  51. div.style.height = (sw.y - ne.y) + 'px';
  52. };
  53. // The onRemove() method will be called automatically from the API if
  54. // we ever set the overlay's map property to 'null'.
  55. USGSOverlay.prototype.onRemove = function() {
  56. this.div_.parentNode.removeChild(this.div_);
  57. this.div_ = null;
  58. };
  59. // [START region_hideshow]
  60. // Set the visibility to 'hidden' or 'visible'.
  61. USGSOverlay.prototype.hide = function() {
  62. if (this.div_) {
  63. // The visibility property must be a string enclosed in quotes.
  64. this.div_.style.visibility = 'hidden';
  65. }
  66. };
  67. USGSOverlay.prototype.show = function() {
  68. if (this.div_) {
  69. this.div_.style.visibility = 'visible';
  70. }
  71. };
  72. USGSOverlay.prototype.toggle = function() {
  73. if (this.div_) {
  74. if (this.div_.style.visibility == 'hidden') {
  75. this.show();
  76. } else {
  77. this.hide();
  78. }
  79. }
  80. };
  81. // Detach the map from the DOM via toggleDOM().
  82. // Note that if we later reattach the map, it will be visible again,
  83. // because the containing <div> is recreated in the overlay's onAdd() method.
  84. USGSOverlay.prototype.toggleDOM = function() {
  85. if (this.getMap()) {
  86. // Note: setMap(null) calls OverlayView.onRemove()
  87. this.setMap(null);
  88. } else {
  89. this.setMap(this.map_);
  90. }
  91. };
  92. // [END region_hideshow]