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

Merge branch 'master' into light-build

Browse Source
This commit is contained in:
Matt Priour
2012-02-29 10:02:22 -06:00
parent cd2a6aaaaf 85b997fa0e
commit dd11c75625
13 changed files with 401 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
examples/accessible-panel.html Normal file
View File

@@ -0,0 +1,130 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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>Custom and accessible panel</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
.olControlPanel button {
position: relative;
display: block;
margin: 2px;
border: 1px solid;
padding: 0 5px;
border-radius: 4px;
height: 35px;
background-color: white;
float: left;
overflow: visible; /* needed to remove padding from buttons in IE */
}
.olControlPanel button span {
padding-left: 25px;
}
.olControlPanel button span:first-child {
padding-left: 0;
display: block;
position: absolute;
left: 2px;
}
.olControlPanel .olControlDrawFeatureItemActive span:first-child {
background-image: url("../theme/default/img/draw_line_on.png");
height: 22px;
width: 24px;
top: 5px;
}
.olControlPanel .olControlDrawFeatureItemInactive span:first-child {
background-image: url("../theme/default/img/draw_line_off.png");
height: 22px;
width: 24px;
top: 5px;
}
.olControlPanel .olControlZoomBoxItemInactive span:first-child {
background-image: url("../img/drag-rectangle-off.png");
height: 29px;
width: 29px;
top: 2px;
}
.olControlPanel .olControlZoomBoxItemActive span:first-child {
background-image: url("../img/drag-rectangle-on.png");
height: 29px;
width: 29px;
top: 2px;
}
.olControlPanel .olControlZoomToMaxExtentItemInactive span:first-child {
background-image: url("../img/zoom-world-mini.png");
height: 18px;
width: 18px;
top: 8px;
}
.olControlPanel .navHistory span:first-child {
background-image: url("../theme/default/img/navigation_history.png");
height: 24px;
width: 24px;
top: 4px;
}
.olControlPanel .navHistoryPreviousItemActive span:first-child {
background-position: 0 0;
}
.olControlPanel .navHistoryPreviousItemInactive span:first-child {
background-position: 0 -24px;
}
.olControlPanel .navHistoryNextItemActive span:first-child {
background-position: -24px 0;
}
.olControlPanel .navHistoryNextItemInactive span:first-child {
background-position: -24px -24px;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script src="accessible-panel.js"></script>
</head>
<body onload="init()">
<h1 id="title">Custom and accessible panel</h1>
<div id="tags">
panels, CSS, style, accessibility, button
</div>
<p id="shortdesc">
Create a custom and accessible panel, styled entirely with
CSS.
</p>
<div id="panel"></div>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>An accessible panel:
<ul>
<li>The buttons are actual HTML buttons. You can therefore
use the TAB key to give the focus to the panel's buttons, and the "ENTER"
key to activate or trigger the corresponding control.</li>
<li>The buttons include text and titles (displayed when a button
is hovered).</li>
<li>If you remove colors from the page (for example using FireFox's <a
href="https://addons.mozilla.org/en-US/firefox/addon/no-color/">No
Color extension</a>) the buttons are still visible, and
accessible using the keyboard.</li>
</ul>
</p>
<p>By default a panel creates buttons as divs. In this example the
<code>createControlMarkup</code> panel function is overridden to create
a more accessible markup for the buttons. See the <a
href="accessible-panel.js" target="_blank"> accessible-panel.js
source</a> to see how this is done.</p>
<p>Note: in IE 8, when a button is pressed its content shifts by 1 pixel.
This is a <a
href="http://labs.findsubstance.com/2009/05/21/ie8-form-button-with-background-image-on-click-css-bug/">known
IE8 bug</a>, with known workarounds. No workaround is applied in this
example though.</p>
</div>
</body>
</html>

64
examples/accessible-panel.js Normal file
View File

@@ -0,0 +1,64 @@
var lon = 5;
var lat = 40;
var zoom = 5;
var map, layer;
function init() {
map = new OpenLayers.Map( 'map', { controls: [] } );
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer);
vlayer = new OpenLayers.Layer.Vector( "Editable" );
map.addLayer(vlayer);
zb = new OpenLayers.Control.ZoomBox({
title: "Zoom box: zoom clicking and dragging",
text: "Zoom"
});
var panel = new OpenLayers.Control.Panel({
defaultControl: zb,
createControlMarkup: function(control) {
var button = document.createElement('button'),
iconSpan = document.createElement('span'),
textSpan = document.createElement('span');
iconSpan.innerHTML = '&nbsp;';
button.appendChild(iconSpan);
if (control.text) {
textSpan.innerHTML = control.text;
}
button.appendChild(textSpan);
return button;
}
});
panel.addControls([
zb,
new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Path,
{title:'Draw a feature', text: 'Draw'}),
new OpenLayers.Control.ZoomToMaxExtent({
title:"Zoom to the max extent",
text: "World"
})
]);
nav = new OpenLayers.Control.NavigationHistory({
previousOptions: {
title: "Go to previous map position",
text: "Prev"
},
nextOptions: {
title: "Go to next map position",
text: "Next"
},
displayClass: "navHistory"
});
// parent control must be added to the map
map.addControl(nav);
panel.addControls([nav.next, nav.previous]);
map.addControl(panel);
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
}

