1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers: Spherical Mercator</title>
<link rel="stylesheet" href="openlayers/theme/default/style.css" type="text/css">
<!--[if lte IE 6]>
<link rel="stylesheet" href="openlayers/theme/default/ie6-style.css" type="text/css" />
<![endif]-->
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
.olControlAttribution {
bottom: 0px;
left: 2px;
right: inherit;
width: 400px;
}
/* conditionally position control differently for Google Maps */
.olForeignContainer div.olControlMousePosition {
bottom: 28px;
}
#map {
height: 512px;
}
</style>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<script src="openlayers/OpenLayers.js"></script>
</head>
<body>
<h1 id="title">OpenLayers Spherical Mercator Example</h1>
<div id="tags">
spherical, mercator, osm, xyz, google, virtual earth, tile
</div>
<p id="shortdesc">
Shows the use of the Spherical Mercator Layers, for overlaying
Google, Microsoft, and other layers with XYZ tiles.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>Note that maps with Google layers are a special case, because we
cannot control the position of the attribution. To conditionally
position controls differently for Google layers, prepend the
css selector with <code>.olForeignContainer</code>.</p>
</div>
<script type="text/javascript">
var map = new OpenLayers.Map({
div: "map",
projection: "EPSG:900913",
displayProjection: "EPSG:4326",
numZoomLevels: 18
});
// create Google Mercator layers
var gphy = new OpenLayers.Layer.Google(
"Google Physical",
{type: google.maps.MapTypeId.TERRAIN}
);
var gmap = new OpenLayers.Layer.Google(
"Google Streets", // the default
{numZoomLevels: 20}
);
var ghyb = new OpenLayers.Layer.Google(
"Google Hybrid",
{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
);
var gsat = new OpenLayers.Layer.Google(
"Google Satellite",
{type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
);
// create Bing layers
// API key for http://openlayers.org. Please get your own at
// http://bingmapsportal.com/ and use that instead.
var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";
var veroad = new OpenLayers.Layer.Bing({
key: apiKey,
type: "Road",
wrapDateLine: true
});
var veaer = new OpenLayers.Layer.Bing({
key: apiKey,
type: "Aerial",
wrapDateLine: true
});
var vehyb = new OpenLayers.Layer.Bing({
key: apiKey,
type: "AerialWithLabels",
wrapDateLine: true
});
// create OSM layers
var mapnik = new OpenLayers.Layer.OSM();
// create a vector layer for drawing
var vector = new OpenLayers.Layer.Vector("Editable Vectors");
map.addLayers([
gphy, gmap, gsat, ghyb, veroad, veaer, vehyb, mapnik, vector
]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.EditingToolbar(vector));
map.addControl(new OpenLayers.Control.Permalink());
map.addControl(new OpenLayers.Control.MousePosition());
map.zoomToMaxExtent();
</script>
</body>
</html>
|
