<!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="../theme/default/style.css" type="text/css">
<!--[if lte IE 6]>
<link rel="stylesheet" href="../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;
}
#map {
height: 512px;
}
</style>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<script src="../lib/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"></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>