10
lib/OpenLayers/Control/LayerSwitcher.js
View File

@@ -120,7 +120,7 @@ OpenLayers.Control.LayerSwitcher =
initialize: function(options) {
OpenLayers.Control.prototype.initialize.apply(this, arguments);
this.layerStates = [];
if(this.roundedCorner) {
OpenLayers.Console.warn('roundedCorner option is deprecated');
}
@@ -143,6 +143,7 @@ OpenLayers.Control.LayerSwitcher =
changebaselayer: this.redraw,
scope: this
});
this.events.unregister("buttonclick", this, this.onButtonClick);
OpenLayers.Control.prototype.destroy.apply(this, arguments);
},
@@ -157,13 +158,18 @@ OpenLayers.Control.LayerSwitcher =
OpenLayers.Control.prototype.setMap.apply(this, arguments);
this.map.events.on({
buttonclick: this.onButtonClick,
addlayer: this.redraw,
changelayer: this.redraw,
removelayer: this.redraw,
changebaselayer: this.redraw,
scope: this
});
if (this.outsideViewport) {
this.events.attachToElement(this.div);
this.events.register("buttonclick", this, this.onButtonClick);
} else {
this.map.events.register("buttonclick", this, this.onButtonClick);
}
},
/**

56
lib/OpenLayers/Control/Panel.js
View File

@@ -245,26 +245,58 @@ OpenLayers.Control.Panel = OpenLayers.Class(OpenLayers.Control, {
controls = [controls];
}
this.controls = this.controls.concat(controls);
// Give each control a panel_div which will be used later.
// Access to this div is via the panel_div attribute of the
// control added to the panel.
// Also, stop mousedowns and clicks, but don't stop mouseup,
// since they need to pass through.
for (var i=0, len=controls.length; i<len; i++) {
var element = document.createElement("div");
element.className = controls[i].displayClass + "ItemInactive olButton";
controls[i].panel_div = element;
if (controls[i].title != "") {
controls[i].panel_div.title = controls[i].title;
var control = controls[i],
element = this.createControlMarkup(control);
OpenLayers.Element.addClass(element,
control.displayClass + "ItemInactive");
OpenLayers.Element.addClass(element, "olButton");
if (control.title != "" && !element.title) {
element.title = control.title;
}
}
control.panel_div = element;
}
if (this.map) { // map.addControl() has already been called on the panel
this.addControlsToMap(controls);
this.redraw();
}
},
/**
* APIMethod: createControlMarkup
* This function just creates a div for the control. If specific HTML
* markup is needed this function can be overridden in specific classes,
* or at panel instantiation time:
*
* Example:
* (code)
* var panel = new OpenLayers.Control.Panel({
* defaultControl: control,
* // ovverride createControlMarkup to create actual buttons
* // including texts wrapped into span elements.
* createControlMarkup: function(control) {
* var button = document.createElement('button'),
* span = document.createElement('span');
* if (control.text) {
* span.innerHTML = control.text;
* }
* return button;
* }
* });
* (end)
*
* Parameters:
* control - {<OpenLayers.Control>} The control to create the HTML
* markup for.
*
* Returns:
* {DOMElement} The markup.
*/
createControlMarkup: function(control) {
return document.createElement("div");
},
/**
* Method: addControlsToMap

9
lib/OpenLayers/Events.js
View File

@@ -20,6 +20,12 @@ OpenLayers.Event = {
* element._eventCacheID
*/
observers: false,
/**
* Constant: KEY_SPACE
* {int}
*/
KEY_SPACE: 32,
/**
* Constant: KEY_BACKSPACE
@@ -388,7 +394,8 @@ OpenLayers.Events = OpenLayers.Class({
"mousedown", "mouseup", "mousemove",
"click", "dblclick", "rightclick", "dblrightclick",
"resize", "focus", "blur",
"touchstart", "touchmove", "touchend"
"touchstart", "touchmove", "touchend",
"keydown"
],
/**

53
lib/OpenLayers/Events/buttonclick.js
View File

@@ -39,7 +39,7 @@ OpenLayers.Events.buttonclick = OpenLayers.Class({
*/
events: [
'mousedown', 'mouseup', 'click', 'dblclick',
'touchstart', 'touchmove', 'touchend'
'touchstart', 'touchmove', 'touchend', 'keydown'
],
/**
@@ -97,6 +97,31 @@ OpenLayers.Events.buttonclick = OpenLayers.Class({
delete this.target;
},
/**
* Method: getPressedButton
* Get the pressed button, if any. Returns undefined if no button
* was pressed.
*
* Arguments:
* element - {DOMElement} The event target.
*
* Returns:
* {DOMElement} The button element, or undefined.
*/
getPressedButton: function(element) {
var depth = 3, // limit the search depth
button;
do {
if(OpenLayers.Element.hasClass(element, "olButton")) {
// hit!
button = element;
break;
}
element = element.parentNode;
} while(--depth > 0 && element);
return button;
},
/**
* Method: buttonClick
* Check if a button was clicked, and fire the buttonclick event
@@ -108,15 +133,25 @@ OpenLayers.Events.buttonclick = OpenLayers.Class({
var propagate = true,
element = OpenLayers.Event.element(evt);
if (element && (OpenLayers.Event.isLeftClick(evt) || !~evt.type.indexOf("mouse"))) {
if (element.nodeType === 3 || OpenLayers.Element.hasClass(element, "olAlphaImg")) {
element = element.parentNode;
}
if (OpenLayers.Element.hasClass(element, "olButton")) {
if (this.startEvt) {
if (this.completeRegEx.test(evt.type)) {
var pos = OpenLayers.Util.pagePosition(element);
// was a button pressed?
var button = this.getPressedButton(element);
if (button) {
if (evt.type === "keydown") {
switch (evt.keyCode) {
case OpenLayers.Event.KEY_RETURN:
case OpenLayers.Event.KEY_SPACE:
this.target.triggerEvent("buttonclick", {
buttonElement: element,
buttonElement: button
});
OpenLayers.Event.stop(evt);
propagate = false;
break;
}
} else if (this.startEvt) {
if (this.completeRegEx.test(evt.type)) {
var pos = OpenLayers.Util.pagePosition(button);
this.target.triggerEvent("buttonclick", {
buttonElement: button,
buttonXY: {
x: this.startEvt.clientX - pos[0],
y: this.startEvt.clientY - pos[1]

6
lib/OpenLayers/Format/SLD/v1.js
View File

@@ -990,12 +990,14 @@ OpenLayers.Format.SLD.v1 = OpenLayers.Class(OpenLayers.Format.Filter.v1_0_0, {
},
"LabelPlacement": function(symbolizer) {
var node = this.createElementNSPlus("sld:LabelPlacement");
if (symbolizer.labelAnchorPointX != null ||
// PointPlacement and LinePlacement are choices, so don't output both
if ((symbolizer.labelAnchorPointX != null ||
symbolizer.labelAnchorPointY != null ||
symbolizer.labelAlign != null ||
symbolizer.labelXOffset != null ||
symbolizer.labelYOffset != null ||
symbolizer.labelRotation != null) {
symbolizer.labelRotation != null) &&
symbolizer.labelPerpendicularOffset == null) {
this.writeNode("PointPlacement", symbolizer, node);
}
if (symbolizer.labelPerpendicularOffset != null) {

14
lib/OpenLayers/Format/SLD/v1_0_0_GeoServer.js
View File

@@ -58,12 +58,9 @@ OpenLayers.Format.SLD.v1_0_0_GeoServer = OpenLayers.Class(
},
"VendorOption": function(node, obj) {
if (!obj.vendorOptions) {
obj.vendorOptions = [];
obj.vendorOptions = {};
}
obj.vendorOptions.push({
name: node.getAttribute("name"),
value: this.getChildValue(node)
});
obj.vendorOptions[node.getAttribute("name")] = this.getChildValue(node);
}
}, OpenLayers.Format.SLD.v1_0_0.prototype.readers["sld"])
}, OpenLayers.Format.SLD.v1_0_0.prototype.readers),
@@ -130,8 +127,11 @@ OpenLayers.Format.SLD.v1_0_0_GeoServer = OpenLayers.Class(
addVendorOptions: function(node, symbolizer) {
var options = symbolizer.vendorOptions;
if (options) {
for (var i=0, ii=options.length; i<ii; ++i) {
this.writeNode("VendorOption", options[i], node);
for (var key in symbolizer.vendorOptions) {
this.writeNode("VendorOption", {
name: key,
value: symbolizer.vendorOptions[key]
}, node);
}
}
return node;

2
lib/OpenLayers/Layer.js
View File

@@ -34,7 +34,7 @@ OpenLayers.Layer = OpenLayers.Class({
div: null,
/**
* Property: opacity
* APIProperty: opacity
* {Float} The layer's opacity. Float number between 0.0 and 1.0. Default
* is 1.
*/

