]> dev.renevier.net Git - syp.git/blob - openlayers/examples/spherical-mercator.html
add some margin around image
[syp.git] / 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