Change the sundials example to also hae a google layer.

git-svn-id: http://svn.openlayers.org/trunk/openlayers@8252 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
2008-11-03 22:12:57 +00:00
parent de272ebf28
commit 03101401b9
1 changed files with 6 additions and 3 deletions
--- a/examples/sundials-spherical-mercator.html
+++ b/examples/sundials-spherical-mercator.html
@@ -0,0 +1,110 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>OpenLayers: Sundials on a Spherical Mercator Map</title>
+    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+        <link rel="stylesheet" href="../theme/default/framedCloud.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
+
+    <style type="text/css">
+        #map {
+            width: 100%;
+            height: 80%;
+            border: 1px solid black;
+        }
+        .olPopup p { margin:0px; font-size: .9em;}
+        .olPopup h2 { font-size:1.2em; }
+    </style>
+    <script src="../lib/OpenLayers.js"></script>
+    <script type="text/javascript">
+        var lon = 5;
+        var lat = 40;
+        var zoom = 5;
+        var map, layer;
+
+        function init(){
+            var options = {
+                projection: new OpenLayers.Projection("EPSG:900913"),
+                displayProjection: new OpenLayers.Projection("EPSG:4326"),
+                units: "m",
+                maxResolution: 156543.0339,
+                maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
+                                                 20037508.34, 20037508.34)
+            };
+            map = new OpenLayers.Map('map', options);
+            var mapnik = new OpenLayers.Layer.TMS(
+                "OpenStreetMap (Mapnik)",
+                "http://tile.openstreetmap.org/",
+                {
+                    type: 'png', getURL: osm_getTileURL,
+                    displayOutsideMaxExtent: true,
+                    attribution: '<a href="http://www.openstreetmap.org/">OpenStreetMap</a>'
+                }
+            );
+            map.addLayer(mapnik);
+            map.addLayer(new OpenLayers.Layer.Google("Google",{sphericalMercator:true}));
+            map.addLayer(new OpenLayers.Layer.GML("KML", "kml/sundials.kml", 
+               {
+                format: OpenLayers.Format.KML, 
+                projection: map.displayProjection,
+                formatOptions: {
+                  extractStyles: true, 
+                  extractAttributes: true
+                }
+               }));
+             selectControl = new OpenLayers.Control.SelectFeature(map.layers[1],
+                {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
+  
+            map.addControl(selectControl);
+            selectControl.activate();   
+            map.zoomToExtent(new OpenLayers.Bounds(68.774414,11.381836,123.662109,34.628906).transform(map.displayProjection, map.projection));
+            map.addControl(new OpenLayers.Control.LayerSwitcher());
+        }
+        function onPopupClose(evt) {
+            selectControl.unselect(selectedFeature);
+        }
+        function onFeatureSelect(feature) {
+            selectedFeature = feature;
+            popup = new OpenLayers.Popup.FramedCloud("chicken", 
+                                     feature.geometry.getBounds().getCenterLonLat(),
+                                     new OpenLayers.Size(100,100),
+                                     "<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description,
+                                     null, true, onPopupClose);
+            feature.popup = popup;
+            map.addPopup(popup);
+        }
+        function onFeatureUnselect(feature) {
+            map.removePopup(feature.popup);
+            feature.popup.destroy();
+            feature.popup = null;
+        }
+        function osm_getTileURL(bounds) {
+            var res = this.map.getResolution();
+            var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
+            var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
+            var z = this.map.getZoom();
+            var limit = Math.pow(2, z);
+
+            if (y < 0 || y >= limit) {
+                return OpenLayers.Util.getImagesLocation() + "404.png";
+            } else {
+                x = ((x % limit) + limit) % limit;
+                return this.url + z + "/" + x + "/" + y + "." + this.type;
+            }
+        }
+    </script>
+  </head>
+  <body onload="init()">
+      <h1 id="title">OSM + Google Maps + KML Reprojection</h1>
+
+      <div id="tags"></div>
+
+      <p id="shortdesc">
+          Demonstrates loading and displaying a KML file on top of OpenStreetMap (OSM) and Google Maps data. Loads data from a KML file of sundials.
+    </p>
+
+    <div id="map" class="smallmap"></div>
+
+    <div id="docs"></div>
+  </body>
+</html>