ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'master' of github.com:openlayers/openlayers into convenience

Browse Source
This commit is contained in:
tschaub
2011-10-28 15:46:46 -06:00
parent 80219dc03c 58cc225b9b
commit e599881a8e
1 changed files with 50 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
examples/spherical-mercator.html
View File

@@ -11,75 +11,85 @@
<![endif]-->
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
.olControlAttribution { bottom: 0px!important }
.olControlAttribution {
bottom: 0px
}
#map {
height: 512px;
}
/* avoid pink tiles */
.olImageLoadError {
background-color: transparent !important;
}
</style>
<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
<script src="http://maps.google.com/maps/api/js?v=3.5&amp;sensor=false"></script>
<script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script>
<script src="../lib/OpenLayers.js"></script>
</head>
<body onload="init()">
<h1 id="title">OpenLayers Spherical Mercator Example</h1>
<div id="tags">
spherical, mercator, osm, xyz, google, virtual earth, yahoo, tile
</div>
<p id="shortdesc">
Shows the use of the Spherical Mercator Layers, for overlaying
Google, Yahoo, Microsoft, and other layers with XYZ tiles.
</p>
<div id="map" class="smallmap"></div>
<div id="docs"></div>
<script type="text/javascript">
// API key for http://openlayers.org. Please get your own at
// http://bingmapsportal.com/ and use that instead.
var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";
// make map available for easy debugging
var map;
// increase reload attempts
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
function init(){
var maxExtent = new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508),
restrictedExtent = maxExtent.clone(),
maxResolution = 156543.0339;
var options = {
map = new OpenLayers.Map('map', {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
numZoomLevels: 18,
maxResolution: maxResolution,
maxExtent: maxExtent,
restrictedExtent: restrictedExtent
};
map = new OpenLayers.Map('map', options);
maxExtent: maxExtent
});
// create Google Mercator layers
var gmap = new OpenLayers.Layer.Google(
"Google Streets",
{sphericalMercator: true}
var gphy = new OpenLayers.Layer.Google(
"Google Physical",
{type: google.maps.MapTypeId.TERRAIN}
);
var gsat = new OpenLayers.Layer.Google(
"Google Satellite",
{type: G_SATELLITE_MAP, sphericalMercator: true, numZoomLevels: 22}
var gmap = new OpenLayers.Layer.Google(
"Google Streets", // the default
{numZoomLevels: 20}
);
var ghyb = new OpenLayers.Layer.Google(
"Google Hybrid",
{type: G_HYBRID_MAP, sphericalMercator: true}
{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"
type: "Road",
wrapDateLine: true
});
var veaer = new OpenLayers.Layer.Bing({
key: apiKey,
type: "Aerial"
type: "Aerial",
wrapDateLine: true
});
var vehyb = new OpenLayers.Layer.Bing({
key: apiKey,
type: "AerialWithLabels"
type: "AerialWithLabels",
wrapDateLine: true
});
// create Yahoo layer
@@ -96,64 +106,28 @@ function init(){
{'type': YAHOO_MAP_HYB, sphericalMercator: true}
);
// create OSM layer
// create OSM layers
var mapnik = new OpenLayers.Layer.OSM();
// create OAM layer
var oam = new OpenLayers.Layer.XYZ(
"OpenAerialMap",
"http://tile.openaerialmap.org/tiles/1.0.0/openaerialmap-900913/${z}/${x}/${y}.png",
{
sphericalMercator: true
}
);
// create OSM layer
var osmarender = new OpenLayers.Layer.OSM(
"OpenStreetMap (Tiles@Home)",
"http://tah.openstreetmap.org/Tiles/tile/${z}/${x}/${y}.png"
);
// create WMS layer
var wms = new OpenLayers.Layer.WMS(
"World Map",
"http://world.freemap.in/tiles/",
{'layers': 'factbook-overlay', 'format':'png'},
{
'opacity': 0.4, visibility: false,
'isBaseLayer': false,'wrapDateLine': true
}
);
// create a vector layer for drawing
var vector = new OpenLayers.Layer.Vector("Editable Vectors");
map.addLayers([gmap, gsat, ghyb, veroad, veaer, vehyb,
yahoo, yahoosat, yahoohyb, oam, mapnik, osmarender,
wms, vector]);
map.addLayers([
gphy, gmap, gsat, ghyb, veroad, veaer, vehyb, yahoo, yahoosat,
yahoohyb, 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());
if (!map.getCenter()) {map.zoomToMaxExtent()}
}
map.zoomToMaxExtent();
</script>
</head>
<body onload="init()">
<h1 id="title">OpenLayers Spherical Mercator Example</h1>
<div id="tags">
spherical, mercator, osm, xyz, google, virtual earth, yahoo, tms, tile
</div>
<p id="shortdesc">
Shows the use of the Spherical Mercator Layers, for overlaying
Google, Yahoo, Microsoft, and other layers with WMS and TMS tiles.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
</div>
</body>
</html>