11966d231f
This allows us to simplify the map and layer configuration, because now the projection also defines defaults for maxExtent, maxResolution and units. This change also adds transforms for SRS aliases for EPSG:4326 and centralizes axis order information in OpenLayers.Projection.defaults.
117 lines
3.4 KiB
HTML
117 lines
3.4 KiB
HTML
<!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.5&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();
|
|
|
|
var osmarender = new OpenLayers.Layer.OSM(
|
|
"OpenStreetMap (Tiles@Home)",
|
|
"http://tah.openstreetmap.org/Tiles/tile/${z}/${x}/${y}.png"
|
|
);
|
|
|
|
// create a vector layer for drawing
|
|
var vector = new OpenLayers.Layer.Vector("Editable Vectors");
|
|
|
|
map.addLayers([
|
|
gphy, gmap, gsat, ghyb, veroad, veaer, vehyb, mapnik, osmarender, 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>
|
|
|
|
|
|
|