31
notes/2.12.md
View File

@@ -84,8 +84,39 @@ The `OpenLayers.Tile.Image` class now has a method to get a canvas context for p
tileOptions: {crossOriginKeyword: null}
Both `OpenLayers.Layer.OSM` and `OpenLayers.Layer.Bing` do not have defaults for `maxExtent`, `maxResolutions` and `units` any more. This may break maps that are configured with a `maxResolution` of `156543.0339`, which was used in examples before 2.11, but is incorrect. The correct value is `156543.03390625`, but it is no longer necessary to specify a maxResolution, maxExtent and units if the correct resolution is set. See "Projection and Spherical Mercator" below.
## Projection & SphericalMercator
When working with Web Mercator layers (e.g. Google, Bing, OSM), it was previously necessary to configure the map or the base layer with the correct `projection`, `maxExtent`, `maxResolutions` and `units`. Now OpenLayers has defaults for WGS84 and Web Mercator in `OpenLayers.Projection.defaults`, so it is enough to provide the `projection`.
Old:
new OpenLayers.Map({
div: "map",
projection: "EPSG:900913",
maxResolution: 156543.03390625,
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
units: "m",
layers: [
new OpenLayers.Layer.Google("Google Streets"),
new OpenLayers.Layer.OSM(null, null, {isBaseLayer: false, opacity: 0.7})
],
zoom: 1
});
New:
new OpenLayers.Map({
div: "map",
projection: "EPSG:900913",
layers: [
new OpenLayers.Layer.Google("Google Streets"),
new OpenLayers.Layer.OSM(null, null, {isBaseLayer: false, opacity: 0.7})
],
zoom: 1
});
In previous releases, coordinate transforms between EPSG:4326 and EPSG:900913 were defined in the SphericalMercator.js script. In 2.12, these default transforms are included in the Projection.js script. The Projection.js script is included as a dependency in builds with any layer types, so no special build configuration is necessary to get the web mercator transforms.
If you were previously using the `OpenLayers.Layer.SphericalMercator.forwardMercator` or `inverseMercator` methods, you may have to explicitly include the SphericalMercator.js script in your build. The Google layer is the only layer that depends on the SphericalMercator mixin. If you are not using the Google layer but want to use the SphericalMercator methods listed above, you have to explicitly include the SphericalMercator.js script in your build.

