Update OpenLayers to current version. This fixes slowness in certain browsers
This commit is contained in:
James Wilson
parent
80eca0ff9a
commit
ee7d879130
6 changed files with 1065 additions and 999 deletions
1
public_html/ol/ol-4.4.2.css
Executable file
1
public_html/ol/ol-4.4.2.css
Executable file
|
|
@ -0,0 +1 @@
|
|||
.ol-box{box-sizing:border-box;border-radius:2px;border:2px solid #00f}.ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:rgba(0,60,136,.3);border-radius:4px;bottom:8px;left:8px;padding:2px;position:absolute}.ol-scale-line-inner{border:1px solid #eee;border-top:none;color:#eee;font-size:10px;text-align:center;margin:1px;will-change:contents,width}.ol-overlay-container{will-change:left,right,top,bottom}.ol-unsupported{display:none}.ol-unselectable,.ol-viewport{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ol-selectable{-webkit-touch-callout:default;-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.ol-grabbing{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.ol-grab{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.ol-control{position:absolute;background-color:rgba(255,255,255,.4);border-radius:4px;padding:2px}.ol-control:hover{background-color:rgba(255,255,255,.6)}.ol-zoom{top:.5em;left:.5em}.ol-rotate{top:.5em;right:.5em;transition:opacity .25s linear,visibility 0s linear}.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}@media print{.ol-control{display:none}}.ol-control button{display:block;margin:1px;padding:0;color:#fff;font-size:1.14em;font-weight:700;text-decoration:none;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:rgba(0,60,136,.5);border:none;border-radius:2px}.ol-control button::-moz-focus-inner{border:none;padding:0}.ol-zoom-extent button{line-height:1.4em}.ol-compass{display:block;font-weight:400;font-size:1.2em;will-change:transform}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:focus,.ol-control button:hover{text-decoration:none;background-color:rgba(0,60,136,.7)}.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em)}.ol-attribution ul{margin:0;padding:0 .5em;font-size:.7rem;line-height:1.375em;color:#000;text-shadow:0 0 2px #fff}.ol-attribution li{display:inline;list-style:none;line-height:inherit}.ol-attribution li:not(:last-child):after{content:" "}.ol-attribution img{max-height:2em;max-width:inherit;vertical-align:middle}.ol-attribution button,.ol-attribution ul{display:inline-block}.ol-attribution.ol-collapsed ul{display:none}.ol-attribution.ol-logo-only ul{display:block}.ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0;height:1.1em;line-height:1em}.ol-attribution.ol-logo-only{background:0 0;bottom:.4em;height:1.1em;line-height:1em}.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.ol-attribution.ol-logo-only button,.ol-attribution.ol-uncollapsible button{display:none}.ol-zoomslider{top:4.5em;left:.5em;height:200px}.ol-zoomslider button{position:relative;height:10px}.ol-touch .ol-zoomslider{top:5.5em}.ol-overviewmap{left:.5em;bottom:.5em}.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:inline-block}.ol-overviewmap .ol-overviewmap-map{border:1px solid #7b98bc;height:150px;margin:2px;width:150px}.ol-overviewmap:not(.ol-collapsed) button{bottom:1px;left:2px;position:absolute}.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}.ol-overviewmap:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-overviewmap-box{border:2px dotted rgba(0,60,136,.7)}.ol-overviewmap .ol-overviewmap-box:hover{cursor:move}
|
||||
1064
public_html/ol/ol-4.4.2.js
Executable file
1064
public_html/ol/ol-4.4.2.js
Executable file
File diff suppressed because one or more lines are too long
92
public_html/ol/ol3-layerswitcher.css
Normal file
92
public_html/ol/ol3-layerswitcher.css
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
.layer-switcher.shown.ol-control {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.layer-switcher.shown.ol-control:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.layer-switcher {
|
||||
position: absolute;
|
||||
top: 3.5em;
|
||||
right: 0.5em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.layer-switcher.shown {
|
||||
bottom: 3em;
|
||||
}
|
||||
|
||||
.layer-switcher .panel {
|
||||
padding: 0 1em 0 0;
|
||||
margin: 0;
|
||||
border: 4px solid #eee;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
display: none;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.layer-switcher.shown .panel {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layer-switcher button {
|
||||
float: right;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAACE1BMVEX///8A//8AgICA//8AVVVAQID///8rVVVJtttgv98nTmJ2xNgkW1ttyNsmWWZmzNZYxM4gWGgeU2JmzNNr0N1Rwc0eU2VXxdEhV2JqytQeVmMhVmNoydUfVGUgVGQfVGQfVmVqy9hqy9dWw9AfVWRpydVry9YhVmMgVGNUw9BrytchVWRexdGw294gVWQgVmUhVWPd4N6HoaZsy9cfVmQgVGRrytZsy9cgVWQgVWMgVWRsy9YfVWNsy9YgVWVty9YgVWVry9UgVWRsy9Zsy9UfVWRsy9YgVWVty9YgVWRty9Vsy9aM09sgVWRTws/AzM0gVWRtzNYgVWRuy9Zsy9cgVWRGcHxty9bb5ORbxdEgVWRty9bn6OZTws9mydRfxtLX3Nva5eRix9NFcXxOd4JPeINQeIMiVmVUws9Vws9Vw9BXw9BYxNBaxNBbxNBcxdJexdElWWgmWmhjyNRlx9IqXGtoipNpytVqytVryNNrytZsjZUuX210k5t1y9R2zNR3y9V4lp57zth9zdaAnKOGoaeK0NiNpquV09mesrag1tuitbmj1tuj19uktrqr2d2svcCu2d2xwMO63N+7x8nA3uDC3uDFz9DK4eHL4eLN4eIyYnDX5OM5Z3Tb397e4uDf4uHf5uXi5ePi5+Xj5+Xk5+Xm5+Xm6OY6aHXQ19fT4+NfhI1Ww89gx9Nhx9Nsy9ZWw9Dpj2abAAAAWnRSTlMAAQICAwQEBgcIDQ0ODhQZGiAiIyYpKywvNTs+QklPUlNUWWJjaGt0dnd+hIWFh4mNjZCSm6CpsbW2t7nDzNDT1dje5efr7PHy9PT29/j4+Pn5+vr8/f39/f6DPtKwAAABTklEQVR4Xr3QVWPbMBSAUTVFZmZmhhSXMjNvkhwqMzMzMzPDeD+xASvObKePPa+ffHVl8PlsnE0+qPpBuQjVJjno6pZpSKXYl7/bZyFaQxhf98hHDKEppwdWIW1frFnrxSOWHFfWesSEWC6R/P4zOFrix3TzDFLlXRTR8c0fEEJ1/itpo7SVO9Jdr1DVxZ0USyjZsEY5vZfiiAC0UoTGOrm9PZLuRl8X+Dq1HQtoFbJZbv61i+Poblh/97TC7n0neCcK0ETNUrz1/xPHf+DNAW9Ac6t8O8WH3Vp98f5lCaYKAOFZMLyHL4Y0fe319idMNgMMp+zWVSybUed/+/h7I4wRAG1W6XDy4XmjR9HnzvDRZXUAYDFOhC1S/Hh+fIXxen+eO+AKqbs+wAo30zDTDvDxKoJN88sjUzDFAvBzEUGFsnADoIvAJzoh2BZ8sner+Ke/vwECuQAAAABJRU5ErkJggg==') /*logo.png*/;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.layer-switcher.shown button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layer-switcher button:focus, .layer-switcher button:hover {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.layer-switcher ul {
|
||||
padding-left: 1em;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.layer-switcher li.group {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.layer-switcher li.group > label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.layer-switcher li.layer {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.layer-switcher li.layer label, .layer-switcher li.layer input {
|
||||
display: table-cell;
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
.layer-switcher input {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.layer-switcher.touch ::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.layer-switcher.touch ::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.layer-switcher.touch ::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
|
||||
}
|
||||
289
public_html/ol/ol3-layerswitcher.js
Normal file
289
public_html/ol/ol3-layerswitcher.js
Normal file
|
|
@ -0,0 +1,289 @@
|
|||
/**
|
||||
* OpenLayers 3 Layer Switcher Control.
|
||||
* See [the examples](./examples) for usage.
|
||||
* @constructor
|
||||
* @extends {ol.control.Control}
|
||||
* @param {Object} opt_options Control options, extends olx.control.ControlOptions adding:
|
||||
* **`tipLabel`** `String` - the button tooltip.
|
||||
*/
|
||||
ol.control.LayerSwitcher = function(opt_options) {
|
||||
|
||||
var options = opt_options || {};
|
||||
|
||||
var tipLabel = options.tipLabel ?
|
||||
options.tipLabel : 'Legend';
|
||||
|
||||
this.mapListeners = [];
|
||||
|
||||
this.hiddenClassName = 'ol-unselectable ol-control layer-switcher';
|
||||
if (ol.control.LayerSwitcher.isTouchDevice_()) {
|
||||
this.hiddenClassName += ' touch';
|
||||
}
|
||||
this.shownClassName = this.hiddenClassName + ' shown';
|
||||
|
||||
var element = document.createElement('div');
|
||||
element.className = this.hiddenClassName;
|
||||
|
||||
var button = document.createElement('button');
|
||||
button.setAttribute('title', tipLabel);
|
||||
element.appendChild(button);
|
||||
|
||||
this.panel = document.createElement('div');
|
||||
this.panel.className = 'panel';
|
||||
element.appendChild(this.panel);
|
||||
ol.control.LayerSwitcher.enableTouchScroll_(this.panel);
|
||||
|
||||
var this_ = this;
|
||||
|
||||
button.onmouseover = function(e) {
|
||||
this_.showPanel();
|
||||
};
|
||||
|
||||
button.onclick = function(e) {
|
||||
e = e || window.event;
|
||||
this_.showPanel();
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
this_.panel.onmouseout = function(e) {
|
||||
e = e || window.event;
|
||||
if (!this_.panel.contains(e.toElement || e.relatedTarget)) {
|
||||
this_.hidePanel();
|
||||
}
|
||||
};
|
||||
|
||||
ol.control.Control.call(this, {
|
||||
element: element,
|
||||
target: options.target
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
ol.inherits(ol.control.LayerSwitcher, ol.control.Control);
|
||||
|
||||
/**
|
||||
* Show the layer panel.
|
||||
*/
|
||||
ol.control.LayerSwitcher.prototype.showPanel = function() {
|
||||
if (this.element.className != this.shownClassName) {
|
||||
this.element.className = this.shownClassName;
|
||||
this.renderPanel();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Hide the layer panel.
|
||||
*/
|
||||
ol.control.LayerSwitcher.prototype.hidePanel = function() {
|
||||
if (this.element.className != this.hiddenClassName) {
|
||||
this.element.className = this.hiddenClassName;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Re-draw the layer panel to represent the current state of the layers.
|
||||
*/
|
||||
ol.control.LayerSwitcher.prototype.renderPanel = function() {
|
||||
|
||||
this.ensureTopVisibleBaseLayerShown_();
|
||||
|
||||
while(this.panel.firstChild) {
|
||||
this.panel.removeChild(this.panel.firstChild);
|
||||
}
|
||||
|
||||
var ul = document.createElement('ul');
|
||||
this.panel.appendChild(ul);
|
||||
this.renderLayers_(this.getMap(), ul);
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Set the map instance the control is associated with.
|
||||
* @param {ol.Map} map The map instance.
|
||||
*/
|
||||
ol.control.LayerSwitcher.prototype.setMap = function(map) {
|
||||
// Clean up listeners associated with the previous map
|
||||
for (var i = 0, key; i < this.mapListeners.length; i++) {
|
||||
this.getMap().unByKey(this.mapListeners[i]);
|
||||
}
|
||||
this.mapListeners.length = 0;
|
||||
// Wire up listeners etc. and store reference to new map
|
||||
ol.control.Control.prototype.setMap.call(this, map);
|
||||
if (map) {
|
||||
var this_ = this;
|
||||
this.mapListeners.push(map.on('pointerdown', function() {
|
||||
this_.hidePanel();
|
||||
}));
|
||||
this.renderPanel();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Ensure only the top-most base layer is visible if more than one is visible.
|
||||
* @private
|
||||
*/
|
||||
ol.control.LayerSwitcher.prototype.ensureTopVisibleBaseLayerShown_ = function() {
|
||||
var lastVisibleBaseLyr;
|
||||
ol.control.LayerSwitcher.forEachRecursive(this.getMap(), function(l, idx, a) {
|
||||
if (l.get('type') === 'base' && l.getVisible()) {
|
||||
lastVisibleBaseLyr = l;
|
||||
}
|
||||
});
|
||||
if (lastVisibleBaseLyr) this.setVisible_(lastVisibleBaseLyr, true);
|
||||
};
|
||||
|
||||
/**
|
||||
* Toggle the visible state of a layer.
|
||||
* Takes care of hiding other layers in the same exclusive group if the layer
|
||||
* is toggle to visible.
|
||||
* @private
|
||||
* @param {ol.layer.Base} The layer whos visibility will be toggled.
|
||||
*/
|
||||
ol.control.LayerSwitcher.prototype.setVisible_ = function(lyr, visible) {
|
||||
var map = this.getMap();
|
||||
lyr.setVisible(visible);
|
||||
if (visible && lyr.get('type') === 'base') {
|
||||
// Hide all other base layers regardless of grouping
|
||||
ol.control.LayerSwitcher.forEachRecursive(map, function(l, idx, a) {
|
||||
if (l != lyr && l.get('type') === 'base') {
|
||||
l.setVisible(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Render all layers that are children of a group.
|
||||
* @private
|
||||
* @param {ol.layer.Base} lyr Layer to be rendered (should have a title property).
|
||||
* @param {Number} idx Position in parent group list.
|
||||
*/
|
||||
ol.control.LayerSwitcher.prototype.renderLayer_ = function(lyr, idx) {
|
||||
|
||||
var this_ = this;
|
||||
|
||||
var li = document.createElement('li');
|
||||
|
||||
var lyrTitle = lyr.get('title');
|
||||
var lyrId = ol.control.LayerSwitcher.uuid();
|
||||
|
||||
var label = document.createElement('label');
|
||||
|
||||
if (lyr.getLayers && !lyr.get('combine')) {
|
||||
|
||||
li.className = 'group';
|
||||
label.innerHTML = lyrTitle;
|
||||
li.appendChild(label);
|
||||
var ul = document.createElement('ul');
|
||||
li.appendChild(ul);
|
||||
|
||||
this.renderLayers_(lyr, ul);
|
||||
|
||||
} else {
|
||||
|
||||
li.className = 'layer';
|
||||
var input = document.createElement('input');
|
||||
if (lyr.get('type') === 'base') {
|
||||
input.type = 'radio';
|
||||
input.name = 'base';
|
||||
} else {
|
||||
input.type = 'checkbox';
|
||||
}
|
||||
input.id = lyrId;
|
||||
input.checked = lyr.get('visible');
|
||||
input.onchange = function(e) {
|
||||
this_.setVisible_(lyr, e.target.checked);
|
||||
};
|
||||
li.appendChild(input);
|
||||
|
||||
label.htmlFor = lyrId;
|
||||
label.innerHTML = lyrTitle;
|
||||
li.appendChild(label);
|
||||
|
||||
}
|
||||
|
||||
return li;
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Render all layers that are children of a group.
|
||||
* @private
|
||||
* @param {ol.layer.Group} lyr Group layer whos children will be rendered.
|
||||
* @param {Element} elm DOM element that children will be appended to.
|
||||
*/
|
||||
ol.control.LayerSwitcher.prototype.renderLayers_ = function(lyr, elm) {
|
||||
var lyrs = lyr.getLayers().getArray().slice();
|
||||
for (var i = 0, l; i < lyrs.length; i++) {
|
||||
l = lyrs[i];
|
||||
if (l.get('title')) {
|
||||
elm.appendChild(this.renderLayer_(l, i));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* **Static** Call the supplied function for each layer in the passed layer group
|
||||
* recursing nested groups.
|
||||
* @param {ol.layer.Group} lyr The layer group or collection/array to start iterating from.
|
||||
* @param {Function} fn Callback which will be called for each `ol.layer.Base`
|
||||
* found under `lyr`. The signature for `fn` is the same as `ol.Collection#forEach`
|
||||
*/
|
||||
ol.control.LayerSwitcher.forEachRecursive = function(lyr, fn) {
|
||||
var traverse = function(lyr, idx, a) {
|
||||
fn(lyr, idx, a);
|
||||
if (lyr.getLayers) {
|
||||
ol.control.LayerSwitcher.forEachRecursive(lyr, fn);
|
||||
}
|
||||
};
|
||||
|
||||
if (lyr.getLayers) {
|
||||
lyr.getLayers().forEach(traverse);
|
||||
} else {
|
||||
lyr.forEach(traverse);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Generate a UUID
|
||||
* @returns {String} UUID
|
||||
*
|
||||
* Adapted from http://stackoverflow.com/a/2117523/526860
|
||||
*/
|
||||
ol.control.LayerSwitcher.uuid = function() {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
||||
var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
|
||||
return v.toString(16);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @desc Apply workaround to enable scrolling of overflowing content within an
|
||||
* element. Adapted from https://gist.github.com/chrismbarr/4107472
|
||||
*/
|
||||
ol.control.LayerSwitcher.enableTouchScroll_ = function(elm) {
|
||||
if(ol.control.LayerSwitcher.isTouchDevice_()){
|
||||
var scrollStartPos = 0;
|
||||
elm.addEventListener("touchstart", function(event) {
|
||||
scrollStartPos = this.scrollTop + event.touches[0].pageY;
|
||||
}, false);
|
||||
elm.addEventListener("touchmove", function(event) {
|
||||
this.scrollTop = scrollStartPos - event.touches[0].pageY;
|
||||
}, false);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @desc Determine if the current browser supports touch events. Adapted from
|
||||
* https://gist.github.com/chrismbarr/4107472
|
||||
*/
|
||||
ol.control.LayerSwitcher.isTouchDevice_ = function() {
|
||||
try {
|
||||
document.createEvent("TouchEvent");
|
||||
return true;
|
||||
} catch(e) {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue