Skip to content

Commit

Permalink
fix: custom overlay prototype order (#208)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jpoehnelt
jpoehnelt authored Jul 8, 2020
1 parent 53a5bc6 commit 432d48d
Show file tree
Hide file tree
Showing 5 changed files with 362 additions and 347 deletions.
137 changes: 70 additions & 67 deletions dist/samples/overlay-simple/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,78 @@
// google.maps.event.addDomListener().
// Note that we set the prototype to an instance, rather than the
// parent class itself, because we do not wish to modify the parent class.
// Initialize the map and the custom overlay.
var overlay;
/** Initialize the map and the custom overlay. */

function initMap() {
/** @constructor */
function USGSOverlay(bounds, image, map) {
// Initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map; // Define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.

this.div_ = null; // Explicitly call setMap on this overlay.

this.setMap(map);
}

USGSOverlay.prototype = new google.maps.OverlayView();
/**
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
*/

USGSOverlay.prototype.onAdd = function() {
var div = document.createElement("div");
div.style.borderStyle = "none";
div.style.borderWidth = "0px";
div.style.position = "absolute"; // Create the img element and attach it to the div.

var img = document.createElement("img");
img.src = this.image_;
img.style.width = "100%";
img.style.height = "100%";
img.style.position = "absolute";
div.appendChild(img);
this.div_ = div; // Add the element to the "overlayLayer" pane.

var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};

USGSOverlay.prototype.draw = function() {
// We use the south-west and north-east
// coordinates of the overlay to peg it to the correct position and size.
// To do this, we need to retrieve the projection from the overlay.
var overlayProjection = this.getProjection(); // Retrieve the south-west and north-east coordinates of this overlay
// in LatLngs and convert them to pixel coordinates.
// We'll use these coordinates to resize the div.

var sw = overlayProjection.fromLatLngToDivPixel(
this.bounds_.getSouthWest()
);
var ne = overlayProjection.fromLatLngToDivPixel(
this.bounds_.getNorthEast()
); // Resize the image's div to fit the indicated dimensions.

var div = this.div_;
div.style.left = sw.x + "px";
div.style.top = ne.y + "px";
div.style.width = ne.x - sw.x + "px";
div.style.height = sw.y - ne.y + "px";
};
/** The onRemove() method will be called automatically from the API if
* we ever set the overlay's map property to 'null'.
*/

USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};

var map = new google.maps.Map(document.getElementById("map"), {
zoom: 11,
center: {
Expand All @@ -31,73 +99,8 @@
"javascript/examples/full/images/talkeetna.png"; // The custom USGSOverlay object contains the USGS image,
// the bounds of the image, and a reference to the map.

exports.overlay = new USGSOverlay(bounds, srcImage, map);
overlay = new USGSOverlay(bounds, srcImage, map);
}
/** @constructor */

function USGSOverlay(bounds, image, map) {
// Initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map; // Define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.

this.div_ = null; // Explicitly call setMap on this overlay.

this.setMap(map);
}
/**
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
*/

USGSOverlay.prototype.onAdd = function() {
var div = document.createElement("div");
div.style.borderStyle = "none";
div.style.borderWidth = "0px";
div.style.position = "absolute"; // Create the img element and attach it to the div.

var img = document.createElement("img");
img.src = this.image_;
img.style.width = "100%";
img.style.height = "100%";
img.style.position = "absolute";
div.appendChild(img);
this.div_ = div; // Add the element to the "overlayLayer" pane.

var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};

USGSOverlay.prototype.draw = function() {
// We use the south-west and north-east
// coordinates of the overlay to peg it to the correct position and size.
// To do this, we need to retrieve the projection from the overlay.
var overlayProjection = this.getProjection(); // Retrieve the south-west and north-east coordinates of this overlay
// in LatLngs and convert them to pixel coordinates.
// We'll use these coordinates to resize the div.

var sw = overlayProjection.fromLatLngToDivPixel(
this.bounds_.getSouthWest()
);
var ne = overlayProjection.fromLatLngToDivPixel(
this.bounds_.getNorthEast()
); // Resize the image's div to fit the indicated dimensions.

var div = this.div_;
div.style.left = sw.x + "px";
div.style.top = ne.y + "px";
div.style.width = ne.x - sw.x + "px";
div.style.height = sw.y - ne.y + "px";
}; // The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.

USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};

exports.USGSOverlay = USGSOverlay;
exports.initMap = initMap;
})((this.window = this.window || {}));
137 changes: 70 additions & 67 deletions dist/samples/overlay-simple/iframe.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,78 @@
// google.maps.event.addDomListener().
// Note that we set the prototype to an instance, rather than the
// parent class itself, because we do not wish to modify the parent class.
// Initialize the map and the custom overlay.
var overlay;
/** Initialize the map and the custom overlay. */

