additional controls (temporary)
This commit is contained in:
DennisSchiefer
parent
60d236dd3e
commit
5498aa03a5
63
WebContent/base/leaflet/L.Control.Goto.js
Normal file
63
WebContent/base/leaflet/L.Control.Goto.js
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
/*
|
||||||
|
This program is free software; you can redistribute it and/or modify
|
||||||
|
it under the terms of the GNU AFFERO General Public License as published by
|
||||||
|
the Free Software Foundation; either version 3 of the License, or
|
||||||
|
any later version.
|
||||||
|
|
||||||
|
This program is distributed in the hope that it will be useful,
|
||||||
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
GNU General Public License for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU Affero General Public License
|
||||||
|
along with this program; if not, write to the Free Software
|
||||||
|
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
|
||||||
|
or see http://www.gnu.org/licenses/agpl.txt.
|
||||||
|
*/
|
||||||
|
|
||||||
|
// goto Layers control
|
||||||
|
// [used to add clickable buttons to the map]
|
||||||
|
L.Control.Goto = L.Control.extend({
|
||||||
|
options: {
|
||||||
|
position: 'topright'
|
||||||
|
},
|
||||||
|
|
||||||
|
onAdd: function (map) {
|
||||||
|
var className = 'leaflet-control-goto',
|
||||||
|
container = L.DomUtil.create('div', className);
|
||||||
|
|
||||||
|
this._createButton('Goto Location', className + '-my-location', container, map.zoomIn, map);
|
||||||
|
this._createButton('Goto Route', className + '-route', container, map.zoomOut, map);
|
||||||
|
|
||||||
|
return container;
|
||||||
|
},
|
||||||
|
|
||||||
|
_createButton: function (title, className, container, fn, context) {
|
||||||
|
var link = L.DomUtil.create('a', className, container);
|
||||||
|
link.href = '#';
|
||||||
|
link.title = title;
|
||||||
|
|
||||||
|
L.DomEvent
|
||||||
|
.on(link, 'click', L.DomEvent.stopPropagation)
|
||||||
|
.on(link, 'click', L.DomEvent.preventDefault)
|
||||||
|
.on(link, 'click', fn, context)
|
||||||
|
.on(link, 'dblclick', L.DomEvent.stopPropagation);
|
||||||
|
|
||||||
|
return link;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
L.Map.mergeOptions({
|
||||||
|
gotoControl: true
|
||||||
|
});
|
||||||
|
|
||||||
|
L.Map.addInitHook(function () {
|
||||||
|
if (this.options.gotoControl) {
|
||||||
|
this.gotoControl = new L.Control.Goto();
|
||||||
|
this.addControl(this.gotoControl);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
L.control.Goto = function (options) {
|
||||||
|
return new L.Control.Goto(options);
|
||||||
|
};
|
||||||
205
WebContent/base/leaflet/L.Control.Layers.js
Normal file
205
WebContent/base/leaflet/L.Control.Layers.js
Normal file
@ -0,0 +1,205 @@
|
|||||||
|
|
||||||
|
L.Control.Layers = L.Control.extend({
|
||||||
|
options: {
|
||||||
|
collapsed: true,
|
||||||
|
position: 'topright',
|
||||||
|
autoZIndex: true
|
||||||
|
},
|
||||||
|
|
||||||
|
initialize: function (baseLayers, overlays, options) {
|
||||||
|
L.Util.setOptions(this, options);
|
||||||
|
|
||||||
|
this._layers = {};
|
||||||
|
this._lastZIndex = 0;
|
||||||
|
|
||||||
|
for (var i in baseLayers) {
|
||||||
|
if (baseLayers.hasOwnProperty(i)) {
|
||||||
|
this._addLayer(baseLayers[i], i);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (i in overlays) {
|
||||||
|
if (overlays.hasOwnProperty(i)) {
|
||||||
|
this._addLayer(overlays[i], i, true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onAdd: function (map) {
|
||||||
|
this._initLayout();
|
||||||
|
this._update();
|
||||||
|
|
||||||
|
return this._container;
|
||||||
|
},
|
||||||
|
|
||||||
|
addBaseLayer: function (layer, name) {
|
||||||
|
this._addLayer(layer, name);
|
||||||
|
this._update();
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
addOverlay: function (layer, name) {
|
||||||
|
this._addLayer(layer, name, true);
|
||||||
|
this._update();
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
removeLayer: function (layer) {
|
||||||
|
var id = L.Util.stamp(layer);
|
||||||
|
delete this._layers[id];
|
||||||
|
this._update();
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
_initLayout: function () {
|
||||||
|
var className = 'leaflet-control-layers',
|
||||||
|
container = this._container = L.DomUtil.create('div', className);
|
||||||
|
|
||||||
|
if (!L.Browser.touch) {
|
||||||
|
L.DomEvent.disableClickPropagation(container);
|
||||||
|
} else {
|
||||||
|
L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation);
|
||||||
|
}
|
||||||
|
|
||||||
|
var form = this._form = L.DomUtil.create('form', className + '-list');
|
||||||
|
|
||||||
|
if (this.options.collapsed) {
|
||||||
|
L.DomEvent
|
||||||
|
.on(container, 'mouseover', this._expand, this)
|
||||||
|
.on(container, 'mouseout', this._collapse, this);
|
||||||
|
|
||||||
|
var link = this._layersLink = L.DomUtil.create('a', className + '-toggle', container);
|
||||||
|
link.href = '#';
|
||||||
|
link.title = 'Layers';
|
||||||
|
|
||||||
|
if (L.Browser.touch) {
|
||||||
|
L.DomEvent
|
||||||
|
.on(link, 'click', L.DomEvent.stopPropagation)
|
||||||
|
.on(link, 'click', L.DomEvent.preventDefault)
|
||||||
|
.on(link, 'click', this._expand, this);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
L.DomEvent.on(link, 'focus', this._expand, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
this._map.on('movestart', this._collapse, this);
|
||||||
|
// TODO keyboard accessibility
|
||||||
|
} else {
|
||||||
|
this._expand();
|
||||||
|
}
|
||||||
|
|
||||||
|
this._baseLayersList = L.DomUtil.create('div', className + '-base', form);
|
||||||
|
this._separator = L.DomUtil.create('div', className + '-separator', form);
|
||||||
|
this._overlaysList = L.DomUtil.create('div', className + '-overlays', form);
|
||||||
|
|
||||||
|
container.appendChild(form);
|
||||||
|
},
|
||||||
|
|
||||||
|
_addLayer: function (layer, name, overlay) {
|
||||||
|
var id = L.Util.stamp(layer);
|
||||||
|
|
||||||
|
this._layers[id] = {
|
||||||
|
layer: layer,
|
||||||
|
name: name,
|
||||||
|
overlay: overlay
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.options.autoZIndex && layer.setZIndex) {
|
||||||
|
this._lastZIndex++;
|
||||||
|
layer.setZIndex(this._lastZIndex);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_update: function () {
|
||||||
|
if (!this._container) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this._baseLayersList.innerHTML = '';
|
||||||
|
this._overlaysList.innerHTML = '';
|
||||||
|
|
||||||
|
var baseLayersPresent = false,
|
||||||
|
overlaysPresent = false;
|
||||||
|
|
||||||
|
for (var i in this._layers) {
|
||||||
|
if (this._layers.hasOwnProperty(i)) {
|
||||||
|
var obj = this._layers[i];
|
||||||
|
this._addItem(obj);
|
||||||
|
overlaysPresent = overlaysPresent || obj.overlay;
|
||||||
|
baseLayersPresent = baseLayersPresent || !obj.overlay;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this._separator.style.display = (overlaysPresent && baseLayersPresent ? '' : 'none');
|
||||||
|
},
|
||||||
|
|
||||||
|
// IE7 bugs out if you create a radio dynamically, so you have to do it this hacky way (see http://bit.ly/PqYLBe)
|
||||||
|
_createRadioElement: function (name, checked) {
|
||||||
|
|
||||||
|
var radioHtml = '<input type="radio" name="' + name + '"';
|
||||||
|
if (checked) {
|
||||||
|
radioHtml += ' checked="checked"';
|
||||||
|
}
|
||||||
|
radioHtml += '/>';
|
||||||
|
|
||||||
|
var radioFragment = document.createElement('div');
|
||||||
|
radioFragment.innerHTML = radioHtml;
|
||||||
|
|
||||||
|
return radioFragment.firstChild;
|
||||||
|
},
|
||||||
|
|
||||||
|
_addItem: function (obj) {
|
||||||
|
var label = document.createElement('label'),
|
||||||
|
input,
|
||||||
|
checked = this._map.hasLayer(obj.layer);
|
||||||
|
|
||||||
|
if (obj.overlay) {
|
||||||
|
input = document.createElement('input');
|
||||||
|
input.type = 'checkbox';
|
||||||
|
input.defaultChecked = checked;
|
||||||
|
} else {
|
||||||
|
input = this._createRadioElement('leaflet-base-layers', checked);
|
||||||
|
}
|
||||||
|
|
||||||
|
input.layerId = L.Util.stamp(obj.layer);
|
||||||
|
|
||||||
|
L.DomEvent.on(input, 'click', this._onInputClick, this);
|
||||||
|
|
||||||
|
var name = document.createTextNode(' ' + obj.name);
|
||||||
|
|
||||||
|
label.appendChild(input);
|
||||||
|
label.appendChild(name);
|
||||||
|
|
||||||
|
var container = obj.overlay ? this._overlaysList : this._baseLayersList;
|
||||||
|
container.appendChild(label);
|
||||||
|
},
|
||||||
|
|
||||||
|
_onInputClick: function () {
|
||||||
|
var i, input, obj,
|
||||||
|
inputs = this._form.getElementsByTagName('input'),
|
||||||
|
inputsLen = inputs.length;
|
||||||
|
|
||||||
|
for (i = 0; i < inputsLen; i++) {
|
||||||
|
input = inputs[i];
|
||||||
|
obj = this._layers[input.layerId];
|
||||||
|
|
||||||
|
if (input.checked) {
|
||||||
|
this._map.addLayer(obj.layer, !obj.overlay);
|
||||||
|
} else {
|
||||||
|
this._map.removeLayer(obj.layer);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_expand: function () {
|
||||||
|
L.DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');
|
||||||
|
},
|
||||||
|
|
||||||
|
_collapse: function () {
|
||||||
|
this._container.className = this._container.className.replace(' leaflet-control-layers-expanded', '');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
L.control.layers = function (baseLayers, overlays, options) {
|
||||||
|
return new L.Control.Layers(baseLayers, overlays, options);
|
||||||
|
};
|
||||||
44
WebContent/base/leaflet/L.Control.Zoom.js
Normal file
44
WebContent/base/leaflet/L.Control.Zoom.js
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
L.Control.Zoom = L.Control.extend({
|
||||||
|
options: {
|
||||||
|
position: 'topleft'
|
||||||
|
},
|
||||||
|
|
||||||
|
onAdd: function (map) {
|
||||||
|
var className = 'leaflet-control-zoom',
|
||||||
|
container = L.DomUtil.create('div', className);
|
||||||
|
|
||||||
|
this._createButton('Zoom in', className + '-in', container, map.zoomIn, map);
|
||||||
|
this._createButton('Zoom out', className + '-out', container, map.zoomOut, map);
|
||||||
|
|
||||||
|
return container;
|
||||||
|
},
|
||||||
|
|
||||||
|
_createButton: function (title, className, container, fn, context) {
|
||||||
|
var link = L.DomUtil.create('a', className, container);
|
||||||
|
link.href = '#';
|
||||||
|
link.title = title;
|
||||||
|
|
||||||
|
L.DomEvent
|
||||||
|
.on(link, 'click', L.DomEvent.stopPropagation)
|
||||||
|
.on(link, 'click', L.DomEvent.preventDefault)
|
||||||
|
.on(link, 'click', fn, context)
|
||||||
|
.on(link, 'dblclick', L.DomEvent.stopPropagation);
|
||||||
|
|
||||||
|
return link;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
L.Map.mergeOptions({
|
||||||
|
zoomControl: true
|
||||||
|
});
|
||||||
|
|
||||||
|
L.Map.addInitHook(function () {
|
||||||
|
if (this.options.zoomControl) {
|
||||||
|
this.zoomControl = new L.Control.Zoom();
|
||||||
|
this.addControl(this.zoomControl);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
L.control.zoom = function (options) {
|
||||||
|
return new L.Control.Zoom(options);
|
||||||
|
};
|
||||||
@ -49,6 +49,62 @@ html, body {
|
|||||||
font-size:9px;
|
font-size:9px;
|
||||||
display:none;
|
display:none;
|
||||||
}
|
}
|
||||||
|
/* .leaflet-control-goto {
|
||||||
|
padding: 5px;
|
||||||
|
background: rgba(0, 0, 0, 0.25);
|
||||||
|
-moz-border-radius: 7px;
|
||||||
|
-webkit-border-radius: 7px;
|
||||||
|
border-radius: 7px;
|
||||||
|
}
|
||||||
|
.leaflet-control-goto a {
|
||||||
|
background-color: rgba(255, 255, 255, 0.75);
|
||||||
|
background-position: 50% 50%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
display: block;
|
||||||
|
-moz-border-radius: 4px;
|
||||||
|
-webkit-border-radius: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
}
|
||||||
|
.leaflet-control-goto a:hover {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.leaflet-touch .leaflet-control-goto a {
|
||||||
|
width: 27px;
|
||||||
|
height: 27px;
|
||||||
|
}
|
||||||
|
.leaflet-control-goto-my-location {
|
||||||
|
background-image:url('images/location.png');
|
||||||
|
margin-bottom:5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-control-goto-route {
|
||||||
|
background-image:url('images/route.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-control-layers {
|
||||||
|
padding: 5px;
|
||||||
|
background: rgba(0, 0, 0, 0.25);
|
||||||
|
-moz-border-radius: 7px;
|
||||||
|
-webkit-border-radius: 7px;
|
||||||
|
border-radius: 7px;
|
||||||
|
}
|
||||||
|
.leaflet-control-layers a {
|
||||||
|
background-color: rgba(255, 255, 255, 0.75);
|
||||||
|
background-position: 50% 50%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
display: block;
|
||||||
|
-moz-border-radius: 4px;
|
||||||
|
-webkit-border-radius: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
background-image: url(images/layers.png);
|
||||||
|
}
|
||||||
|
.leaflet-control-layers a:hover {
|
||||||
|
background-color: #fff;
|
||||||
|
} */
|
||||||
|
|
||||||
/* ------------------------------------------------------------------------ */
|
/* ------------------------------------------------------------------------ */
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user