1. Grab a different Landsat image from this USGS site
  2. Double-click to zoom all the way in to an area of interest
  3. Choose an image from a certain date
  4. Click on the "Active Image Only" button
  5. Use the "Measure" button / location option to record the coordinates of the SW and NE corners
  6. Choose "Export Display" choosing WGS84 as the spatial reference and PNG as filetype
  7. Choose "Click on this link to view the exported image. (Image opens in a new window)"
  8. Right-click on the image and "Save Image as ..." in the code16 folder
  9. Link to this image with the name you selected and change the image bounds, and size of the map. The default name for the file is: "16_04_Landsat_Image.jpg"
  10. Change the size of the map.
// We define a property to hold the image's // div. We'll actually create this div // upon receipt of the add() method so we'll // leave it null for now. this.div_ = null; // Explicitly call setMap on this overlay this.setMap(map); } USGSOverlay.prototype.onAdd = function() { // Note: an overlay's receipt of add() indicates that // the map's panes are now available for attaching // the overlay to the map via the DOM. // Create the DIV and set some basic attributes. var div = document.createElement('DIV'); div.style.border = "none"; div.style.borderWidth = "0px"; div.style.position = "absolute"; // Create an 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%"; div.appendChild(img); // Set the overlay's div_ property to this DIV this.div_ = div; // We add an overlay to a map via one of the map's panes. // We'll add this overlay to the overlayImage pane. var panes = this.getPanes(); panes.overlayImage.appendChild(this.div_); } USGSOverlay.prototype.draw = function() { // Size and position the overlay. We use a southwest and northeast // position of the overlay to peg it to the correct position and size. // We need to retrieve the projection from this overlay to do this. var overlayProjection = this.getProjection(); // Retrieve the southwest and northeast coordinates of this overlay // in latlngs and convert them to pixels 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'; } USGSOverlay.prototype.onRemove = function() { this.div_.parentNode.removeChild(this.div_); } // Note that the visibility property must be a string enclosed in quotes USGSOverlay.prototype.hide = function() { if (this.div_) { this.div_.style.visibility = "hidden"; } } USGSOverlay.prototype.show = function() { if (this.div_) { this.div_.style.visibility = "visible"; } } USGSOverlay.prototype.toggle = function() { if (this.div_) { if (this.div_.style.visibility == "hidden") { this.show(); } else { this.hide(); } } }
  1. Grab a different Landsat image from this USGS site
  2. Double-click to zoom all the way in to an area of interest
  3. Choose an image from a certain date
  4. Click on the "Active Image Only" button
  5. Use the "Measure" button / location option to record the coordinates of the SW and NE corners
  6. Choose "Export Display" choosing WGS84 as the spatial reference and PNG as filetype
  7. Choose "Click on this link to view the exported image. (Image opens in a new window)"
  8. Right-click on the image and "Save Image as ..." in the code16 folder
  9. Link to this image with the name you selected and change the image bounds, and size of the map. The default name for the file is: "16_04_Landsat_Image.jpg"
  10. Change the size of the map.