6
tests/Control/LayerSwitcher.html
View File

@@ -25,15 +25,17 @@
t.ok( div != null, "draw returns its div" );
}
function test_Control_LayerSwitcher_outsideViewport (t) {
t.plan( 2 );
t.plan( 4 );
map = new OpenLayers.Map('map');
control = new OpenLayers.Control.LayerSwitcher({'div':OpenLayers.Util.getElement('layerswitcher')});
map.addControl(control);
t.eq(control.div.style.width, "250px", "Div is not minimized when added.");
t.eq(control.div.style.width, "250px", "Div is not minimized when added.");
t.ok(control.events.element && control.events.listeners.buttonclick, "[outside] Events instance attached to div and has buttonclick event");
control = new OpenLayers.Control.LayerSwitcher();
map.addControl(control);
t.eq(control.div.style.width, "0px", "Div is minimized when added.");
t.ok(!control.events.element && map.events.listeners.buttonclick, "[inside] Events instance not attached to div and buttonclick event registered on map");
}
function test_Control_LayerSwitcher_loadContents(t) {

56
tests/Events/buttonclick.html
View File

@@ -27,9 +27,44 @@
buttonClick.destroy();
events.destroy();
}
function test_getPressedButton(t) {
t.plan(4);
// set up
events = new OpenLayers.Events({}, element);
buttonClick = new OpenLayers.Events.buttonclick(events);
var button = document.createElement('button'),
span1 = document.createElement('span'),
span2 = document.createElement('span'),
span3 = document.createElement('span');
button.className = 'olButton';
button.appendChild(span1);
span1.appendChild(span2);
span2.appendChild(span3);
t.ok(buttonClick.getPressedButton(button) === button,
'getPressedButton returns button when element is button');
t.ok(buttonClick.getPressedButton(span1) === button,
'getPressedButton returns button when element is button descendant level 1');
t.ok(buttonClick.getPressedButton(span2) === button,
'getPressedButton returns button when element is button descendant level 2');
t.eq(buttonClick.getPressedButton(span3), undefined,
'getPressedButton returns undefined when element is button descendant level 3');
// test
// tear down
buttonClick.destroy();
events.destroy();
}
function test_ButtonClick_buttonClick(t) {
t.plan(23);
t.plan(27);
events = new OpenLayers.Events({}, element);
events.on({
"buttonclick": logEvent,
@@ -38,7 +73,8 @@
"click": logEvent,
"dblclick": logEvent,
"touchstart": logEvent,
"touchend": logEvent
"touchend": logEvent,
"keydown": logEvent
});
buttonClick = events.extensions["buttonclick"];
@@ -111,12 +147,26 @@
t.eq(log[1].type, "buttonclick", "buttonclick for 2nd click IE");
// rightclick
log = []
log = [];
trigger({type: "mousedown", button: 2});
trigger({type: "mouseup", button: 2});
t.eq(log.length, 2, "two events fired for rightclick");
t.eq(log[0].type, "mousedown", "mousedown from rightclick goes through");
t.eq(log[1].type, "mouseup", "mouseup from rightclick goes through");
// keydown RETURN
log = [];
trigger({type: "keydown", keyCode: OpenLayers.Event.KEY_RETURN});
trigger({type: "click"});
t.eq(log.length, 1, "one event fired for RETURN keydown");
t.eq(log[0].type, "buttonclick", "buttonclick for RETURN keydown");
// keydown SPACE
log = [];
trigger({type: "keydown", keyCode: OpenLayers.Event.KEY_SPACE});
trigger({type: "click"});
t.eq(log.length, 1, "one event fired for SPACE keydown");
t.eq(log[0].type, "buttonclick", "buttonclick for SPACE keydown");
}
</script>
</head>

4
tests/Format/SLD/v1_0_0.html
View File

@@ -528,6 +528,7 @@
var format = new OpenLayers.Format.SLD.v1_0_0({
multipleSymbolizers: true
});
// labelPerpendicularOffset takes precedence over labelAlign
var style = new OpenLayers.Style2({
rules: [
new OpenLayers.Rule({
@@ -538,7 +539,8 @@
}),
new OpenLayers.Symbolizer.Text({
label: "${FOO}",
labelPerpendicularOffset: 10
labelPerpendicularOffset: 10,
labelAlign: "rb"
})
]
})