openlayers/examples/spherical-mercator.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>OpenLayers: Spherical Mercator</title>
   4     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
   5     <link rel="stylesheet" href="style.css" type="text/css" />
   6     <style type="text/css">
   7         .olControlAttribution { bottom: 0px!important }
   8         #map {
   9             height: 512px;
  10         }
  11     </style>
  12
  13     <script src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1'></script>
  14     <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
  15     <script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script>
  16
  17     <script src="../lib/OpenLayers.js"></script>
  18     <script type="text/javascript">
  19
  20         // make map available for easy debugging
  21         var map;
  22
  23         // avoid pink tiles
  24         OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
  25         OpenLayers.Util.onImageLoadErrorColor = "transparent";
  26
  27         function init(){
  28             var options = {
  29                 projection: new OpenLayers.Projection("EPSG:900913"),
  30                 displayProjection: new OpenLayers.Projection("EPSG:4326"),
  31                 units: "m",
  32                 numZoomLevels: 18,
  33                 maxResolution: 156543.0339,
  34                 maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
  35                                                  20037508, 20037508.34)
  36             };
  37             map = new OpenLayers.Map('map', options);
  38
  39             // create Google Mercator layers
  40             var gmap = new OpenLayers.Layer.Google(
  41                 "Google Streets",
  42                 {'sphericalMercator': true}
  43             );
  44             var gsat = new OpenLayers.Layer.Google(
  45                 "Google Satellite",
  46                 {type: G_SATELLITE_MAP, 'sphericalMercator': true, numZoomLevels: 22}
  47             );
  48             var ghyb = new OpenLayers.Layer.Google(
  49                 "Google Hybrid",
  50                 {type: G_HYBRID_MAP, 'sphericalMercator': true}
  51             );
  52
  53             // create Virtual Earth layers
  54             var veroad = new OpenLayers.Layer.VirtualEarth(
  55                 "Virtual Earth Roads",
  56                 {'type': VEMapStyle.Road, 'sphericalMercator': true}
  57             );
  58             var veaer = new OpenLayers.Layer.VirtualEarth(
  59                 "Virtual Earth Aerial",
  60                 {'type': VEMapStyle.Aerial, 'sphericalMercator': true}
  61             );
  62             var vehyb = new OpenLayers.Layer.VirtualEarth(
  63                 "Virtual Earth Hybrid",
  64                 {'type': VEMapStyle.Hybrid, 'sphericalMercator': true}
  65             );
  66
  67             // create Yahoo layer
  68             var yahoo = new OpenLayers.Layer.Yahoo(
  69                 "Yahoo Street",
  70                 {'sphericalMercator': true}
  71             );
  72             var yahoosat = new OpenLayers.Layer.Yahoo(
  73                 "Yahoo Satellite",
  74                 {'type': YAHOO_MAP_SAT, 'sphericalMercator': true}
  75             );
  76             var yahoohyb = new OpenLayers.Layer.Yahoo(
  77                 "Yahoo Hybrid",
  78                 {'type': YAHOO_MAP_HYB, 'sphericalMercator': true}
  79             );
  80
  81             // create OSM layer
  82             var mapnik = new OpenLayers.Layer.OSM();
  83             // create OAM layer
  84             var oam = new OpenLayers.Layer.XYZ(
  85                 "OpenAerialMap",
  86                 "http://tile.openaerialmap.org/tiles/1.0.0/openaerialmap-900913/${z}/${x}/${y}.png",
  87                 {
  88                     sphericalMercator: true
  89                 }
  90             );
  91
  92             // create OSM layer
  93             var osmarender = new OpenLayers.Layer.OSM(
  94                 "OpenStreetMap (Tiles@Home)",
  95                 "http://tah.openstreetmap.org/Tiles/tile/${z}/${x}/${y}.png"
  96             );
  97
  98
  99             // create WMS layer
 100             var wms = new OpenLayers.Layer.WMS(
 101                 "World Map",
 102                 "http://world.freemap.in/tiles/",
 103                 {'layers': 'factbook-overlay', 'format':'png'},
 104                 {
 105                     'opacity': 0.4,
 106                     'isBaseLayer': false,'wrapDateLine': true
 107                 }
 108             );
 109
 110             // create a vector layer for drawing
 111             var vector = new OpenLayers.Layer.Vector("Editable Vectors");
 112
 113             map.addLayers([gmap, gsat, ghyb, veroad, veaer, vehyb,
 114                            yahoo, yahoosat, yahoohyb, oam, mapnik, osmarender,
 115                            wms, vector]);
 116             map.addControl(new OpenLayers.Control.LayerSwitcher());
 117             map.addControl(new OpenLayers.Control.EditingToolbar(vector));
 118             map.addControl(new OpenLayers.Control.Permalink());
 119             map.addControl(new OpenLayers.Control.MousePosition());
 120             if (!map.getCenter()) {map.zoomToMaxExtent()}
 121         }
 122
 123     </script>
 124   </head>
 125   <body onload="init()">
 126     <h1 id="title">OpenLayers Spherical Mercator Example</h1>
 127
 128     <div id="tags">
 129     </div>
 130     <p id="shortdesc">
 131         Shows the use of the Spherical Mercator Layers, for overlaying
 132         Google, Yahoo, Microsoft, and other layers with WMS and TMS tiles.
 133     </p>
 134     <div id="map" class="smallmap"></div>
 135
 136     <div id="docs">
 137     </div>
 138   </body>
 139 </html>
 140
 141
 142