added OSRM layers control;
refactored checkboxes in mapping block
This commit is contained in:
DennisSchiefer
@@ -1,205 +0,0 @@
|
||||
|
||||
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);
|
||||
};
|
||||
@@ -19,90 +19,50 @@ or see http://www.gnu.org/licenses/agpl.txt.
|
||||
// [extension of Layers.Control with OSRM styling and additional query methods]
|
||||
OSRM.Control.Layers = L.Control.Layers.extend({
|
||||
|
||||
// query functionality
|
||||
getActiveLayerName: 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 && !obj.overlay) {
|
||||
return obj.name;
|
||||
// query functionality
|
||||
getActiveLayerName: 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 && !obj.overlay) {
|
||||
return obj.name;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
getActiveLayer: 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 && !obj.overlay) {
|
||||
return obj.layer;
|
||||
},
|
||||
getActiveLayer: 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 && !obj.overlay) {
|
||||
return obj.layer;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// overwrite Control.Layers methods to get OSRM styling
|
||||
_initLayout: function () {
|
||||
L.Control.Layers.prototype._initLayout.apply(this);
|
||||
this._container.className = "box-wrapper gui-control-wrapper";
|
||||
this._layersLink.className = "box-content gui-control gui-layers";
|
||||
this._form.className = "box-content gui-control gui-layers-list medium-font";
|
||||
|
||||
this._baseLayersList.className = "gui-layers-base";
|
||||
this._separator.className = "gui-layers-separator";
|
||||
this._overlaysList.className = "gui-layers-overlays";
|
||||
},
|
||||
_expand: function () {
|
||||
L.DomUtil.addClass(this._container, 'gui-layers-expanded');
|
||||
},
|
||||
_collapse: function () {
|
||||
this._container.className = this._container.className.replace(' gui-layers-expanded', '');
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// overwrite Control.Layers methods to get OSRM styling
|
||||
onAdd: function (map) {
|
||||
this._initLayout(map);
|
||||
this._update();
|
||||
|
||||
return this._container;
|
||||
},
|
||||
_initLayout: function (map) {
|
||||
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);
|
||||
},
|
||||
_expand: function () {
|
||||
L.DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');
|
||||
},
|
||||
_collapse: function () {
|
||||
this._container.className = this._container.className.replace(' leaflet-control-layers-expanded', '');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user