mirror of
https://github.com/tsrman/tsrman.github.io.git
synced 2025-02-23 18:52:15 +00:00
add js and css
This commit is contained in:
tsrman
parent
a94dc0d3b1
commit
02e904024f
|
|
@ -0,0 +1,19 @@
|
||||||
|
.leaflet-control-layers-group-name {
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: .2em;
|
||||||
|
margin-left: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-control-layers-group {
|
||||||
|
margin-bottom: .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-control-layers-group .groupHeader {
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none; }
|
||||||
388
Leaflet.groupedlayercontrol/src/leaflet.groupedlayercontrol.js
Normal file
388
Leaflet.groupedlayercontrol/src/leaflet.groupedlayercontrol.js
Normal file
|
|
@ -0,0 +1,388 @@
|
||||||
|
/* global L */
|
||||||
|
|
||||||
|
// A layer control which provides for layer groupings.
|
||||||
|
// Author: Ishmael Smyrnow
|
||||||
|
// Author: Navikey
|
||||||
|
|
||||||
|
L.Control.GroupedLayers = L.Control.extend({
|
||||||
|
|
||||||
|
options: {
|
||||||
|
collapsed: true,
|
||||||
|
groupsCollapsed: true,
|
||||||
|
position: 'topright',
|
||||||
|
autoZIndex: true,
|
||||||
|
exclusiveGroups: [],
|
||||||
|
groupCheckboxes: []
|
||||||
|
},
|
||||||
|
|
||||||
|
initialize: function(baseLayers, groupedOverlays, options) {
|
||||||
|
var i, j;
|
||||||
|
L.Util.setOptions(this, options);
|
||||||
|
|
||||||
|
this._layers = {};
|
||||||
|
this._lastZIndex = 0;
|
||||||
|
this._handlingClick = false;
|
||||||
|
this._groupList = [];
|
||||||
|
this._domGroups = [];
|
||||||
|
|
||||||
|
for (i in baseLayers) {
|
||||||
|
this._addLayer(baseLayers[i], i);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (i in groupedOverlays) {
|
||||||
|
for (j in groupedOverlays[i]) {
|
||||||
|
this._addLayer(groupedOverlays[i][j], j, i, true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onAdd: function(map) {
|
||||||
|
this._initLayout();
|
||||||
|
this._update();
|
||||||
|
|
||||||
|
map
|
||||||
|
.on('layeradd', this._onLayerChange, this)
|
||||||
|
.on('layerremove', this._onLayerChange, this);
|
||||||
|
|
||||||
|
return this._container;
|
||||||
|
},
|
||||||
|
|
||||||
|
onRemove: function(map) {
|
||||||
|
map
|
||||||
|
.off('layeradd', this._onLayerChange)
|
||||||
|
.off('layerremove', this._onLayerChange);
|
||||||
|
},
|
||||||
|
|
||||||
|
addBaseLayer: function(layer, name) {
|
||||||
|
this._addLayer(layer, name);
|
||||||
|
this._update();
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
addOverlay: function(layer, name, group) {
|
||||||
|
this._addLayer(layer, name, group, 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);
|
||||||
|
|
||||||
|
//Makes this work on IE10 Touch devices by stopping it from firing a mouseout event when the touch is released
|
||||||
|
container.setAttribute('aria-haspopup', true);
|
||||||
|
|
||||||
|
if (!L.Browser.touch) {
|
||||||
|
L.DomEvent.disableClickPropagation(container);
|
||||||
|
L.DomEvent.on(container, 'wheel', L.DomEvent.stopPropagation);
|
||||||
|
} else {
|
||||||
|
L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation);
|
||||||
|
}
|
||||||
|
|
||||||
|
var form = this._form = L.DomUtil.create('form', className + '-list');
|
||||||
|
|
||||||
|
if (this.options.collapsed) {
|
||||||
|
if (!L.Browser.android) {
|
||||||
|
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.stop)
|
||||||
|
.on(link, 'click', this._expand, this);
|
||||||
|
} else {
|
||||||
|
L.DomEvent.on(link, 'focus', this._expand, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
this._map.on('click', 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, group, overlay) {
|
||||||
|
var id = L.Util.stamp(layer);
|
||||||
|
|
||||||
|
this._layers[id] = {
|
||||||
|
layer: layer,
|
||||||
|
name: name,
|
||||||
|
overlay: overlay
|
||||||
|
};
|
||||||
|
|
||||||
|
group = group || '';
|
||||||
|
var groupId = this._indexOf(this._groupList, group);
|
||||||
|
|
||||||
|
if (groupId === -1) {
|
||||||
|
groupId = this._groupList.push(group) - 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
var exclusive = (this._indexOf(this.options.exclusiveGroups, group) != -1);
|
||||||
|
var groupcheckbox = (this._indexOf(this.options.groupCheckboxes, group) != -1);
|
||||||
|
|
||||||
|
this._layers[id].group = {
|
||||||
|
name: group,
|
||||||
|
id: groupId,
|
||||||
|
exclusive: exclusive,
|
||||||
|
groupcheckbox: groupcheckbox
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.options.autoZIndex && layer.setZIndex) {
|
||||||
|
this._lastZIndex++;
|
||||||
|
layer.setZIndex(this._lastZIndex);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_update: function() {
|
||||||
|
if (!this._container) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this._baseLayersList.innerHTML = '';
|
||||||
|
this._overlaysList.innerHTML = '';
|
||||||
|
this._domGroups.length = 0;
|
||||||
|
|
||||||
|
var baseLayersPresent = false,
|
||||||
|
overlaysPresent = false,
|
||||||
|
i, obj;
|
||||||
|
|
||||||
|
for (i in this._layers) {
|
||||||
|
obj = this._layers[i];
|
||||||
|
this._addItem(obj);
|
||||||
|
overlaysPresent = overlaysPresent || obj.overlay;
|
||||||
|
baseLayersPresent = baseLayersPresent || !obj.overlay;
|
||||||
|
}
|
||||||
|
|
||||||
|
this._separator.style.display = overlaysPresent && baseLayersPresent ? '' : 'none';
|
||||||
|
},
|
||||||
|
|
||||||
|
_onLayerChange: function(e) {
|
||||||
|
var obj = this._layers[L.Util.stamp(e.layer)];
|
||||||
|
|
||||||
|
if (!obj) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this._handlingClick) {
|
||||||
|
this._update();
|
||||||
|
}
|
||||||
|
|
||||||
|
var type = obj.overlay ?
|
||||||
|
(e.type === 'layeradd' ? 'overlayadd' : 'overlayremove') :
|
||||||
|
(e.type === 'layeradd' ? 'baselayerchange' : null);
|
||||||
|
|
||||||
|
if (type) {
|
||||||
|
this._map.fire(type, obj);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 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" class="leaflet-control-layers-selector" 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),
|
||||||
|
container,
|
||||||
|
layers;
|
||||||
|
|
||||||
|
if (obj.overlay) {
|
||||||
|
if (obj.group.exclusive) {
|
||||||
|
groupRadioName = 'leaflet-exclusive-group-layer-' + obj.group.id;
|
||||||
|
input = this._createRadioElement(groupRadioName, checked);
|
||||||
|
} else {
|
||||||
|
input = document.createElement('input');
|
||||||
|
input.type = 'checkbox';
|
||||||
|
input.className = 'leaflet-control-layers-selector';
|
||||||
|
input.defaultChecked = checked;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
input = this._createRadioElement('leaflet-base-layers', checked);
|
||||||
|
}
|
||||||
|
|
||||||
|
input.layerId = L.Util.stamp(obj.layer);
|
||||||
|
input.groupID = obj.group.id;
|
||||||
|
L.DomEvent.on(input, 'click', this._onInputClick, this);
|
||||||
|
|
||||||
|
var name = document.createElement('span');
|
||||||
|
name.innerHTML = ' ' + obj.name;
|
||||||
|
|
||||||
|
label.appendChild(input);
|
||||||
|
label.appendChild(name);
|
||||||
|
|
||||||
|
if (obj.overlay) {
|
||||||
|
container = this._overlaysList;
|
||||||
|
|
||||||
|
var groupContainer = this._domGroups[obj.group.id];
|
||||||
|
|
||||||
|
// Create the group container if it doesn't exist
|
||||||
|
if (!groupContainer) {
|
||||||
|
groupContainer = document.createElement('div');
|
||||||
|
groupContainer.className = 'leaflet-control-layers-group';
|
||||||
|
groupContainer.id = 'leaflet-control-layers-group-' + obj.group.id;
|
||||||
|
|
||||||
|
var groupLabel = document.createElement('span');
|
||||||
|
groupLabel.className = 'leaflet-control-layers-group-label';
|
||||||
|
|
||||||
|
if ("" !== obj.group.name && !obj.group.exclusive) {
|
||||||
|
// ------ add a group checkbox with an _onInputClickGroup function
|
||||||
|
if (obj.group.groupcheckbox) {
|
||||||
|
var groupInput = document.createElement('input');
|
||||||
|
groupInput.type = 'checkbox';
|
||||||
|
groupInput.className = 'leaflet-control-layers-group-selector';
|
||||||
|
groupInput.groupID = obj.group.id;
|
||||||
|
groupInput.legend = this;
|
||||||
|
L.DomEvent.on(groupInput, 'click', this._onGroupInputClick, groupInput);
|
||||||
|
groupLabel.appendChild(groupInput);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var groupName = document.createElement('span');
|
||||||
|
groupName.className = 'leaflet-control-layers-group-name';
|
||||||
|
groupName.innerHTML = obj.group.name;
|
||||||
|
groupName.category = obj.group.name;
|
||||||
|
|
||||||
|
var collapsed = this.options.groupsCollapsed ? groupName.innerHTML = ' ► ' + groupName.innerHTML : groupName.innerHTML = ' ▼ ' + groupName.innerHTML;
|
||||||
|
groupName.collapsed = collapsed;
|
||||||
|
L.DomEvent.on(groupName, 'click', this._onLabelClick);
|
||||||
|
|
||||||
|
layers = document.createElement('span');
|
||||||
|
layers.className = 'groupLayers';
|
||||||
|
if (collapsed) {
|
||||||
|
layers.style.height = '0';
|
||||||
|
layers.style.display = 'none';
|
||||||
|
}
|
||||||
|
obj.group.layers = layers;
|
||||||
|
groupLabel.appendChild(groupName);
|
||||||
|
groupContainer.appendChild(groupLabel);
|
||||||
|
groupContainer.appendChild(layers);
|
||||||
|
container.appendChild(groupContainer);
|
||||||
|
this._domGroups[obj.group.id] = layers;
|
||||||
|
groupContainer = layers;
|
||||||
|
}
|
||||||
|
|
||||||
|
container = groupContainer;
|
||||||
|
} else {
|
||||||
|
container = this._baseLayersList;
|
||||||
|
}
|
||||||
|
|
||||||
|
container.appendChild(label);
|
||||||
|
return label;
|
||||||
|
},
|
||||||
|
|
||||||
|
_onLabelClick: function() {
|
||||||
|
if (!this.collapsed) {
|
||||||
|
this.collapsed = true;
|
||||||
|
this.innerHTML = ' ► ' + this.category;
|
||||||
|
$(this).parent().next().css({
|
||||||
|
height: '0',
|
||||||
|
display: 'none'
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.collapsed = false;
|
||||||
|
this.innerHTML = ' ▼ ' + this.category;
|
||||||
|
$(this).parent().next().css({
|
||||||
|
height: '100%',
|
||||||
|
display: 'block'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_onGroupInputClick: function() {
|
||||||
|
var i, input, obj;
|
||||||
|
|
||||||
|
this_legend = this.legend;
|
||||||
|
this_legend._handlingClick = true;
|
||||||
|
|
||||||
|
var inputs = this_legend._form.getElementsByTagName('input');
|
||||||
|
var inputsLen = inputs.length;
|
||||||
|
for (i = 0; i < inputsLen; i++) {
|
||||||
|
input = inputs[i];
|
||||||
|
if (input.groupID == this.groupID && input.className == 'leaflet-control-layers-selector') {
|
||||||
|
input.checked = this.checked;
|
||||||
|
obj = this_legend._layers[input.layerId];
|
||||||
|
if (input.checked && !this_legend._map.hasLayer(obj.layer)) {
|
||||||
|
this_legend._map.addLayer(obj.layer);
|
||||||
|
} else if (!input.checked && this_legend._map.hasLayer(obj.layer)) {
|
||||||
|
this_legend._map.removeLayer(obj.layer);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this_legend._handlingClick = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
_onInputClick: function() {
|
||||||
|
var i, input, obj,
|
||||||
|
inputs = this._form.getElementsByTagName('input'),
|
||||||
|
inputsLen = inputs.length;
|
||||||
|
|
||||||
|
this._handlingClick = true;
|
||||||
|
|
||||||
|
for (i = 0; i < inputsLen; i++) {
|
||||||
|
input = inputs[i];
|
||||||
|
if (input.className == 'leaflet-control-layers-selector') {
|
||||||
|
obj = this._layers[input.layerId];
|
||||||
|
|
||||||
|
if (input.checked && !this._map.hasLayer(obj.layer)) {
|
||||||
|
this._map.addLayer(obj.layer);
|
||||||
|
|
||||||
|
} else if (!input.checked && this._map.hasLayer(obj.layer)) {
|
||||||
|
this._map.removeLayer(obj.layer);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this._handlingClick = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
_expand: function() {
|
||||||
|
L.DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');
|
||||||
|
},
|
||||||
|
|
||||||
|
_collapse: function() {
|
||||||
|
this._container.className = this._container.className.replace(' leaflet-control-layers-expanded', '');
|
||||||
|
},
|
||||||
|
|
||||||
|
_indexOf: function(arr, obj) {
|
||||||
|
for (var i = 0, j = arr.length; i < j; i++) {
|
||||||
|
if (arr[i] === obj) {
|
||||||
|
return i;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
L.control.groupedLayers = function(baseLayers, groupedOverlays, options) {
|
||||||
|
return new L.Control.GroupedLayers(baseLayers, groupedOverlays, options);
|
||||||
|
};
|
||||||
Loading…
Reference in a new issue