New GoogleNG layer using tiles from the v3 API's mapType::getTile method. r=bartvde (closes #3312)
git-svn-id: http://svn.openlayers.org/trunk/openlayers@12000 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
ahocevar
42
examples/google-ng.html
Normal file
42
examples/google-ng.html
Normal file
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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 Google NG Layer Example</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../theme/default/google.css" type="text/css">
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
<style type="text/css">
|
||||
.olControlAttribution {
|
||||
left: 5px;
|
||||
right: inherit;
|
||||
bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
<script src="http://maps.google.com/maps/api/js?v=3.5&sensor=false"></script>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="google-ng.js"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Google NG Layer Example</h1>
|
||||
<div id="tags">
|
||||
Google, api key, apikey
|
||||
</div>
|
||||
<p id="shortdesc">
|
||||
Demonstrate use of tiles from the Google Maps v3 API.
|
||||
</p>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="docs">
|
||||
<p>
|
||||
If you use OpenLayers.Layer.GoogleNG, the getTile method of the
|
||||
GMaps v3 API's MapType is used to load tiles. This allows for
|
||||
better integration than interacting with a whole map generated
|
||||
by a google.maps.Map instance, as done with
|
||||
OpenLayers.Layer.Google. See the
|
||||
<a href="google-ng.js" target="_blank">google-ng.js source</a>
|
||||
to see how this is done.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
28
examples/google-ng.js
Normal file
28
examples/google-ng.js
Normal file
@@ -0,0 +1,28 @@
|
||||
var map;
|
||||
|
||||
function init() {
|
||||
map = new OpenLayers.Map('map');
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
|
||||
var gphy = new OpenLayers.Layer.GoogleNG(
|
||||
{type: google.maps.MapTypeId.TERRAIN}
|
||||
);
|
||||
var gmap = new OpenLayers.Layer.GoogleNG(
|
||||
// ROADMAP, the default
|
||||
);
|
||||
var ghyb = new OpenLayers.Layer.GoogleNG(
|
||||
{type: google.maps.MapTypeId.HYBRID}
|
||||
);
|
||||
var gsat = new OpenLayers.Layer.GoogleNG(
|
||||
{type: google.maps.MapTypeId.SATELLITE}
|
||||
);
|
||||
|
||||
map.addLayers([gphy, gmap, ghyb, gsat]);
|
||||
|
||||
// GoogleNG uses EPSG:900913 as projection, so we have to
|
||||
// transform our coordinates
|
||||
map.setCenter(new OpenLayers.LonLat(10.2, 48.9).transform(
|
||||
new OpenLayers.Projection("EPSG:4326"),
|
||||
map.getProjectionObject()
|
||||
), 5);
|
||||
}
|
||||
@@ -120,6 +120,7 @@
|
||||
"OpenLayers/Marker/Box.js",
|
||||
"OpenLayers/Popup.js",
|
||||
"OpenLayers/Tile.js",
|
||||
"OpenLayers/Tile/Google.js",
|
||||
"OpenLayers/Tile/Image.js",
|
||||
"OpenLayers/Tile/Image/IFrame.js",
|
||||
"OpenLayers/Tile/WFS.js",
|
||||
@@ -152,6 +153,7 @@
|
||||
"OpenLayers/Layer/Boxes.js",
|
||||
"OpenLayers/Layer/XYZ.js",
|
||||
"OpenLayers/Layer/Bing.js",
|
||||
"OpenLayers/Layer/GoogleNG.js",
|
||||
"OpenLayers/Layer/TMS.js",
|
||||
"OpenLayers/Layer/TileCache.js",
|
||||
"OpenLayers/Layer/Zoomify.js",
|
||||
|
||||
239
lib/OpenLayers/Layer/GoogleNG.js
Normal file
239
lib/OpenLayers/Layer/GoogleNG.js
Normal file
@@ -0,0 +1,239 @@
|
||||
/* Copyright (c) 2006-2011 by OpenLayers Contributors (see authors.txt for
|
||||
* full list of contributors). Published under the Clear BSD license.
|
||||
* See http://svn.openlayers.org/trunk/openlayers/license.txt for the
|
||||
* full text of the license. */
|
||||
|
||||
/**
|
||||
* @requires OpenLayers/Layer/XYZ.js
|
||||
*/
|
||||
|
||||
/**
|
||||
* Class: OpenLayers.Layer.GoogleNG
|
||||
* Google layer using <OpenLayers.Tile.Google> tiles. Note: Terms of Service
|
||||
* compliant use requires the map to be configured with an
|
||||
* <OpenLayers.Control.Attribution> control and the attribution placed on or
|
||||
* near the map.
|
||||
*
|
||||
* Inherits from:
|
||||
* - <OpenLayers.Layer.XYZ>
|
||||
*/
|
||||
OpenLayers.Layer.GoogleNG = OpenLayers.Class(OpenLayers.Layer.XYZ, {
|
||||
|
||||
/**
|
||||
* Property: SUPPORTED_TRANSITIONS
|
||||
* {Array} An immutable (that means don't change it!) list of supported
|
||||
* transitionEffect values. This layer type supports none.
|
||||
*/
|
||||
SUPPORTED_TRANSITIONS: [],
|
||||
|
||||
/**
|
||||
* Property: attributionTemplate
|
||||
* {String}
|
||||
*/
|
||||
attributionTemplate: '<span class="olGoogleAttribution ${mapType}">' +
|
||||
'<div><a target="_blank" href="http://maps.google.com/maps?' +
|
||||
'll=${center}&z=${zoom}&t=${t}"><img width="62" height="24" ' +
|
||||
'src="http://maps.gstatic.com/mapfiles/google_white.png"/></a>' +
|
||||
'</div><a style="white-space: nowrap" target="_blank" ' +
|
||||
'href="http://maps.google.com/maps/api/staticmap?sensor=true' +
|
||||
'¢er=${center}&zoom=${zoom}&size=${size}&maptype=${mapType}">' +
|
||||
'Map data</a> - <a style="white-space: nowrap" target="_blank" ' +
|
||||
'href="http://www.google.com/help/terms_maps.html">' +
|
||||
'Terms of Use</a></span>',
|
||||
|
||||
/**
|
||||
* Property: mapTypes
|
||||
* {Object} mapping of {google.maps.MapTypeId} to the t param of
|
||||
* http://maps.google.com/maps? permalinks
|
||||
*/
|
||||
mapTypes: {
|
||||
"roadmap": "m",
|
||||
"satellite": "k",
|
||||
"hybrid": "h",
|
||||
"terrain": "p"
|
||||
},
|
||||
|
||||
/**
|
||||
* Property: mapObject
|
||||
* {google.maps.Map} Shared GMaps instance - will be set on the prototype
|
||||
* upon instantiation of the 1st GoogleNG layer
|
||||
*/
|
||||
mapObject: null,
|
||||
|
||||
/**
|
||||
* APIProperty: type
|
||||
* {google.maps.MapTypeId} See
|
||||
* http://code.google.com/apis/maps/documentation/javascript/reference.html#MapTypeId
|
||||
*/
|
||||
type: null,
|
||||
|
||||
/**
|
||||
* Constructor: OpenLayers.Layer.GoogleNG
|
||||
* Create a new GoogleNG layer. Requires the GMaps v3 JavaScript API script
|
||||
* included in the html document.
|
||||
*
|
||||
* Example:
|
||||
* (code)
|
||||
* var terrain = new OpenLayers.Layer.GoogleNG({
|
||||
* name: "Google Terrain",
|
||||
* type: google.maps.MapTypeId.TERRAIN
|
||||
* });
|
||||
* (end)
|
||||
*
|
||||
* Parameters:
|
||||
* options - {Object} Configuration properties for the layer.
|
||||
*
|
||||
* Required configuration properties:
|
||||
* type - {google.maps.MapTypeId} The layer identifier. See
|
||||
* http://code.google.com/apis/maps/documentation/javascript/reference.html#MapTypeId
|
||||
* for valid types.
|
||||
*
|
||||
* Any other documented layer properties can be provided in the config object.
|
||||
*/
|
||||
initialize: function(options) {
|
||||
options = OpenLayers.Util.applyDefaults({
|
||||
sphericalMercator: true
|
||||
}, options);
|
||||
|
||||
if (!options.type) {
|
||||
options.type = google.maps.MapTypeId.ROADMAP;
|
||||
}
|
||||
var newArgs = [options.name, null, options];
|
||||
OpenLayers.Layer.XYZ.prototype.initialize.apply(this, newArgs);
|
||||
|
||||
this.options.numZoomLevels = options.numZoomLevels;
|
||||
if (!this.mapObject) {
|
||||
OpenLayers.Layer.GoogleNG.prototype.mapObject =
|
||||
new google.maps.Map(document.createElement("div"));
|
||||
}
|
||||
if (this.mapObject.mapTypes[this.type]) {
|
||||
this.initLayer();
|
||||
} else {
|
||||
google.maps.event.addListenerOnce(
|
||||
this.mapObject,
|
||||
"idle",
|
||||
OpenLayers.Function.bind(this.initLayer, this)
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: initLayer
|
||||
*
|
||||
* Sets layer properties according to the metadata provided by the API
|
||||
*/
|
||||
initLayer: function() {
|
||||
var mapType = this.mapObject.mapTypes[this.type];
|
||||
if (!this.name) {
|
||||
this.setName("Google " + mapType.name);
|
||||
}
|
||||
|
||||
var numZoomLevels = mapType.maxZoom + 1;
|
||||
if (this.options.numZoomLevels != null) {
|
||||
numZoomLevels = Math.min(numZoomLevels, this.options.numZoomLevels);
|
||||
}
|
||||
var restrictedMinZoom;
|
||||
if (this.restrictedMinZoom || mapType.minZoom) {
|
||||
restrictedMinZoom = Math.max(
|
||||
mapType.minZoom || 0, this.restrictedMinZoom || 0
|
||||
);
|
||||
}
|
||||
|
||||
this.addOptions({
|
||||
restrictedMinZoom: restrictedMinZoom,
|
||||
numZoomLevels: numZoomLevels,
|
||||
tileSize: new OpenLayers.Size(
|
||||
mapType.tileSize.width, mapType.tileSize.height
|
||||
)
|
||||
});
|
||||
// redraw to populate tiles with content
|
||||
this.redraw();
|
||||
},
|
||||
|
||||
/**
|
||||
* APIMethod: addTile
|
||||
* Create a tile, initialize it, and add it to the layer div.
|
||||
*
|
||||
* Parameters
|
||||
* bounds - {<OpenLayers.Bounds>}
|
||||
* position - {<OpenLayers.Pixel>}
|
||||
*
|
||||
* Returns:
|
||||
* {<OpenLayers.Tile.Google>} The added OpenLayers.Tile.Google
|
||||
*/
|
||||
addTile:function(bounds, position) {
|
||||
return new OpenLayers.Tile.Google(
|
||||
this, position, bounds, this.tileOptions
|
||||
);
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: updateAttribution
|
||||
* Updates the attribution using the <attributionTemplate>
|
||||
*/
|
||||
updateAttribution: function() {
|
||||
var center = this.map.getCenter();
|
||||
center && center.transform(
|
||||
this.map.getProjectionObject(),
|
||||
new OpenLayers.Projection("EPSG:4326")
|
||||
);
|
||||
var size = this.map.getSize();
|
||||
this.attribution = OpenLayers.String.format(this.attributionTemplate, {
|
||||
center: center ? center.lat + "," + center.lon : "",
|
||||
zoom: this.map.getZoom(),
|
||||
size: size.w + "x" + size.h,
|
||||
t: this.mapTypes[this.type],
|
||||
mapType: this.type
|
||||
});
|
||||
this.map && this.map.events.triggerEvent("changelayer", {layer: this});
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: setMap
|
||||
*/
|
||||
setMap: function() {
|
||||
OpenLayers.Layer.XYZ.prototype.setMap.apply(this, arguments);
|
||||
|
||||
this.updateAttribution();
|
||||
this.map.events.register("moveend", this, this.updateAttribution);
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: removeMap
|
||||
*/
|
||||
removeMap: function() {
|
||||
OpenLayers.Layer.XYZ.prototype.removeMap.apply(this, arguments);
|
||||
this.map.events.unregister("moveend", this, this.updateAttribution);
|
||||
},
|
||||
|
||||
/**
|
||||
* APIMethod: clone
|
||||
*
|
||||
* Parameters:
|
||||
* obj - {Object}
|
||||
*
|
||||
* Returns:
|
||||
* {<OpenLayers.Layer.GoogleNG>} An exact clone of this
|
||||
* <OpenLayers.Layer.GoogleNG>
|
||||
*/
|
||||
clone: function(obj) {
|
||||
if (obj == null) {
|
||||
obj = new OpenLayers.Layer.GoogleNG(this.options);
|
||||
}
|
||||
//get all additions from superclasses
|
||||
obj = OpenLayers.Layer.XYZ.prototype.clone.apply(this, [obj]);
|
||||
// copy/set any non-init, non-simple values here
|
||||
return obj;
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: destroy
|
||||
*/
|
||||
destroy: function() {
|
||||
this.map &&
|
||||
this.map.events.unregister("moveend", this, this.updateAttribution);
|
||||
OpenLayers.Layer.XYZ.prototype.destroy.apply(this, arguments);
|
||||
},
|
||||
|
||||
CLASS_NAME: "OpenLayers.Layer.GoogleNG"
|
||||
});
|
||||
@@ -103,7 +103,9 @@ OpenLayers.Tile = OpenLayers.Class({
|
||||
this.position = position.clone();
|
||||
this.bounds = bounds.clone();
|
||||
this.url = url;
|
||||
this.size = size.clone();
|
||||
if (size) {
|
||||
this.size = size.clone();
|
||||
}
|
||||
|
||||
//give the tile a unique id based on its BBOX.
|
||||
this.id = OpenLayers.Util.createUniqueID("Tile_");
|
||||
|
||||
151
lib/OpenLayers/Tile/Google.js
Normal file
151
lib/OpenLayers/Tile/Google.js
Normal file
@@ -0,0 +1,151 @@
|
||||
/* Copyright (c) 2006-2011 by OpenLayers Contributors (see authors.txt for
|
||||
* full list of contributors). Published under the Clear BSD license.
|
||||
* See http://svn.openlayers.org/trunk/openlayers/license.txt for the
|
||||
* full text of the license. */
|
||||
|
||||
|
||||
/*
|
||||
* @requires OpenLayers/BaseTypes/Class.js
|
||||
* @requires OpenLayers/Util.js
|
||||
* @requires OpenLayers/Console.js
|
||||
* @requires OpenLayers/Lang.js
|
||||
*/
|
||||
|
||||
/*
|
||||
* Class: OpenLayers.Tile.Google
|
||||
* Instances of OpenLayers.Tile.Google are used to manage the tiles created
|
||||
* by google.maps.MapType (see
|
||||
* http://code.google.com/apis/maps/documentation/javascript/reference.html#MapType).
|
||||
*
|
||||
* Inherits from:
|
||||
* - <OpenLayers.Tile>
|
||||
*/
|
||||
OpenLayers.Tile.Google = OpenLayers.Class(OpenLayers.Tile, {
|
||||
|
||||
/**
|
||||
* Property: node
|
||||
* {DOMElement} The tile node from the MapType's getTile method
|
||||
*/
|
||||
node: null,
|
||||
|
||||
/**
|
||||
* Constructor: OpenLayers.Tile.Google
|
||||
* Constructor for a new <OpenLayers.Tile.Google> instance.
|
||||
*
|
||||
* Parameters:
|
||||
* layer - {<OpenLayers.Layer>} layer that the tile will go in.
|
||||
* position - {<OpenLayers.Pixel>}
|
||||
* bounds - {<OpenLayers.Bounds>}
|
||||
* options - {Object}
|
||||
*/
|
||||
initialize: function(layer, position, bounds, options) {
|
||||
OpenLayers.Tile.prototype.initialize.apply(this, [
|
||||
layer, position, bounds, null, null, options
|
||||
]);
|
||||
},
|
||||
|
||||
/**
|
||||
* APIMethod: destroy
|
||||
* Nullify references to prevent circular references and memory leaks.
|
||||
*/
|
||||
destroy:function() {
|
||||
this.node && this.clear();
|
||||
this.node = null;
|
||||
OpenLayers.Tile.prototype.destroy.apply(this, arguments);
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: clone
|
||||
*
|
||||
* Parameters:
|
||||
* obj - {<OpenLayers.Tile>} The tile to be cloned
|
||||
*
|
||||
* Returns:
|
||||
* {<OpenLayers.Tile>} An exact clone of this <OpenLayers.Tile.Google>
|
||||
*/
|
||||
clone: function (obj) {
|
||||
if (obj == null) {
|
||||
obj = new OpenLayers.Tile.Google(this.layer,
|
||||
this.position,
|
||||
this.bounds);
|
||||
}
|
||||
|
||||
// catch any randomly tagged-on properties
|
||||
OpenLayers.Util.applyDefaults(obj, this);
|
||||
|
||||
obj.node = null;
|
||||
|
||||
return obj;
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: draw
|
||||
* Check that a tile should be drawn, and draw it.
|
||||
*
|
||||
* Returns:
|
||||
* {Boolean} Always returns true.
|
||||
*/
|
||||
draw: function() {
|
||||
var layerType = this.layer.mapObject.mapTypes[this.layer.type];
|
||||
if (layerType && OpenLayers.Tile.prototype.draw.apply(this, arguments)) {
|
||||
var xyz = this.layer.getXYZ(this.bounds);
|
||||
var point = new google.maps.Point(xyz.x, xyz.y);
|
||||
|
||||
// The hybrid tile consists of two images. For some reason, we have
|
||||
// to make sure that the satellite image loads first, otherwise we
|
||||
// occasionally get blank tiles for one of the two images. This is
|
||||
// done by requesting the tile for just the satellite mapType
|
||||
// first, before requesting the hybrid one.
|
||||
//TODO revisit this - it may be a temporary issue with GMaps
|
||||
var tempTile;
|
||||
if (this.layer.type === google.maps.MapTypeId.HYBRID) {
|
||||
tempTile = layerType.getTile(point, xyz.z, document);
|
||||
}
|
||||
|
||||
this.node = layerType.getTile(point, xyz.z, document);
|
||||
|
||||
this.isLoading = true;
|
||||
this.events.triggerEvent("loadstart");
|
||||
|
||||
this.layer.div.appendChild(this.node);
|
||||
|
||||
// We only modify what we need to - we expect the size to be set
|
||||
// by getTile, and we have a test that will fail if this changes.
|
||||
OpenLayers.Util.modifyDOMElement(
|
||||
this.node, null, this.position, null, "absolute"
|
||||
);
|
||||
|
||||
// The images inside the node returned from getTile seem to be
|
||||
// preloaded already, so registering onload events on these images
|
||||
// won't work. Instead, we trigger the loadend event immediately
|
||||
// in the next cycle.
|
||||
window.setTimeout(OpenLayers.Function.bind(function() {
|
||||
this.isLoading = false;
|
||||
// check for this.events - we may be destroyed already
|
||||
this.events && this.events.triggerEvent("loadend");
|
||||
|
||||
// see hybrid tile issue above
|
||||
//TODO revisit this - it may be a temporary issue with GMaps
|
||||
if (tempTile) {
|
||||
layerType.releaseTile(tempTile);
|
||||
}
|
||||
}, this), 0);
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: clear
|
||||
* Clear the tile of any bounds/position-related data so that it can
|
||||
* be reused in a new location. To be implemented by subclasses.
|
||||
*/
|
||||
clear: function() {
|
||||
if (this.node) {
|
||||
this.node.parentNode &&
|
||||
this.node.parentNode.removeChild(this.node);
|
||||
this.layer.mapObject.mapTypes[this.layer.type].releaseTile(this.node);
|
||||
}
|
||||
},
|
||||
|
||||
CLASS_NAME: "OpenLayers.Tile.Google"
|
||||
});
|
||||
96
tests/Layer/GoogleNG.html
Normal file
96
tests/Layer/GoogleNG.html
Normal file
@@ -0,0 +1,96 @@
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://maps.google.com/maps/api/js?sensor=false&v=3.5"></script>
|
||||
<script src="../OLLoader.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map, layer;
|
||||
|
||||
function test_constructor(t) {
|
||||
t.plan(2);
|
||||
|
||||
layer = new OpenLayers.Layer.GoogleNG({type: google.maps.MapTypeId.HYBRID});
|
||||
t.ok(layer instanceof OpenLayers.Layer.GoogleNG, "returns OpenLayers.Layer.GoogleNG object" );
|
||||
t.eq(layer.type, google.maps.MapTypeId.HYBRID, "Layer type set");
|
||||
}
|
||||
|
||||
function test_initLayer(t) {
|
||||
t.plan(6);
|
||||
|
||||
map = new OpenLayers.Map("map");
|
||||
var log = {};
|
||||
layer = new OpenLayers.Layer.GoogleNG({
|
||||
numZoomLevels: 10,
|
||||
restrictedMinZoom: 2,
|
||||
initLayer: function() {
|
||||
log[layer.id] = true;
|
||||
OpenLayers.Layer.GoogleNG.prototype.initLayer.apply(this, arguments);
|
||||
}
|
||||
});
|
||||
map.addLayer(layer);
|
||||
map.zoomToMaxExtent();
|
||||
|
||||
var map2 = new OpenLayers.Map("map2");
|
||||
var layer2 = new OpenLayers.Layer.GoogleNG({
|
||||
numZoomLevels: 24,
|
||||
initLayer: function() {
|
||||
log[layer2.id] = true;
|
||||
var origMinZoom = layer2.mapObject.mapTypes[layer2.type].minZoom;
|
||||
// pretend the API reports a minZoom of 1
|
||||
layer2.mapObject.mapTypes[layer2.type].minZoom = 1;
|
||||
OpenLayers.Layer.GoogleNG.prototype.initLayer.apply(this, arguments);
|
||||
layer2.mapObject.mapTypes[layer2.type].minZoom = origMinZoom;
|
||||
}
|
||||
});
|
||||
map2.addLayer(layer2);
|
||||
map2.zoomToMaxExtent();
|
||||
|
||||
t.delay_call(1, function() {
|
||||
t.eq(log[layer.id], true, "initLayer called for 1st layer");
|
||||
t.eq(log[layer2.id], true, "initLayer called for 2nd layer");
|
||||
|
||||
t.eq(layer.numZoomLevels, 10, "numZoomLevels from configuration takes precedence if lower");
|
||||
t.eq(layer2.numZoomLevels, layer2.mapObject.mapTypes[layer2.type].maxZoom+1, "numZoomLevels from API takes precedence if lower");
|
||||
|
||||
t.eq(layer.restrictedMinZoom, 2, "restrictedMinZoom from configuration takes precedence if higher");
|
||||
t.eq(layer2.restrictedMinZoom, 1, "restrictedMinZoom from API takes precedence if higher");
|
||||
|
||||
map.destroy();
|
||||
map2.destroy();
|
||||
});
|
||||
}
|
||||
|
||||
function test_attribution(t) {
|
||||
t.plan(3);
|
||||
|
||||
var log = [];
|
||||
map = new OpenLayers.Map("map");
|
||||
layer = new OpenLayers.Layer.GoogleNG({type: google.maps.MapTypeId.HYBRID});
|
||||
map.addLayer(layer);
|
||||
map.zoomToMaxExtent();
|
||||
|
||||
t.delay_call(1, function() {
|
||||
t.ok(layer.attribution.indexOf('olGoogleAttribution hybrid') !== -1, "Attribution has the correct css class");
|
||||
t.ok(layer.attribution.indexOf('?ll=0,0&z=0&t=h"') != -1, "maps.google.com link has correct parameters");
|
||||
t.ok(layer.attribution.indexOf('¢er=0,0&zoom=0&size=500x550&maptype=hybrid') != -1 , "Attribution has correct map data link");
|
||||
map.destroy();
|
||||
});
|
||||
}
|
||||
|
||||
function test_clone(t) {
|
||||
t.plan(2);
|
||||
|
||||
var clone;
|
||||
|
||||
layer = new OpenLayers.Layer.GoogleNG({type: google.maps.MapTypeId.HYBRID});
|
||||
clone = layer.clone();
|
||||
t.ok(clone instanceof OpenLayers.Layer.GoogleNG, "clone is a Layer.GoogleNG instance");
|
||||
t.eq(clone.type, google.maps.MapTypeId.HYBRID, "with the correct map type");
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map" style="width:500px;height:550px"></div>
|
||||
<div id="map2" style="width:500px;height:550px"></div>
|
||||
</body>
|
||||
</html>
|
||||
74
tests/Tile/Google.html
Normal file
74
tests/Tile/Google.html
Normal file
@@ -0,0 +1,74 @@
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://maps.google.com/maps/api/js?sensor=false&v=3.5"></script>
|
||||
<script src="../OLLoader.js"></script>
|
||||
<script type="text/javascript">
|
||||
var tile;
|
||||
var layer = new OpenLayers.Layer.GoogleNG();
|
||||
var position = new OpenLayers.Pixel(20,30);
|
||||
var bounds = new OpenLayers.Bounds(1,2,3,4);
|
||||
|
||||
|
||||
function test_constructor (t) {
|
||||
t.plan( 4 );
|
||||
|
||||
tile = new OpenLayers.Tile.Google(layer, position, bounds);
|
||||
|
||||
t.ok( tile instanceof OpenLayers.Tile.Google, "new OpenLayers.Tile.Google returns Tile object" );
|
||||
t.ok( tile.layer == layer, "tile.layer is set correctly");
|
||||
t.ok( tile.position.equals(position), "tile.position is set correctly");
|
||||
t.ok( tile.bounds.equals(bounds), "tile.bounds is set correctly");
|
||||
}
|
||||
|
||||
function test_clone (t) {
|
||||
t.plan( 5 );
|
||||
|
||||
tile = new OpenLayers.Tile.Google(layer, position, bounds);
|
||||
tile.node = document.createElement("div");
|
||||
var clone = tile.clone();
|
||||
|
||||
t.ok( clone instanceof OpenLayers.Tile.Google, "OpenLayers.Tile.Google.clone returns Tile.Google object" );
|
||||
t.ok( clone.layer == layer, "clone.layer is set correctly");
|
||||
t.ok( clone.position.equals(position), "clone.position is set correctly");
|
||||
t.ok( clone.bounds.equals(bounds), "clone.bounds is set correctly");
|
||||
t.ok( !clone.node, "node not cloned");
|
||||
}
|
||||
|
||||
function test_draw (t) {
|
||||
t.plan( 5 );
|
||||
|
||||
var map = new OpenLayers.Map('map');
|
||||
map.addLayer(layer);
|
||||
|
||||
tile = new OpenLayers.Tile.Google(layer, position, bounds);
|
||||
|
||||
tile.events.register("loadstart", this, function() {
|
||||
t.ok(true, "loadstart triggered");
|
||||
});
|
||||
tile.events.register("loadend", this, function() {
|
||||
t.ok(true, "loadend triggered");
|
||||
});
|
||||
|
||||
t.delay_call(1, function() {
|
||||
//this should trigger a "loadstart" event
|
||||
tile.draw();
|
||||
|
||||
t.ok( tile.node, "tile.draw creates a node");
|
||||
// The two tests below will fail when getTile doesn't set the tile size
|
||||
t.eq( tile.node.style.width, layer.tileSize.w+"px", "Image width is correct" );
|
||||
t.eq( tile.node.style.height, layer.tileSize.h+"px", "Image height is correct" );
|
||||
});
|
||||
t.delay_call(2, function() {
|
||||
map.removeLayer(layer);
|
||||
map.destroy();
|
||||
/* wait until "loadend" fires */
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map" style="height:550px;width:500px"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -144,6 +144,7 @@
|
||||
<li>Layer/GML.html</li>
|
||||
<li>Layer/Google.html</li>
|
||||
<li>Layer/Google/v3.html</li>
|
||||
<li>Layer/GoogleNG.html</li>
|
||||
<li>Layer/Grid.html</li>
|
||||
<li>Layer/HTTPRequest.html</li>
|
||||
<li>Layer/Image.html</li>
|
||||
@@ -213,6 +214,7 @@
|
||||
<li>Symbolizer/Raster.html</li>
|
||||
<li>Symbolizer/Text.html</li>
|
||||
<li>Tile.html</li>
|
||||
<li>Tile/Google.html</li>
|
||||
<li>Tile/Image.html</li>
|
||||
<li>Tile/Image/IFrame.html</li>
|
||||
<li>Tile/WFS.html</li>
|
||||
|
||||
@@ -355,6 +355,19 @@ div.olControlSaveFeaturesItemInactive {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.olGoogleAttribution.hybrid, .olGoogleAttribution.satellite {
|
||||
color: #DDD;
|
||||
}
|
||||
.olGoogleAttribution {
|
||||
color: #333;
|
||||
}
|
||||
span.olGoogleAttribution a {
|
||||
color: #77C;
|
||||
}
|
||||
span.olGoogleAttribution.hybrid a, span.olGoogleAttribution.satellite a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/**
|
||||
* Editing and navigation icons.
|
||||
* (using the editing_tool_bar.png sprint image)
|
||||
|
||||
Reference in New Issue
Block a user