134 lines
4.3 KiB
JavaScript
134 lines
4.3 KiB
JavaScript
BR.Layers = L.Class.extend({
|
|
_loadLayers: function () {
|
|
this._customLayers = {};
|
|
|
|
if (BR.Util.localStorageAvailable()) {
|
|
var layers = JSON.parse(localStorage.getItem('map/customLayers'));
|
|
for (a in layers) {
|
|
this._addLayer(a, layers[a].layer, layers[a].isOverlay);
|
|
}
|
|
}
|
|
},
|
|
|
|
_loadTable: function () {
|
|
var layersData = [];
|
|
for (layer in this._customLayers) {
|
|
layersData.push([
|
|
layer,
|
|
this._customLayers[layer].layer._url,
|
|
this._customLayers[layer].isOverlay ? 'Overlay' : 'Layer',
|
|
]);
|
|
}
|
|
if (this._layersTable != null) {
|
|
this._layersTable.destroy();
|
|
}
|
|
|
|
this._layersTable = $('#custom_layers_table').DataTable({
|
|
data: layersData,
|
|
info: false,
|
|
searching: false,
|
|
paging: false,
|
|
language: {
|
|
emptyTable: i18next.t('sidebar.layers.table.empty'),
|
|
},
|
|
columns: [
|
|
{ title: i18next.t('sidebar.layers.table.name') },
|
|
{ title: i18next.t('sidebar.layers.table.URL') },
|
|
{ title: i18next.t('sidebar.layers.table.type') },
|
|
],
|
|
});
|
|
},
|
|
|
|
init: function (map, layersControl, baseLayers, overlays) {
|
|
this._layersControl = layersControl;
|
|
this._map = map;
|
|
this._layers = {};
|
|
for (var l in overlays) this._layers[l] = [overlays[l], true];
|
|
for (var l in baseLayers) this._layers[l] = [baseLayers[l], false];
|
|
|
|
L.DomUtil.get('custom_layers_add_base').onclick = L.bind(this._addBaseLayer, this);
|
|
L.DomUtil.get('custom_layers_add_overlay').onclick = L.bind(this._addOverlay, this);
|
|
L.DomUtil.get('custom_layers_remove').onclick = L.bind(this._remove, this);
|
|
|
|
this._loadLayers();
|
|
this._loadTable();
|
|
|
|
var table = this._layersTable;
|
|
$('#custom_layers_table tbody').on('click', 'tr', function () {
|
|
if ($(this).hasClass('selected')) {
|
|
$(this).removeClass('selected');
|
|
} else {
|
|
table.$('tr.selected').removeClass('selected');
|
|
$(this).addClass('selected');
|
|
}
|
|
});
|
|
|
|
L.DomUtil.get('custom_layers_button').onclick = function () {
|
|
$('#custom_layers').modal();
|
|
};
|
|
},
|
|
|
|
_remove: function (evt) {
|
|
var row = this._layersTable.row('.selected').data();
|
|
if (row != null) {
|
|
var name = row[0];
|
|
this._layersControl.removeLayer(this._customLayers[name].layer);
|
|
this._map.removeLayer(this._customLayers[name].layer);
|
|
delete this._customLayers[name];
|
|
this._layersTable.row('.selected').remove().draw(false);
|
|
this._sync();
|
|
}
|
|
},
|
|
|
|
_addFromInput: function (isOverlay) {
|
|
var layer_name = L.DomUtil.get('layer_name').value;
|
|
var layer_url = L.DomUtil.get('layer_url').value;
|
|
if (layer_name.length > 0 && layer_url.length > 0) this._addLayer(layer_name, layer_url, isOverlay);
|
|
},
|
|
|
|
_addBaseLayer: function (evt) {
|
|
this._addFromInput(false);
|
|
},
|
|
_addOverlay: function (evt) {
|
|
this._addFromInput(true);
|
|
},
|
|
|
|
_addLayer: function (layerName, layerUrl, isOverlay) {
|
|
if (layerName in this._layers) return;
|
|
|
|
if (layerName in this._customLayers) return;
|
|
|
|
try {
|
|
var layer = L.tileLayer(layerUrl);
|
|
|
|
this._customLayers[layerName] = {
|
|
layer: layer,
|
|
isOverlay: isOverlay,
|
|
};
|
|
|
|
if (isOverlay) {
|
|
this._layersControl.addOverlay(layer, layerName);
|
|
} else {
|
|
this._layersControl.addBaseLayer(layer, layerName);
|
|
}
|
|
this._loadTable();
|
|
this._sync();
|
|
return layer;
|
|
} catch (e) {
|
|
console.warn('Oops:', e);
|
|
return;
|
|
}
|
|
},
|
|
|
|
_sync: function () {
|
|
if (BR.Util.localStorageAvailable()) {
|
|
localStorage.setItem(
|
|
'map/customLayers',
|
|
JSON.stringify(this._customLayers, function (k, v) {
|
|
// dont write Leaflet.Layer in localStorage; simply keep the URL
|
|
return v._url || v;
|
|
})
|
|
);
|
|
}
|
|
},
|
|
});
|