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>

44
examples/google.html
View File

@@ -7,42 +7,42 @@
width: 512px;
height: 512px;
border: 1px solid black;
background-color: red;
}
</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>
<!-- 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 type="text/javascript">
var lon = 5;
var lat = 40;
var zoom = 17;
var map, layer;
var map;
function init(){
map = new OpenLayers.Map( 'map' ,
{ controls: [new OpenLayers.Control.MouseDefaults()] , 'numZoomLevels':20});
function init() {
map = new OpenLayers.Map('map');
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]);
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.addLayers([gphy, gmap, ghyb, gsat]);
map.setCenter(new OpenLayers.LonLat(10.205188,48.857593), 5);
map.addControl( new OpenLayers.Control.LayerSwitcher() );
map.addControl( new OpenLayers.Control.PanZoomBar() );
map.setCenter(new OpenLayers.LonLat(10.2, 48.9), 5);
}
</script>
</head>
@@ -52,7 +52,7 @@
<div id="tags"></div>
<p id="shortdesc">
Demonstrate a Google basemap used with boundary overlay layer.
Demonstrate use of the various types of Google layers.
</p>
<div id="map"></div>