00d9664b95
Simple and effective: As soon as a map has a Google layer, the whole map viewport is added as control to the GMap. As soon as no Google layer is visible on the map any more, the map viewport is appended to the map container again. With this change, OpenLayers strictly limits its GMaps integration to the GMaps API. Also note that there are no css overrides for the attribution any more. Instead, controls can now be conditionally positioned differently for Google layer by using the .olForeignContainer selector.
121 lines
3.7 KiB
HTML
121 lines
3.7 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;
|
|
}
|
|
/* 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="../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">
|
|
<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>
|
|
|
|
|
|
|