function initMap() {
/** @constructor */
function USGSOverlay(bounds, image, map) {
// Initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map; // Define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.

this.div_ = null; // Explicitly call setMap on this overlay.

this.setMap(map);
}

USGSOverlay.prototype = new google.maps.OverlayView();
/**
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
*/

USGSOverlay.prototype.onAdd = function() {
var div = document.createElement("div");
div.style.borderStyle = "none";
div.style.borderWidth = "0px";
div.style.position = "absolute"; // Create the img element and attach it to the div.

var img = document.createElement("img");
img.src = this.image_;
img.style.width = "100%";
img.style.height = "100%";
img.style.position = "absolute";
div.appendChild(img);
this.div_ = div; // Add the element to the "overlayLayer" pane.

var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};

USGSOverlay.prototype.draw = function() {
// We use the south-west and north-east
// coordinates of the overlay to peg it to the correct position and size.
// To do this, we need to retrieve the projection from the overlay.
var overlayProjection = this.getProjection(); // Retrieve the south-west and north-east coordinates of this overlay
// in LatLngs and convert them to pixel coordinates.
// We'll use these coordinates to resize the div.

var sw = overlayProjection.fromLatLngToDivPixel(
this.bounds_.getSouthWest()
);
var ne = overlayProjection.fromLatLngToDivPixel(
this.bounds_.getNorthEast()
); // Resize the image's div to fit the indicated dimensions.

var div = this.div_;
div.style.left = sw.x + "px";
div.style.top = ne.y + "px";
div.style.width = ne.x - sw.x + "px";
div.style.height = sw.y - ne.y + "px";
};
/** The onRemove() method will be called automatically from the API if
* we ever set the overlay's map property to 'null'.
*/

USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};

var map = new google.maps.Map(document.getElementById("map"), {
zoom: 11,
center: {
Expand All @@ -53,74 +121,9 @@
"javascript/examples/full/images/talkeetna.png"; // The custom USGSOverlay object contains the USGS image,
// the bounds of the image, and a reference to the map.

exports.overlay = new USGSOverlay(bounds, srcImage, map);
overlay = new USGSOverlay(bounds, srcImage, map);
}
/** @constructor */

function USGSOverlay(bounds, image, map) {
// Initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map; // Define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.

this.div_ = null; // Explicitly call setMap on this overlay.

this.setMap(map);
}
/**
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
*/

USGSOverlay.prototype.onAdd = function() {
var div = document.createElement("div");
div.style.borderStyle = "none";
div.style.borderWidth = "0px";
div.style.position = "absolute"; // Create the img element and attach it to the div.

var img = document.createElement("img");
img.src = this.image_;
img.style.width = "100%";
img.style.height = "100%";
img.style.position = "absolute";
div.appendChild(img);
this.div_ = div; // Add the element to the "overlayLayer" pane.

var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};

USGSOverlay.prototype.draw = function() {
// We use the south-west and north-east
// coordinates of the overlay to peg it to the correct position and size.
// To do this, we need to retrieve the projection from the overlay.
var overlayProjection = this.getProjection(); // Retrieve the south-west and north-east coordinates of this overlay
// in LatLngs and convert them to pixel coordinates.
// We'll use these coordinates to resize the div.

var sw = overlayProjection.fromLatLngToDivPixel(
this.bounds_.getSouthWest()
);
var ne = overlayProjection.fromLatLngToDivPixel(
this.bounds_.getNorthEast()
); // Resize the image's div to fit the indicated dimensions.

var div = this.div_;
div.style.left = sw.x + "px";
div.style.top = ne.y + "px";
div.style.width = ne.x - sw.x + "px";
div.style.height = sw.y - ne.y + "px";
}; // The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.

USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};

exports.USGSOverlay = USGSOverlay;
exports.initMap = initMap;
})((this.window = this.window || {}));
</script>
Expand Down
Loading

0 comments on commit 432d48d

Please sign in to comment.