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
examples/spherical-mercator.html
+49 -75
View File
@@ -11,75 +11,85 @@
<![endif]--> <![endif]-->
<link rel="stylesheet" href="style.css" type="text/css"> <link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css"> <style type="text/css">
.olControlAttribution { bottom: 0px!important } .olControlAttribution {
bottom: 0px
}
#map { #map {
height: 512px; height: 512px;
} }
/* avoid pink tiles */
.olImageLoadError {
background-color: transparent !important;
}
</style> </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="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script>
<script src="../lib/OpenLayers.js"></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"> <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), var maxExtent = new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508),
restrictedExtent = maxExtent.clone(), restrictedExtent = maxExtent.clone(),
maxResolution = 156543.0339; maxResolution = 156543.0339;
var options = { map = new OpenLayers.Map('map', {
projection: new OpenLayers.Projection("EPSG:900913"), projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"), displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m", units: "m",
numZoomLevels: 18, numZoomLevels: 18,
maxResolution: maxResolution, maxResolution: maxResolution,
maxExtent: maxExtent, maxExtent: maxExtent
restrictedExtent: restrictedExtent });
};
map = new OpenLayers.Map('map', options);
// create Google Mercator layers // create Google Mercator layers
var gmap = new OpenLayers.Layer.Google( var gphy = new OpenLayers.Layer.Google(
"Google Streets", "Google Physical",
{sphericalMercator: true} {type: google.maps.MapTypeId.TERRAIN}
); );
var gsat = new OpenLayers.Layer.Google( var gmap = new OpenLayers.Layer.Google(
"Google Satellite", "Google Streets", // the default
{type: G_SATELLITE_MAP, sphericalMercator: true, numZoomLevels: 22} {numZoomLevels: 20}
); );
var ghyb = new OpenLayers.Layer.Google( var ghyb = new OpenLayers.Layer.Google(
"Google Hybrid", "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 // 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({ var veroad = new OpenLayers.Layer.Bing({
key: apiKey, key: apiKey,
type: "Road" type: "Road",
wrapDateLine: true
}); });
var veaer = new OpenLayers.Layer.Bing({ var veaer = new OpenLayers.Layer.Bing({
key: apiKey, key: apiKey,
type: "Aerial" type: "Aerial",
wrapDateLine: true
}); });
var vehyb = new OpenLayers.Layer.Bing({ var vehyb = new OpenLayers.Layer.Bing({
key: apiKey, key: apiKey,
type: "AerialWithLabels" type: "AerialWithLabels",
wrapDateLine: true
}); });
// create Yahoo layer // create Yahoo layer
@@ -96,64 +106,28 @@ function init(){
{'type': YAHOO_MAP_HYB, sphericalMercator: true} {'type': YAHOO_MAP_HYB, sphericalMercator: true}
); );
// create OSM layer // create OSM layers
var mapnik = new OpenLayers.Layer.OSM(); 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( var osmarender = new OpenLayers.Layer.OSM(
"OpenStreetMap (Tiles@Home)", "OpenStreetMap (Tiles@Home)",
"http://tah.openstreetmap.org/Tiles/tile/${z}/${x}/${y}.png" "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 // create a vector layer for drawing
var vector = new OpenLayers.Layer.Vector("Editable Vectors"); var vector = new OpenLayers.Layer.Vector("Editable Vectors");
map.addLayers([gmap, gsat, ghyb, veroad, veaer, vehyb, map.addLayers([
yahoo, yahoosat, yahoohyb, oam, mapnik, osmarender, gphy, gmap, gsat, ghyb, veroad, veaer, vehyb, yahoo, yahoosat,
wms, vector]); yahoohyb, mapnik, osmarender, vector
]);
map.addControl(new OpenLayers.Control.LayerSwitcher()); map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.EditingToolbar(vector)); map.addControl(new OpenLayers.Control.EditingToolbar(vector));
map.addControl(new OpenLayers.Control.Permalink()); map.addControl(new OpenLayers.Control.Permalink());
map.addControl(new OpenLayers.Control.MousePosition()); map.addControl(new OpenLayers.Control.MousePosition());
if (!map.getCenter()) {map.zoomToMaxExtent()} map.zoomToMaxExtent();
}
</script> </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> </body>
</html> </html>