openlayers/examples/sundials-spherical-mercator.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>OpenLayers: Sundials on a Spherical Mercator Map</title>
   4     <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
   5     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
   6     <link rel="stylesheet" href="style.css" type="text/css" />
   7
   8     <style type="text/css">
   9         #map {
  10             width: 100%;
  11             height: 80%;
  12             border: 1px solid black;
  13         }
  14         .olPopup p { margin:0px; font-size: .9em;}
  15         .olPopup h2 { font-size:1.2em; }
  16     </style>
  17     <script src="../lib/OpenLayers.js"></script>
  18     <script type="text/javascript">
  19         var lon = 5;
  20         var lat = 40;
  21         var zoom = 5;
  22         var map, select;
  23
  24         function init(){
  25             var options = {
  26                 projection: new OpenLayers.Projection("EPSG:900913"),
  27                 displayProjection: new OpenLayers.Projection("EPSG:4326"),
  28                 units: "m",
  29                 maxResolution: 156543.0339,
  30                 maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
  31                                                  20037508.34, 20037508.34)
  32             };
  33             map = new OpenLayers.Map('map', options);
  34             var mapnik = new OpenLayers.Layer.TMS(
  35                 "OpenStreetMap (Mapnik)",
  36                 "http://tile.openstreetmap.org/",
  37                 {
  38                     type: 'png', getURL: osm_getTileURL,
  39                     displayOutsideMaxExtent: true,
  40                     attribution: '<a href="http://www.openstreetmap.org/">OpenStreetMap</a>'
  41                 }
  42             );
  43             var gmap = new OpenLayers.Layer.Google("Google", {sphericalMercator:true});
  44             var sundials = new OpenLayers.Layer.Vector("KML", {
  45                 projection: map.displayProjection,
  46                 strategies: [new OpenLayers.Strategy.Fixed()],
  47                 protocol: new OpenLayers.Protocol.HTTP({
  48                     url: "kml/sundials.kml",
  49                     format: new OpenLayers.Format.KML({
  50                         extractStyles: true,
  51                         extractAttributes: true
  52                     })
  53                 })
  54             });
  55
  56             map.addLayers([mapnik, gmap, sundials]);
  57
  58             select = new OpenLayers.Control.SelectFeature(sundials);
  59
  60             sundials.events.on({
  61                 "featureselected": onFeatureSelect,
  62                 "featureunselected": onFeatureUnselect
  63             });
  64
  65             map.addControl(select);
  66             select.activate();
  67
  68             map.addControl(new OpenLayers.Control.LayerSwitcher());
  69
  70             map.zoomToExtent(
  71                 new OpenLayers.Bounds(
  72                     68.774414, 11.381836, 123.662109, 34.628906
  73                 ).transform(map.displayProjection, map.projection)
  74             );
  75         }
  76         function onPopupClose(evt) {
  77             select.unselectAll();
  78         }
  79         function onFeatureSelect(event) {
  80             var feature = event.feature;
  81             var selectedFeature = feature;
  82             var popup = new OpenLayers.Popup.FramedCloud("chicken",
  83                 feature.geometry.getBounds().getCenterLonLat(),
  84                 new OpenLayers.Size(100,100),
  85                 "<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description,
  86                 null, true, onPopupClose
  87             );
  88             feature.popup = popup;
  89             map.addPopup(popup);
  90         }
  91         function onFeatureUnselect(event) {
  92             var feature = event.feature;
  93             if(feature.popup) {
  94                 map.removePopup(feature.popup);
  95                 feature.popup.destroy();
  96                 delete feature.popup;
  97             }
  98         }
  99         function osm_getTileURL(bounds) {
 100             var res = this.map.getResolution();
 101             var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
 102             var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
 103             var z = this.map.getZoom();
 104             var limit = Math.pow(2, z);
 105
 106             if (y < 0 || y >= limit) {
 107                 return OpenLayers.Util.getImagesLocation() + "404.png";
 108             } else {
 109                 x = ((x % limit) + limit) % limit;
 110                 return this.url + z + "/" + x + "/" + y + "." + this.type;
 111             }
 112         }
 113     </script>
 114   </head>
 115   <body onload="init()">
 116       <h1 id="title">OSM + Google Maps + KML Reprojection</h1>
 117
 118       <div id="tags"></div>
 119
 120       <p id="shortdesc">
 121           Demonstrates loading and displaying a KML file on top of OpenStreetMap (OSM) and Google Maps data. Loads data from a KML file of sundials.
 122     </p>
 123
 124     <div id="map" class="smallmap"></div>
 125
 126     <div id="docs"></div>
 127   </body>
 128 </html>