1 <html xmlns="http://www.w3.org/1999/xhtml">
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 }
13 <script src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1'></script>
14 <script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
15 <script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script>
17 <script src="../lib/OpenLayers.js"></script>
18 <script type="text/javascript">
20 // make map available for easy debugging
24 OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
25 OpenLayers.Util.onImageLoadErrorColor = "transparent";
29 projection: new OpenLayers.Projection("EPSG:900913"),
30 displayProjection: new OpenLayers.Projection("EPSG:4326"),
33 maxResolution: 156543.0339,
34 maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
35 20037508, 20037508.34)
37 map = new OpenLayers.Map('map', options);
39 // create Google Mercator layers
40 var gmap = new OpenLayers.Layer.Google(
42 {'sphericalMercator': true}
44 var gsat = new OpenLayers.Layer.Google(
46 {type: G_SATELLITE_MAP, 'sphericalMercator': true, numZoomLevels: 22}
48 var ghyb = new OpenLayers.Layer.Google(
50 {type: G_HYBRID_MAP, 'sphericalMercator': true}
53 // create Virtual Earth layers
54 var veroad = new OpenLayers.Layer.VirtualEarth(
55 "Virtual Earth Roads",
56 {'type': VEMapStyle.Road, 'sphericalMercator': true}
58 var veaer = new OpenLayers.Layer.VirtualEarth(
59 "Virtual Earth Aerial",
60 {'type': VEMapStyle.Aerial, 'sphericalMercator': true}
62 var vehyb = new OpenLayers.Layer.VirtualEarth(
63 "Virtual Earth Hybrid",
64 {'type': VEMapStyle.Hybrid, 'sphericalMercator': true}
68 var yahoo = new OpenLayers.Layer.Yahoo(
70 {'sphericalMercator': true}
72 var yahoosat = new OpenLayers.Layer.Yahoo(
74 {'type': YAHOO_MAP_SAT, 'sphericalMercator': true}
76 var yahoohyb = new OpenLayers.Layer.Yahoo(
78 {'type': YAHOO_MAP_HYB, 'sphericalMercator': true}
82 var mapnik = new OpenLayers.Layer.OSM();
84 var oam = new OpenLayers.Layer.XYZ(
86 "http://tile.openaerialmap.org/tiles/1.0.0/openaerialmap-900913/${z}/${x}/${y}.png",
88 sphericalMercator: true
93 var osmarender = new OpenLayers.Layer.OSM(
94 "OpenStreetMap (Tiles@Home)",
95 "http://tah.openstreetmap.org/Tiles/tile/${z}/${x}/${y}.png"
100 var wms = new OpenLayers.Layer.WMS(
102 "http://world.freemap.in/tiles/",
103 {'layers': 'factbook-overlay', 'format':'png'},
106 'isBaseLayer': false,'wrapDateLine': true
110 // create a vector layer for drawing
111 var vector = new OpenLayers.Layer.Vector("Editable Vectors");
113 map.addLayers([gmap, gsat, ghyb, veroad, veaer, vehyb,
114 yahoo, yahoosat, yahoohyb, oam, mapnik, osmarender,
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()}
125 <body onload="init()">
126 <h1 id="title">OpenLayers Spherical Mercator Example</h1>
131 Shows the use of the Spherical Mercator Layers, for overlaying
132 Google, Yahoo, Microsoft, and other layers with WMS and TMS tiles.
134 <div id="map" class="smallmap"></div>