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

Since the name google.html should be reserved for our canonical Google example, I'm moving this reproject stuff into a google-reproject.html example. The google.html example now shows the various Google layers available. The google-reproject.html example demonstrates the reproject trick. I find examples with different indentation on every line a bit hard to read, so I'm straightening that out as well - and removing bits that were not used or not relevant to the examples.

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@6498 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Tim Schaub
2008-03-12 15:34:05 +00:00
parent a54f36650c
commit ba4a33b478
2 changed files with 96 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
examples/google-reproject.html Normal file
View File

@@ -0,0 +1,68 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers Google with Overlay Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css">
#map {
width: 512px;
height: 512px;
border: 1px solid black;
}
</style>
<!-- this gmaps key generated for http://openlayers.org/dev/ -->
<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var lon = 5;
var lat = 40;
var zoom = 17;
var map, layer;
function init(){
map = new OpenLayers.Map('map');
var satellite = new OpenLayers.Layer.Google(
"Google Satellite" , {type: G_SATELLITE_MAP}
);
var wms = new OpenLayers.Layer.WMS(
"World Map",
"http://world.freemap.in/cgi-bin/mapserv",
{
map: '/www/freemap.in/world/map/factbooktrans.map',
transparent: 'TRUE',
layers: 'factbook'
},
{'reproject': true}
);
map.addLayers([satellite, wms]);
map.setCenter(new OpenLayers.LonLat(10.205188,48.857593), 5);
map.addControl( new OpenLayers.Control.LayerSwitcher() );
map.addControl( new OpenLayers.Control.PanZoomBar() );
}
</script>
</head>
<body onload="init()">
<h1 id="title">Google with Overlay Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Demonstrate a Google basemap used with boundary overlay layer.
</p>
<div id="map"></div>
<div id="docs">
An overlay in a Geographic projection can be stretched to somewhat
line up with Google tiles (in a Mercator projection). Results get
worse farther from the equator. Use the "reproject" option on a
layer to get this behavior. Use the sphericalMercator option on
a Google layer to get proper overlays (with other layers in
Spherical Mercator).
</div>
</body>
</html>

56
examples/google.html
View File

@@ -1,48 +1,48 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>OpenLayers Google Layer Example</title> <title>OpenLayers Google Layer Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
#map { #map {
width: 512px; width: 512px;
height: 512px; height: 512px;
border: 1px solid black; border: 1px solid black;
background-color: red;
} }
</style> </style>
<!-- this gmaps key generated for http://openlayers.org/dev/ --> <!-- this gmaps key generated for http://openlayers.org/dev/ -->
<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?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
<!-- Localhost key -->
<!-- <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTS6gjckBmeABOGXIUiOiZObZESPg'></script>-->
<script src="../lib/OpenLayers.js"></script> <script src="../lib/OpenLayers.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var lon = 5; var lon = 5;
var lat = 40; var lat = 40;
var zoom = 17; var zoom = 17;
var map, layer; var map;
function init(){ function init() {
map = new OpenLayers.Map( 'map' , map = new OpenLayers.Map('map');
{ controls: [new OpenLayers.Control.MouseDefaults()] , 'numZoomLevels':20}); map.addControl(new OpenLayers.Control.LayerSwitcher());
var satellite = new OpenLayers.Layer.Google( "Google Satellite" , {type: G_SATELLITE_MAP, 'maxZoomLevel':18} ); var gphy = new OpenLayers.Layer.Google(
"Google Physical",
{type: G_PHYSICAL_MAP}
);
var gmap = new OpenLayers.Layer.Google(
"Google Streets" // the default
);
var ghyb = new OpenLayers.Layer.Google(
"Google Hybrid",
{type: G_HYBRID_MAP}
);
var gsat = new OpenLayers.Layer.Google(
"Google Satellite",
{type: G_SATELLITE_MAP}
);
map.addLayers([satellite]); map.addLayers([gphy, gmap, ghyb, gsat]);
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic', 'transparent':true},
{isBaseLayer: false} );
layer.setVisibility(false);
var twms = new OpenLayers.Layer.WMS( "World Map",
"http://world.freemap.in/cgi-bin/mapserv?",
{map: '/www/freemap.in/world/map/factbooktrans.map', transparent:'true',
layers: 'factbook', 'format':'png'}, {'reproject': true} );
map.addLayer(twms);
map.setCenter(new OpenLayers.LonLat(10.205188,48.857593), 5); map.setCenter(new OpenLayers.LonLat(10.2, 48.9), 5);
map.addControl( new OpenLayers.Control.LayerSwitcher() );
map.addControl( new OpenLayers.Control.PanZoomBar() );
} }
</script> </script>
</head> </head>
@@ -52,16 +52,16 @@
<div id="tags"></div> <div id="tags"></div>
<p id="shortdesc"> <p id="shortdesc">
Demonstrate a Google basemap used with boundary overlay layer. Demonstrate use of the various types of Google layers.
</p> </p>
<div id="map"></div> <div id="map"></div>
<div id="docs"> <div id="docs">
For best performance, you must be using a version of the Google Maps For best performance, you must be using a version of the Google Maps
API which is v2.93 or higher. In order to use this version of the API, API which is v2.93 or higher. In order to use this version of the API,
it is best to simply set your application to use the string "v=2" in it is best to simply set your application to use the string "v=2" in
the request, rather than tying your application to an explicit version. the request, rather than tying your application to an explicit version.
</div> </div>
</body> </body>
</html> </html>