Add navigation history control. This control creates two obligate controls: next and previous. Calling trigger on the next and previous controls steps through the navigation history. r=crschmidt,ahocevar,pgiraud (closes #1240)
git-svn-id: http://svn.openlayers.org/trunk/openlayers@6157 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Tim Schaub
88
examples/navigation-history.html
Normal file
88
examples/navigation-history.html
Normal file
@@ -0,0 +1,88 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>OpenLayers Navigation History Example</title>
|
||||
<style type="text/css">
|
||||
#map {
|
||||
width: 512px;
|
||||
height: 256px;
|
||||
border: 1px solid gray;
|
||||
}
|
||||
#panel {
|
||||
right: 0px;
|
||||
height: 30px;
|
||||
width: 200px;
|
||||
}
|
||||
#panel div {
|
||||
float: left;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map, nav, panel;
|
||||
|
||||
// preload images if you care
|
||||
var preload = [
|
||||
"../theme/default/img/view_previous_on.png",
|
||||
"../theme/default/img/view_next_on.png"
|
||||
];
|
||||
var img = new Array(preload.length);
|
||||
for(var i=0; i<preload.length; ++i) {
|
||||
img[i] = new Image();
|
||||
img[i].src = preload[i];
|
||||
}
|
||||
|
||||
function init(){
|
||||
map = new OpenLayers.Map('map');
|
||||
|
||||
// set any application specific behavior here
|
||||
// this will become unnecessary when controls have better event handling
|
||||
var previousOptions = {
|
||||
onActivate: function() {panel.redraw();},
|
||||
onDeactivate: function() {panel.redraw();}
|
||||
};
|
||||
var nextOptions = {
|
||||
onActivate: function() {panel.redraw();},
|
||||
onDeactivate: function() {panel.redraw();}
|
||||
};
|
||||
var options = {
|
||||
previousOptions: previousOptions,
|
||||
nextOptions: nextOptions
|
||||
};
|
||||
nav = new OpenLayers.Control.NavigationHistory(options);
|
||||
map.addControl(nav);
|
||||
|
||||
panel = new OpenLayers.Control.Panel(
|
||||
{div: document.getElementById("panel")}
|
||||
);
|
||||
panel.addControls([nav.next, nav.previous]);
|
||||
map.addControl(panel);
|
||||
|
||||
var layer = new OpenLayers.Layer.WMS(
|
||||
"OpenLayers WMS",
|
||||
"http://labs.metacarta.com/wms/vmap0",
|
||||
{layers: 'basic'}
|
||||
);
|
||||
map.addLayer(layer);
|
||||
map.zoomToMaxExtent();
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Map Navigation History Example</h1>
|
||||
|
||||
<div id="tags">
|
||||
</div>
|
||||
|
||||
<p id="shortdesc">
|
||||
A control for zooming to previous and next map extents.
|
||||
</p>
|
||||
|
||||
<div id="map"></div>
|
||||
Map navigation history controls<div id="panel"><div>
|
||||
<div id="docs"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -155,6 +155,7 @@
|
||||
"OpenLayers/Control/ModifyFeature.js",
|
||||
"OpenLayers/Control/Panel.js",
|
||||
"OpenLayers/Control/SelectFeature.js",
|
||||
"OpenLayers/Control/NavigationHistory.js",
|
||||
"OpenLayers/Geometry.js",
|
||||
"OpenLayers/Geometry/Rectangle.js",
|
||||
"OpenLayers/Geometry/Collection.js",
|
||||
|
||||
420
lib/OpenLayers/Control/NavigationHistory.js
Normal file
420
lib/OpenLayers/Control/NavigationHistory.js
Normal file
@@ -0,0 +1,420 @@
|
||||
/* Copyright (c) 2006-2008 MetaCarta, Inc., published under the Clear BSD
|
||||
* license. See http://svn.openlayers.org/trunk/openlayers/license.txt for the
|
||||
* full text of the license. */
|
||||
|
||||
/**
|
||||
* @requires OpenLayers/Control.js
|
||||
*/
|
||||
|
||||
/**
|
||||
* Class: OpenLayers.Control.NavigationHistory
|
||||
* A navigation history control. This is a meta-control, that creates two
|
||||
* dependent controls: <previous> and <next>. Call the trigger method
|
||||
* on the <previous> and <next> controls to restore previous and next
|
||||
* history states. The previous and next controls will become active
|
||||
* when there are available states to restore and will become deactive
|
||||
* when there are no states to restore.
|
||||
*
|
||||
* Inherits from:
|
||||
* - <OpenLayers.Control.Control>
|
||||
*/
|
||||
OpenLayers.Control.NavigationHistory = OpenLayers.Class(OpenLayers.Control, {
|
||||
|
||||
/**
|
||||
* Property: type
|
||||
* {String} Note that this control is not intended to be added directly
|
||||
* to a control panel. Instead, add the sub-controls previous and
|
||||
* next. These sub-controls are button type controls that activate
|
||||
* and deactivate themselves. If this parent control is added to
|
||||
* a panel, it will act as a toggle.
|
||||
*/
|
||||
type: OpenLayers.Control.TYPE_TOGGLE,
|
||||
|
||||
/**
|
||||
* APIProperty: previous
|
||||
* {OpenLayers.Control} A button type control whose trigger method restores
|
||||
* the previous state managed by this control.
|
||||
*/
|
||||
previous: null,
|
||||
|
||||
/**
|
||||
* APIProperty: previousOptions
|
||||
* {Object} Set this property on the options argument of the constructor
|
||||
* to set optional properties on the <previous> control.
|
||||
*/
|
||||
previousOptions: null,
|
||||
|
||||
/**
|
||||
* APIProperty: next
|
||||
* {OpenLayers.Control} A button type control whose trigger method restores
|
||||
* the next state managed by this control.
|
||||
*/
|
||||
next: null,
|
||||
|
||||
/**
|
||||
* APIProperty: nextOptions
|
||||
* {Object} Set this property on the options argument of the constructor
|
||||
* to set optional properties on the <next> control.
|
||||
*/
|
||||
nextOptions: null,
|
||||
|
||||
/**
|
||||
* APIProperty: limit
|
||||
* {Integer} Optional limit on the number of history items to retain. If
|
||||
* null, there is no limit. Default is 50.
|
||||
*/
|
||||
limit: 50,
|
||||
|
||||
/**
|
||||
* Property: activateOnDraw
|
||||
* {Boolean} Activate the control when it is first added to the map.
|
||||
* Default is true.
|
||||
*/
|
||||
activateOnDraw: true,
|
||||
|
||||
/**
|
||||
* Property: clearOnDeactivate
|
||||
* {Boolean} Clear the history when the control is deactivated. Default
|
||||
* is false.
|
||||
*/
|
||||
clearOnDeactivate: false,
|
||||
|
||||
/**
|
||||
* Property: events
|
||||
* {<OpenLayers.Events>} An events object that will be used for registering
|
||||
* listeners. Defaults to the map events for this control.
|
||||
*/
|
||||
events: null,
|
||||
|
||||
/**
|
||||
* Property: registry
|
||||
* {Object} An object with keys corresponding to event types. Values
|
||||
* are functions that return an object representing the current state.
|
||||
*/
|
||||
registry: null,
|
||||
|
||||
/**
|
||||
* Property: nextStack
|
||||
* {Array} Array of items in the history.
|
||||
*/
|
||||
nextStack: null,
|
||||
|
||||
/**
|
||||
* Property: previousStack
|
||||
* {Array} List of items in the history. First item represents the current
|
||||
* state.
|
||||
*/
|
||||
previousStack: null,
|
||||
|
||||
/**
|
||||
* Property: listeners
|
||||
* {Object} An object containing properties corresponding to event types.
|
||||
* This object is used to configure the control and is modified on
|
||||
* construction.
|
||||
*/
|
||||
listeners: null,
|
||||
|
||||
/**
|
||||
* Property: restoring
|
||||
* {Boolean} Currently restoring a history state. This is set to true
|
||||
* before callilng restore and set to false after restore returns.
|
||||
*/
|
||||
restoring: false,
|
||||
|
||||
/**
|
||||
* Constructor: OpenLayers.Control.NavigationHistory
|
||||
*
|
||||
* Parameters:
|
||||
* options - {Object} An optional object whose properties will be used
|
||||
* to extend the control.
|
||||
*/
|
||||
initialize: function(options) {
|
||||
OpenLayers.Control.prototype.initialize.apply(this, [options]);
|
||||
|
||||
this.registry = OpenLayers.Util.extend({
|
||||
"moveend": function() {
|
||||
return {
|
||||
center: this.map.getCenter(),
|
||||
resolution: this.map.getResolution()
|
||||
};
|
||||
}
|
||||
}, this.registry);
|
||||
|
||||
this.clear();
|
||||
|
||||
var previousOptions = {
|
||||
trigger: OpenLayers.Function.bind(this.previousTrigger, this),
|
||||
displayClass: this.displayClass + "Previous",
|
||||
onActivate: function() {},
|
||||
onDeactivate: function() {}
|
||||
};
|
||||
if(options) {
|
||||
OpenLayers.Util.extend(previousOptions, options.previousOptions);
|
||||
}
|
||||
this.previous = new OpenLayers.Control.Button(previousOptions);
|
||||
|
||||
var nextOptions = {
|
||||
trigger: OpenLayers.Function.bind(this.nextTrigger, this),
|
||||
displayClass: this.displayClass + "Next",
|
||||
onActivate: function() {},
|
||||
onDeactivate: function() {}
|
||||
};
|
||||
if(options) {
|
||||
OpenLayers.Util.extend(nextOptions, options.nextOptions);
|
||||
}
|
||||
this.next = new OpenLayers.Control.Button(nextOptions);
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: onPreviousChange
|
||||
* Called when the previous history stack changes.
|
||||
*
|
||||
* Parameters:
|
||||
* state - {Object} An object representing the state to be restored
|
||||
* if previous is triggered again or null if no previous states remain.
|
||||
* length - {Integer} The number of remaining previous states that can
|
||||
* be restored.
|
||||
*/
|
||||
onPreviousChange: function(state, length) {
|
||||
if(state && !this.previous.active) {
|
||||
this.previous.activate();
|
||||
this.previous.onActivate();
|
||||
} else if(!state && this.previous.active) {
|
||||
this.previous.deactivate();
|
||||
this.previous.onDeactivate();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: onNextChange
|
||||
* Called when the next history stack changes.
|
||||
*
|
||||
* Parameters:
|
||||
* state - {Object} An object representing the state to be restored
|
||||
* if next is triggered again or null if no next states remain.
|
||||
* length - {Integer} The number of remaining next states that can
|
||||
* be restored.
|
||||
*/
|
||||
onNextChange: function(state, length) {
|
||||
if(state && !this.next.active) {
|
||||
this.next.activate();
|
||||
this.next.onActivate();
|
||||
} else if(!state && this.next.active) {
|
||||
this.next.deactivate();
|
||||
this.next.onDeactivate();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* APIMethod: destroy
|
||||
* Destroy the control.
|
||||
*/
|
||||
destroy: function() {
|
||||
OpenLayers.Control.prototype.destroy.apply(this);
|
||||
this.previous.destroy();
|
||||
this.next.destroy();
|
||||
this.deactivate();
|
||||
for(var prop in this) {
|
||||
this[prop] = null;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: setMap
|
||||
* Set the map property for the control and <previous> and <next> child
|
||||
* controls.
|
||||
*
|
||||
* Parameters:
|
||||
* map - {<OpenLayers.Map>}
|
||||
*/
|
||||
setMap: function(map) {
|
||||
this.map = map;
|
||||
this.next.setMap(map);
|
||||
this.previous.setMap(map);
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: draw
|
||||
* Called when the control is added to the map.
|
||||
*/
|
||||
draw: function() {
|
||||
OpenLayers.Control.prototype.draw.apply(this, arguments);
|
||||
this.next.draw();
|
||||
this.previous.draw();
|
||||
if(this.activateOnDraw) {
|
||||
this.activate();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: previousTrigger
|
||||
* Restore the previous state. If no items are in the previous history
|
||||
* stack, this has no effect.
|
||||
*
|
||||
* Returns:
|
||||
* {Object} Item representing state that was restored. Undefined if no
|
||||
* items are in the previous history stack.
|
||||
*/
|
||||
previousTrigger: function() {
|
||||
var current = this.previousStack.shift();
|
||||
var state = this.previousStack.shift();
|
||||
if(state != undefined) {
|
||||
this.nextStack.unshift(current);
|
||||
this.previousStack.unshift(state);
|
||||
this.restoring = true;
|
||||
this.restore(state);
|
||||
this.restoring = false;
|
||||
this.onNextChange(this.nextStack[0], this.nextStack.length);
|
||||
this.onPreviousChange(
|
||||
this.previousStack[1], this.previousStack.length - 1
|
||||
);
|
||||
} else {
|
||||
this.previousStack.unshift(current);
|
||||
}
|
||||
return state;
|
||||
},
|
||||
|
||||
/**
|
||||
* APIMethod: nextTrigger
|
||||
* Restore the next state. If no items are in the next history
|
||||
* stack, this has no effect. The next history stack is populated
|
||||
* as states are restored from the previous history stack.
|
||||
*
|
||||
* Returns:
|
||||
* {Object} Item representing state that was restored. Undefined if no
|
||||
* items are in the next history stack.
|
||||
*/
|
||||
nextTrigger: function() {
|
||||
var state = this.nextStack.shift();
|
||||
if(state != undefined) {
|
||||
this.previousStack.unshift(state);
|
||||
this.restoring = true;
|
||||
this.restore(state);
|
||||
this.restoring = false;
|
||||
this.onNextChange(this.nextStack[0], this.nextStack.length);
|
||||
this.onPreviousChange(
|
||||
this.previousStack[1], this.previousStack.length - 1
|
||||
);
|
||||
}
|
||||
return state;
|
||||
},
|
||||
|
||||
/**
|
||||
* APIMethod: clear
|
||||
* Clear history.
|
||||
*/
|
||||
clear: function() {
|
||||
this.previousStack = [];
|
||||
this.nextStack = [];
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: restore
|
||||
* Update the state with the given object.
|
||||
*
|
||||
* Parameters:
|
||||
* state - {Object} An object representing the state to restore.
|
||||
*/
|
||||
restore: function(state) {
|
||||
var zoom = this.map.getZoomForResolution(state.resolution);
|
||||
this.map.setCenter(state.center, zoom);
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: setListeners
|
||||
* Sets functions to be registered in the listeners object.
|
||||
*/
|
||||
setListeners: function() {
|
||||
this.listeners = {};
|
||||
for(var type in this.registry) {
|
||||
this.listeners[type] = OpenLayers.Function.bind(function() {
|
||||
if(!this.restoring) {
|
||||
var state = this.registry[type].apply(this, arguments);
|
||||
this.previousStack.unshift(state);
|
||||
if(this.previousStack.length > 1) {
|
||||
this.onPreviousChange(
|
||||
this.previousStack[1], this.previousStack.length - 1
|
||||
);
|
||||
}
|
||||
if(this.previousStack.length > (this.limit + 1)) {
|
||||
this.previousStack.pop();
|
||||
}
|
||||
if(this.nextStack.length > 0) {
|
||||
this.nextStack = [];
|
||||
this.onNextChange(null, 0);
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}, this);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* APIMethod: activate
|
||||
* Activate the control. This registers any listeners.
|
||||
*
|
||||
* Returns:
|
||||
* {Boolean} Control successfully activated.
|
||||
*/
|
||||
activate: function() {
|
||||
var activated = false;
|
||||
if(this.map) {
|
||||
if(OpenLayers.Control.prototype.activate.apply(this)) {
|
||||
if(this.listeners == null) {
|
||||
this.setListeners();
|
||||
}
|
||||
if(!this.events) {
|
||||
this.events = this.map.events;
|
||||
}
|
||||
for(var type in this.listeners) {
|
||||
this.events.register(type, this, this.listeners[type]);
|
||||
}
|
||||
activated = true;
|
||||
if(this.previousStack.length == 0) {
|
||||
this.initStack();
|
||||
}
|
||||
}
|
||||
}
|
||||
return activated;
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: initStack
|
||||
* Called after the control is activated if the previous history stack is
|
||||
* empty.
|
||||
*/
|
||||
initStack: function() {
|
||||
if(this.map.getCenter()) {
|
||||
this.listeners.moveend();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* APIMethod: deactivate
|
||||
* Deactivate the control. This unregisters any listeners.
|
||||
*
|
||||
* Returns:
|
||||
* {Boolean} Control successfully deactivated.
|
||||
*/
|
||||
deactivate: function() {
|
||||
var deactivated = false;
|
||||
if(this.map) {
|
||||
if(OpenLayers.Control.prototype.deactivate.apply(this)) {
|
||||
for(var type in this.listeners) {
|
||||
this.events.unregister(
|
||||
type, this, this.listeners[type]
|
||||
);
|
||||
}
|
||||
if(this.clearOnDeactivate) {
|
||||
this.clear();
|
||||
}
|
||||
deactivated = true;
|
||||
}
|
||||
}
|
||||
return deactivated;
|
||||
},
|
||||
|
||||
CLASS_NAME: "OpenLayers.Control.NavigationHistory"
|
||||
});
|
||||
|
||||
176
tests/Control/test_NavigationHistory.html
Normal file
176
tests/Control/test_NavigationHistory.html
Normal file
@@ -0,0 +1,176 @@
|
||||
<html>
|
||||
<head>
|
||||
<script src="../../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
function test_initialize(t) {
|
||||
t.plan(4);
|
||||
control = new OpenLayers.Control.NavigationHistory();
|
||||
t.ok(control instanceof OpenLayers.Control.NavigationHistory,
|
||||
"constructor returns correct instance");
|
||||
t.eq(control.displayClass, "olControlNavigationHistory",
|
||||
"displayClass is correct");
|
||||
t.ok(control.next instanceof OpenLayers.Control.Button,
|
||||
"constructor creates next control");
|
||||
t.ok(control.previous instanceof OpenLayers.Control.Button,
|
||||
"constructor creates previous control");
|
||||
}
|
||||
|
||||
function test_destroy(t) {
|
||||
t.plan(2);
|
||||
control = new OpenLayers.Control.NavigationHistory();
|
||||
control.next.destroy = function() {
|
||||
t.ok(true, "destroy calls next.destroy");
|
||||
}
|
||||
control.previous.destroy = function() {
|
||||
t.ok(true, "destroy calls previous.destroy");
|
||||
}
|
||||
control.destroy();
|
||||
}
|
||||
|
||||
function test_previous(t) {
|
||||
var numStates = 10;
|
||||
|
||||
t.plan(
|
||||
numStates * 3 // for lon, lat, zoom
|
||||
+ 3 // for confirming that previous with empty stack works
|
||||
);
|
||||
|
||||
var history = new Array(numStates);
|
||||
for(var i=0; i<numStates; ++i) {
|
||||
history[i] = {
|
||||
center: new OpenLayers.LonLat(
|
||||
(i * 360 / numStates) - 180, (i * 180 / numStates) - 90
|
||||
),
|
||||
zoom: i
|
||||
};
|
||||
}
|
||||
|
||||
var map = new OpenLayers.Map("map");
|
||||
var layer = new OpenLayers.Layer(
|
||||
"test", {isBaseLayer: true}
|
||||
);
|
||||
map.addLayer(layer);
|
||||
var control = new OpenLayers.Control.NavigationHistory();
|
||||
map.addControl(control);
|
||||
|
||||
// set previous states
|
||||
for(i=0; i<numStates; ++i) {
|
||||
map.setCenter(history[i].center, history[i].zoom);
|
||||
}
|
||||
// test previous states
|
||||
for(i=numStates-1; i>=0; --i) {
|
||||
t.eq(map.getCenter().lon, history[i].center.lon, "(step " + i + ") lon correct");
|
||||
t.eq(map.getCenter().lat, history[i].center.lat, "(step " + i + ") lat correct");
|
||||
t.eq(map.getZoom(), history[i].zoom, "(step " + i + ") zoom correct");
|
||||
control.previous.trigger();
|
||||
}
|
||||
// test previous with empty stack
|
||||
t.eq(map.getCenter().lon, history[0].center.lon, "(step 0 again) lon correct");
|
||||
t.eq(map.getCenter().lat, history[0].center.lat, "(step 0 again) lat correct");
|
||||
t.eq(map.getZoom(), history[0].zoom, "(step 0 again) zoom correct");
|
||||
}
|
||||
|
||||
function test_next(t) {
|
||||
var numStates = 10;
|
||||
|
||||
t.plan(
|
||||
numStates * 3 // for lon, lat, zoom
|
||||
+ 3 // for confirming that next with empty stack works
|
||||
);
|
||||
|
||||
var history = new Array(numStates);
|
||||
for(var i=0; i<numStates; ++i) {
|
||||
history[i] = {
|
||||
center: new OpenLayers.LonLat(
|
||||
(i * 360 / numStates) - 180, (i * 180 / numStates) - 90
|
||||
),
|
||||
zoom: i
|
||||
};
|
||||
}
|
||||
|
||||
var map = new OpenLayers.Map("map");
|
||||
var layer = new OpenLayers.Layer(
|
||||
"test", {isBaseLayer: true}
|
||||
);
|
||||
map.addLayer(layer);
|
||||
var control = new OpenLayers.Control.NavigationHistory();
|
||||
map.addControl(control);
|
||||
|
||||
// set previous states
|
||||
for(i=0; i<numStates; ++i) {
|
||||
map.setCenter(history[i].center, history[i].zoom);
|
||||
}
|
||||
// set next states
|
||||
for(i=numStates-1; i>=0; --i) {
|
||||
control.previous.trigger();
|
||||
}
|
||||
// test next states
|
||||
for(i=0; i<numStates; ++i) {
|
||||
t.eq(map.getCenter().lon, history[i].center.lon, "(step " + i + ") lon correct");
|
||||
t.eq(map.getCenter().lat, history[i].center.lat, "(step " + i + ") lat correct");
|
||||
t.eq(map.getZoom(), history[i].zoom, "(step " + i + ") zoom correct");
|
||||
control.next.trigger();
|
||||
}
|
||||
// test next with empty stack
|
||||
t.eq(map.getCenter().lon, history[numStates-1].center.lon, "(step " + (numStates-1) + " again) lon correct");
|
||||
t.eq(map.getCenter().lat, history[numStates-1].center.lat, "(step " + (numStates-1) + " again) lat correct");
|
||||
t.eq(map.getZoom(), history[numStates-1].zoom, "(step " + (numStates-1) + " again) zoom correct");
|
||||
}
|
||||
|
||||
function test_limit(t) {
|
||||
var numStates = 10;
|
||||
var limit = 3;
|
||||
|
||||
t.plan(
|
||||
numStates * 6 // for previous & next lon, lat, zoom
|
||||
);
|
||||
|
||||
var history = new Array(numStates);
|
||||
for(var i=0; i<numStates; ++i) {
|
||||
history[i] = {
|
||||
center: new OpenLayers.LonLat(
|
||||
(i * 360 / numStates) - 180, (i * 180 / numStates) - 90
|
||||
),
|
||||
zoom: i
|
||||
};
|
||||
}
|
||||
|
||||
var map = new OpenLayers.Map("map");
|
||||
var layer = new OpenLayers.Layer(
|
||||
"test", {isBaseLayer: true}
|
||||
);
|
||||
map.addLayer(layer);
|
||||
var control = new OpenLayers.Control.NavigationHistory({limit: limit});
|
||||
map.addControl(control);
|
||||
|
||||
// set previous states
|
||||
for(i=0; i<numStates; ++i) {
|
||||
map.setCenter(history[i].center, history[i].zoom);
|
||||
}
|
||||
// test previous states (only up to limit should work)
|
||||
var state;
|
||||
for(i=numStates-1; i>=0; --i) {
|
||||
state = Math.max(i, numStates - limit - 1);
|
||||
t.eq(map.getCenter().lon, history[state].center.lon, "(previous step " + i + ") lon correct: state " + state);
|
||||
t.eq(map.getCenter().lat, history[state].center.lat, "(previous step " + i + ") lat correct: state " + state);
|
||||
t.eq(map.getZoom(), history[state].zoom, "(previous step " + i + ") zoom correct: state " + state);
|
||||
control.previous.trigger();
|
||||
}
|
||||
// test next states
|
||||
for(i=0; i<numStates; ++i) {
|
||||
state = Math.min(numStates - 1, numStates - limit - 1 + i);
|
||||
t.eq(map.getCenter().lon, history[state].center.lon, "(next step " + i + ") lon correct: state " + state);
|
||||
t.eq(map.getCenter().lat, history[state].center.lat, "(next step " + i + ") lat correct: state " + state);
|
||||
t.eq(map.getZoom(), history[state].zoom, "(next step " + i + ") zoom correct: state " + state);
|
||||
control.next.trigger();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map" style="width: 100px; height: 100px;"/>
|
||||
</body>
|
||||
</html>
|
||||
@@ -83,6 +83,7 @@
|
||||
<li>Control/test_LayerSwitcher.html</li>
|
||||
<li>Control/test_ModifyFeature.html</li>
|
||||
<li>Control/test_MousePosition.html</li>
|
||||
<li>Control/test_NavigationHistory.html</li>
|
||||
<li>Control/test_MouseToolbar.html</li>
|
||||
<li>Control/test_Navigation.html</li>
|
||||
<li>Control/test_NavToolbar.html</li>
|
||||
|
||||
BIN
theme/default/img/view_next_off.png
Normal file
BIN
theme/default/img/view_next_off.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
theme/default/img/view_next_on.png
Normal file
BIN
theme/default/img/view_next_on.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
theme/default/img/view_previous_off.png
Normal file
BIN
theme/default/img/view_previous_off.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
theme/default/img/view_previous_on.png
Normal file
BIN
theme/default/img/view_previous_on.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
@@ -110,6 +110,31 @@ div.olControlMousePosition {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.olControlNavigationHistoryPreviousItemActive {
|
||||
background-image: url("img/view_previous_on.png");
|
||||
background-repeat: no-repeat;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.olControlNavigationHistoryPreviousItemInactive {
|
||||
background-image: url("img/view_previous_off.png");
|
||||
background-repeat: no-repeat;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.olControlNavigationHistoryNextItemActive {
|
||||
background-image: url("img/view_next_on.png");
|
||||
background-repeat: no-repeat;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.olControlNavigationHistoryNextItemInactive {
|
||||
background-image: url("img/view_next_off.png");
|
||||
background-repeat: no-repeat;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.olControlNavToolbar .olControlNavigationItemActive {
|
||||
background-image: url("img/panning-hand-on.png");
|
||||
background-repeat: no-repeat;
|
||||
|
||||
Reference in New Issue
Block a user