Hi, I've just tried it out in IE 11 and it doesn't work. I found several problems:
I've managed to solve problems number 1 and number 2 (thanks to Babel). So here's the working code (except last point)
// array of legend entries - see README for format
legends: [],
// if true, legend entries that are from a simple renderer will use compact presentation
collapseSimple: false,
// if true, will test to see if legend entries look stretched; these are usually in sets of 3 with the middle element having no label
detectStretched: false,
// if true, legends will be collapsed when a new instance is initialized
collapsedOnInit: false,
disableVisibilityControls: false,
updateOpacity: null,
defaultOpacity: 1,
visibleIcon: 'leaflet-html-legend-icon-eye',
hiddenIcon: 'leaflet-html-legend-icon-eye-slash',
toggleIcon: 'leaflet-html-legend-icon-eye'
},
onAdd: function onAdd(map) {
this._map = map;
this._container = L.DomUtil.create('div', 'leaflet-control leaflet-bar leaflet-html-legend');
this._lastId = 0;
this._entries = {};
// Disable events on container
L.DomEvent.disableClickPropagation(this._container);
L.DomEvent.disableScrollPropagation(this._container);
this.render();
return this._container;
},
render: function render() {
var _this = this;
L.DomUtil.empty(this._container);
this.options.legends.forEach(function (legend) {
return _this._renderLegend(legend);
}, this);
this._checkVisibility();
},
addLegend: function addLegend(legend) {
if (this._map) {
this._renderLegend(legend);
return this._lastId;
}
throw Error('Legend control must be added to the map first.');
},
removeLegend: function removeLegend(itemIdx) {
var entry = this._entries[itemIdx];
if (entry) {
if (entry.layer && entry.events) {
Object.entries(entry.events).forEach(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
event = _ref2[0],
handler = _ref2[1];
return entry.layer.off(event, handler);
});
}
L.DomUtil.remove(this._entries[itemIdx].container);
delete this._entries[itemIdx];
}
},
_renderLegend: function _renderLegend(legend) {
var _this2 = this;
if (!legend.elements) {
return;
}
var elements = legend.elements;
var className = 'legend-block';
if (this.options.detectStretched) {
if (elements.length === 3 && elements[0].label !== '' && elements[1].label === '' && elements[2].label !== '') {
className += ' legend-stretched';
}
}
var block = L.DomUtil.create('div', className, this._container);
var entryIdx = ++this._lastId;
this._entries[entryIdx] = { container: block };
if (this.options.collapseSimple && elements.length === 1 && !elements[0].label) {
this._addElement(elements[0].html, legend.name, elements[0].style, block);
this._connectLayer(block, legend, entryIdx);
return block;
}
if (legend.name) {
var header = L.DomUtil.create('h4', null, block);
L.DomUtil.create('div', 'legend-caret', header);
L.DomUtil.create('span', null, header).innerHTML = legend.name;
if (this.options.collapsedOnInit) {
L.DomUtil.addClass(header, 'closed');
}
L.DomEvent.on(header, 'click', function () {
if (L.DomUtil.hasClass(header, 'closed')) {
L.DomUtil.removeClass(header, 'closed');
} else {
L.DomUtil.addClass(header, 'closed');
}
}, this);
}
var elementContainer = L.DomUtil.create('div', 'legend-elements', block);
elements.forEach(function (element) {
_this2._addElement(element.html, element.label, element.style, elementContainer);
}, this);
this._connectLayer(block, legend, entryIdx);
return block;
},
_addElement: function _addElement(html, label, style, container) {
var row = L.DomUtil.create('div', 'legend-row', container);
var symbol = L.DomUtil.create('span', 'symbol', row);
if (style) {
Object.entries(style).forEach(function (_ref3) {
var _ref4 = _slicedToArray(_ref3, 2),
k = _ref4[0],
v = _ref4[1];
symbol.style[k] = v;
});
}
symbol.innerHTML = html;
if (label) {
L.DomUtil.create('label', null, row).innerHTML = label;
}
},
_updateOpacity: function _updateOpacity(layer, opacity) {
if (typeof this.options.updateOpacity === 'function') {
this.options.updateOpacity(layer, opacity);
} else if (typeof layer.setOpacity === 'function') {
layer.setOpacity(opacity);
} else if (typeof layer.setStyle === 'function') {
layer.setStyle({ opacity: opacity });
}
},
_layerAdd: function _layerAdd(container) {
this._activeLayers += 1;
container.style.display = '';
this._checkVisibility();
},
_layerRemove: function _layerRemove(container) {
this._activeLayers -= 1;
container.style.display = 'none';
this._checkVisibility();
},
_connectLayer: function _connectLayer(container, legend, entryIdx) {
var _this3 = this;
var layer = legend.layer;
if (!layer) {
this._alwaysShow = true;
return;
}
if (this._map.hasLayer(layer)) {
this._activeLayers += 1;
} else {
container.style.display = 'none';
}
container.classList.add('layer-control');
if (!this.options.disableVisibilityControls) {
var opacity = layer.opacity || this.options.defaultOpacity || 1;
this._updateOpacity(layer, opacity);
var toggleButton = L.DomUtil.create('i', 'visibility-toggle ' + this.options.toggleIcon, container);
toggleButton.dataset.visibileOpacity = opacity;
L.DomEvent.on(toggleButton, 'click', function (e) {
var button = e.target;
if (L.DomUtil.hasClass(button, 'disabled')) {
L.DomUtil.removeClass(button, 'disabled');
_this3._updateOpacity(layer, button.dataset.visibileOpacity);
} else {
L.DomUtil.addClass(button, 'disabled');
_this3._updateOpacity(layer, 0);
}
});
var opacityController = L.DomUtil.create('span', 'opacity-slider', container);
L.DomUtil.create('span', 'slider-label', opacityController).innerHTML = 'Transparency:';
L.DomUtil.create('i', this.options.visibleIcon, opacityController);
var opacitySlider = L.DomUtil.create('input', null, opacityController);
opacitySlider.type = 'range';
opacitySlider.min = 0;
opacitySlider.max = 1;
opacitySlider.step = 0.1;
opacitySlider.onchange = function (e) {
var newOpacity = 1 - e.target.value || 0;
_this3._updateOpacity(layer, newOpacity);
toggleButton.dataset.visibileOpacity = newOpacity;
L.DomUtil.removeClass(toggleButton, 'disabled');
};
opacitySlider.value = 1 - opacity;
L.DomUtil.create('i', this.options.hiddenIcon, opacityController);
};
var layerAdd = this._layerAdd.bind(this, container);
var layerRemove = this._layerRemove.bind(this, container);
layer.on('add', layerAdd).on('remove', layerRemove);
this._entries[entryIdx].layer = layer;
this._entries[entryIdx].events = {
add: layerAdd,
remove: layerRemove
};
},
_checkVisibility: function _checkVisibility() {
if (this._alwaysShow || this._activeLayers) {
this._container.style.display = '';
} else {
this._container.style.display = 'none';
}
}
I'll try to figure out what's going on with the slider.
Hope this can help someone else.