From 423bb39f23043bd60b57f254bd088b8229e05f58 Mon Sep 17 00:00:00 2001
From: tschaub <tim.schaub@gmail.com>
Date: Fri, 28 Oct 2011 15:41:53 -0600
Subject: [PATCH] Making this example less outdated.

---
 examples/spherical-mercator.html | 113 +++++++++++++------------------
 1 file changed, 47 insertions(+), 66 deletions(-)
diff --git a/examples/spherical-mercator.html b/examples/spherical-mercator.html
index 2c48280139..7040e30044 100644
--- a/examples/spherical-mercator.html
+++ b/examples/spherical-mercator.html
@@ -16,70 +16,79 @@
             height: 512px;
         }
 
-        /* avoid pink tiles */
-        .olImageLoadError {
-            background-color: transparent !important;
-        }
     </style>
 
-    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
+    <script src="http://maps.google.com/maps/api/js?v=3.5&amp;sensor=false"></script>
     <script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script>
 
     <script src="../lib/OpenLayers.js"></script>
+  </head>
+  <body onload="init()">
+    <h1 id="title">OpenLayers Spherical Mercator Example</h1>
+
+    <div id="tags">
+        spherical, mercator, osm, xyz, google, virtual earth, yahoo, tms, tile
+    </div>
+    <p id="shortdesc">
+        Shows the use of the Spherical Mercator Layers, for overlaying 
+        Google, Yahoo, Microsoft, and other layers with WMS and TMS tiles.
+    </p>
+    <div id="map" class="smallmap"></div>
+
+    <div id="docs"></div>
     <script type="text/javascript">
 
-// API key for http://openlayers.org. Please get your own at
-// http://bingmapsportal.com/ and use that instead.
-var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";
-
-// make map available for easy debugging
-var map;
-
-// increase reload attempts 
-OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
-
-function init(){
     var maxExtent = new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508),
         restrictedExtent = maxExtent.clone(),
         maxResolution = 156543.0339;
-    
-    var options = {
+
+    map = new OpenLayers.Map('map', {
         projection: new OpenLayers.Projection("EPSG:900913"),
         displayProjection: new OpenLayers.Projection("EPSG:4326"),
         units: "m",
         numZoomLevels: 18,
         maxResolution: maxResolution,
-        maxExtent: maxExtent,
-        restrictedExtent: restrictedExtent
-    };
-    map = new OpenLayers.Map('map', options);
+        maxExtent: maxExtent
+    });
 
     // create Google Mercator layers
-    var gmap = new OpenLayers.Layer.Google(
-        "Google Streets",
-        {sphericalMercator: true}
+    var gphy = new OpenLayers.Layer.Google(
+        "Google Physical",
+        {type: google.maps.MapTypeId.TERRAIN}
     );
-    var gsat = new OpenLayers.Layer.Google(
-        "Google Satellite",
-        {type: G_SATELLITE_MAP, sphericalMercator: true, numZoomLevels: 22}
+    var gmap = new OpenLayers.Layer.Google(
+        "Google Streets", // the default
+        {numZoomLevels: 20}
     );
     var ghyb = new OpenLayers.Layer.Google(
         "Google Hybrid",
-        {type: G_HYBRID_MAP, sphericalMercator: true}
+        {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
+    );
+    var gsat = new OpenLayers.Layer.Google(
+        "Google Satellite",
+        {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
     );
 
     // create Bing layers
+
+    // API key for http://openlayers.org. Please get your own at
+    // http://bingmapsportal.com/ and use that instead.
+    var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";
+
     var veroad = new OpenLayers.Layer.Bing({
         key: apiKey,
-        type: "Road"
+        type: "Road",
+        wrapDateLine: true
     });
     var veaer = new OpenLayers.Layer.Bing({
         key: apiKey,
-        type: "Aerial"
+        type: "Aerial",
+        wrapDateLine: true
     });
     var vehyb = new OpenLayers.Layer.Bing({
         key: apiKey,
-        type: "AerialWithLabels"
+        type: "AerialWithLabels",
+        wrapDateLine: true
     });
 
     // create Yahoo layer
@@ -96,56 +105,28 @@ function init(){
         {'type': YAHOO_MAP_HYB, sphericalMercator: true}
     );
 
-    // create OSM layer
+    // create OSM layers
     var mapnik = new OpenLayers.Layer.OSM();
 
-    // create another OSM layer
     var osmarender = new OpenLayers.Layer.OSM(
         "OpenStreetMap (Tiles@Home)",
         "http://tah.openstreetmap.org/Tiles/tile/${z}/${x}/${y}.png"
     );
 
-
-    // create WMS layer
-    var wms = new OpenLayers.Layer.WMS(
-        "World Map",
-        "http://world.freemap.in/tiles/",
-        {'layers': 'factbook-overlay', 'format':'png'},
-        {
-            'opacity': 0.4, visibility: false,
-            'isBaseLayer': false,'wrapDateLine': true
-        }
-    );
-
     // create a vector layer for drawing
     var vector = new OpenLayers.Layer.Vector("Editable Vectors");
 
-    map.addLayers([gmap, gsat, ghyb, veroad, veaer, vehyb,
-                   yahoo, yahoosat, yahoohyb, mapnik, osmarender,
-                   wms, vector]);
+    map.addLayers([
+        gphy, gmap, gsat, ghyb, veroad, veaer, vehyb, yahoo, yahoosat, 
+        yahoohyb, mapnik, osmarender, vector
+    ]);
     map.addControl(new OpenLayers.Control.LayerSwitcher());
     map.addControl(new OpenLayers.Control.EditingToolbar(vector));
     map.addControl(new OpenLayers.Control.Permalink());
     map.addControl(new OpenLayers.Control.MousePosition());
-    if (!map.getCenter()) {map.zoomToMaxExtent()}
-}
+    map.zoomToMaxExtent();
 
     </script>
-  </head>
-  <body onload="init()">
-    <h1 id="title">OpenLayers Spherical Mercator Example</h1>
-
-    <div id="tags">
-        spherical, mercator, osm, xyz, google, virtual earth, yahoo, tms, tile
-    </div>
-    <p id="shortdesc">
-        Shows the use of the Spherical Mercator Layers, for overlaying 
-        Google, Yahoo, Microsoft, and other layers with WMS and TMS tiles.
-    </p>
-    <div id="map" class="smallmap"></div>
-
-    <div id="docs">
-    </div>
   </body>
 </html>
 
