stopMashupCoverage.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   2     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml"
   4           xmlns:v="urn:schemas-microsoft-com:vml">
   5   <head>
   6     <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
   7     <title>Stop Mashup Coverage</title>
   8     <script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=local"
   9             type="text/javascript"></script>
  10     <script type="text/javascript">
  11     //<![CDATA[
  12
  13     // From the API examples:
  14     // A Rectangle is a simple overlay that outlines a lat/lng bounds on the
  15     // map. It has a border of the given weight and color and can optionally
  16     // have a semi-transparent background color.
  17     function Rectangle(bounds, opt_weight, opt_color) {
  18         this.bounds_ = bounds;
  19         this.weight_ = opt_weight || 2;
  20         this.color_ = opt_color || "#888888";
  21     }
  22     Rectangle.prototype = new GOverlay();
  23
  24     // Creates the DIV representing this rectangle.
  25     Rectangle.prototype.initialize = function(map) {
  26         // Create the DIV representing our rectangle
  27         var div = document.createElement("div");
  28         div.style.border = this.weight_ + "px solid " + this.color_;
  29         div.style.position = "absolute";
  30
  31         // Our rectangle is flat against the map, so we add our selves to the
  32         // MAP_PANE pane, which is at the same z-index as the map itself (i.e.,
  33         // below the marker shadows)
  34         map.getPane(G_MAP_MAP_PANE).appendChild(div);
  35
  36         this.map_ = map;
  37         this.div_ = div;
  38     }
  39
  40     // Remove the main DIV from the map pane
  41     Rectangle.prototype.remove = function() {
  42         this.div_.parentNode.removeChild(this.div_);
  43     }
  44
  45     // Copy our data to a new Rectangle
  46     Rectangle.prototype.copy = function() {
  47         return new Rectangle(this.bounds_, this.weight_, this.color_,
  48                            this.backgroundColor_, this.opacity_);
  49     }
  50
  51     // Redraw the rectangle based on the current projection and zoom level
  52     Rectangle.prototype.redraw = function(force) {
  53         // We only need to redraw if the coordinate system has changed
  54         if (!force) return;
  55
  56         // Calculate the DIV coordinates of two opposite corners of our bounds
  57         // to get the size and position of our rectangle
  58         var c1 = this.map_.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  59         var c2 = this.map_.fromLatLngToDivPixel(this.bounds_.getNorthEast());
  60
  61         // Now position our DIV based on the DIV coordinates of our bounds
  62         this.div_.style.width = Math.abs(c2.x - c1.x) + "px";
  63         this.div_.style.height = Math.abs(c2.y - c1.y) + "px";
  64         this.div_.style.left = (Math.min(c2.x, c1.x) - this.weight_) + "px";
  65         this.div_.style.top = (Math.min(c2.y, c1.y) - this.weight_) + "px";
  66     }
  67
  68
  69
  70     function load() {
  71         if (GBrowserIsCompatible()) {
  72             var map = new GMap2(document.getElementById("map"));
  73             map.addControl(new GLargeMapControl());
  74             map.addControl(new GMapTypeControl());
  75             map.setCenter(new GLatLng(45.43219, -75.691681), 11);
  76
  77             map.addOverlay(new Rectangle(new GLatLngBounds(
  78                    new GLatLng(45.224854, -75.378571),  // southwest
  79                    new GLatLng(45.519278, -75.941191)   // northeast
  80                 ), 4, "#000000"));
  81         }
  82     }
  83
  84     //]]>
  85     </script>
  86   </head>
  87   <body onload="load()" onunload="GUnload()">
  88     <div id="map" style="width: 800px; height: 600px"></div>
  89   </body>
  90 </html>