Make default layers customizable
This commit is contained in:
Norbert Renner
parent
e02be4ca15
commit
944ccd6cfa
6 changed files with 319 additions and 210 deletions
|
|
@ -2,6 +2,12 @@ BR.LayersTab = L.Control.Layers.extend({
|
|||
previewLayer: null,
|
||||
saveLayers: [],
|
||||
|
||||
initialize: function (layersConfig, baseLayers, overlays, options) {
|
||||
L.Control.Layers.prototype.initialize.call(this, baseLayers, overlays, options);
|
||||
|
||||
this.layersConfig = layersConfig;
|
||||
},
|
||||
|
||||
addTo: function (map) {
|
||||
this._map = map;
|
||||
this.onAdd(map);
|
||||
|
|
@ -12,33 +18,32 @@ BR.LayersTab = L.Control.Layers.extend({
|
|||
|
||||
this.initButtons();
|
||||
|
||||
this.addLeafletProvidersLayers();
|
||||
|
||||
var structure = {
|
||||
'Base layers': {
|
||||
'Worldwide international': [
|
||||
'standard',
|
||||
'OpenTopoMap',
|
||||
'Stamen.Terrain',
|
||||
'HDM_HOT',
|
||||
'Esri.WorldImagery',
|
||||
'wikimedia-map',
|
||||
'HDM_HOT',
|
||||
'1010', // OpenStreetMap.se (Hydda.Full)
|
||||
'opencylemap',
|
||||
"1061", // Thunderforest Outdoors
|
||||
"1065", // Hike & Bike Map
|
||||
"1016", // 4UMaps,
|
||||
"openmapsurfer"
|
||||
'1061', // Thunderforest Outdoors
|
||||
'1065', // Hike & Bike Map
|
||||
'1016', // 4UMaps,
|
||||
'openmapsurfer'
|
||||
],
|
||||
'Worldwide monolingual': [
|
||||
'osm-mapnik-german_style',
|
||||
'osmfr',
|
||||
"1023", // Osmapa.pl - Mapa OpenStreetMap Polska
|
||||
"1021", // kosmosnimki.ru
|
||||
"1017", // sputnik.ru
|
||||
"1010" // OpenStreetMap.se (Hydda.Full)
|
||||
'1023', // Osmapa.pl - Mapa OpenStreetMap Polska
|
||||
'1021', // kosmosnimki.ru
|
||||
'1017' // sputnik.ru
|
||||
],
|
||||
'Europe': [
|
||||
'MtbMap',
|
||||
"1069", // MRI (maps.refuges.info)
|
||||
'1069' // MRI (maps.refuges.info)
|
||||
],
|
||||
'Country': [
|
||||
'topplus-open',
|
||||
|
|
@ -76,7 +81,7 @@ BR.LayersTab = L.Control.Layers.extend({
|
|||
'mapaszlakow-bike',
|
||||
'mapaszlakow-hike',
|
||||
'mapaszlakow-mtb',
|
||||
'mapaszlakow-incline',
|
||||
'mapaszlakow-incline'
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -119,13 +124,14 @@ BR.LayersTab = L.Control.Layers.extend({
|
|||
var obj = this._getLayerObjByName(data.node.text);
|
||||
if (!obj) return;
|
||||
|
||||
this.removeLayer(obj.layer);
|
||||
|
||||
if (this._map.hasLayer(obj.layer)) {
|
||||
this._map.removeLayer(obj.layer);
|
||||
if (!obj.overlay) {
|
||||
this.addFirstLayer();
|
||||
}
|
||||
}
|
||||
this.removeLayer(obj.layer);
|
||||
};
|
||||
|
||||
$('#optional-layers-tree')
|
||||
|
|
@ -188,21 +194,45 @@ BR.LayersTab = L.Control.Layers.extend({
|
|||
var data = [];
|
||||
var self = this;
|
||||
|
||||
function createRootNode(name) {
|
||||
var children = [];
|
||||
var rootNode = {
|
||||
'text': name,
|
||||
'state': {
|
||||
'disabled': true
|
||||
},
|
||||
'children': children
|
||||
};
|
||||
return rootNode;
|
||||
}
|
||||
|
||||
function createNode(id, layerData) {
|
||||
var props = layerData.properties;
|
||||
var url = props.url;
|
||||
var keyObj = self.layersConfig.getKeyName(url);
|
||||
var childNode = null;
|
||||
|
||||
// when key required only add if configured
|
||||
if (!keyObj || keyObj && BR.keys[keyObj.name]) {
|
||||
childNode = {
|
||||
'id': id,
|
||||
'text': props.name,
|
||||
'state': {
|
||||
'checked': self.layersConfig.isDefaultLayer(id, props.overlay)
|
||||
}
|
||||
};
|
||||
}
|
||||
return childNode;
|
||||
}
|
||||
|
||||
function walkTree(inTree, outTree) {
|
||||
function walkObject(obj) {
|
||||
for (name in obj) {
|
||||
var value = obj[name];
|
||||
var children = [];
|
||||
var rootNode = {
|
||||
'text': name,
|
||||
'state': {
|
||||
'disabled': true
|
||||
},
|
||||
'children': children
|
||||
};
|
||||
outTree.push(rootNode);
|
||||
var rootNode = createRootNode(name)
|
||||
|
||||
walkTree(value, children);
|
||||
outTree.push(rootNode);
|
||||
walkTree(value, rootNode.children);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -215,16 +245,8 @@ BR.LayersTab = L.Control.Layers.extend({
|
|||
var layer = BR.layerIndex[entry];
|
||||
|
||||
if (layer) {
|
||||
var props = layer.properties;
|
||||
var url = props.url;
|
||||
var keyName = self.getKeyName(url);
|
||||
|
||||
// when key required only add if configured
|
||||
if (!keyName || keyName && BR.keys[keyName]) {
|
||||
var childNode = {
|
||||
'id': entry,
|
||||
'text': props.name
|
||||
};
|
||||
var childNode = createNode(entry, layer);
|
||||
if (childNode) {
|
||||
outTree.push(childNode);
|
||||
}
|
||||
} else {
|
||||
|
|
@ -241,51 +263,13 @@ BR.LayersTab = L.Control.Layers.extend({
|
|||
return data;
|
||||
},
|
||||
|
||||
addLeafletProvidersLayers: function () {
|
||||
var includeList = [
|
||||
'Stamen.Terrain',
|
||||
'MtbMap',
|
||||
'OpenStreetMap.CH',
|
||||
'HikeBike.HillShading'
|
||||
];
|
||||
|
||||
for (var i = 0; i < includeList.length; i++) {
|
||||
var id = includeList[i];
|
||||
var obj = {
|
||||
geometry: null,
|
||||
properties: {
|
||||
id: id,
|
||||
name: id.replace('.', ' '),
|
||||
dataSource: 'leaflet-providers'
|
||||
},
|
||||
type: "Feature"
|
||||
};
|
||||
BR.layerIndex[id] = obj;
|
||||
}
|
||||
|
||||
BR.layerIndex['HikeBike.HillShading'].properties.overlay = true;
|
||||
},
|
||||
|
||||
// own convention: key placeholder prefixed with 'key_'
|
||||
// e.g. ?api_key={keys_openrouteservice}
|
||||
getKeyName: function (url) {
|
||||
var name = null;
|
||||
var regex = /{keys_([^}]*)}/;
|
||||
var found;
|
||||
|
||||
if (!url) return name;
|
||||
|
||||
found = url.match(regex);
|
||||
if (found) {
|
||||
name = found[1];
|
||||
}
|
||||
|
||||
return name;
|
||||
},
|
||||
|
||||
addFirstLayer() {
|
||||
if (this._layers.length > 0) {
|
||||
this._map.addLayer(this._layers[0].layer);
|
||||
addFirstLayer: function () {
|
||||
for (var i = 0; i < this._layers.length; i++) {
|
||||
var obj = this._layers[i];
|
||||
if (!obj.overlay) {
|
||||
this._map.addLayer(obj.layer);
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -298,73 +282,9 @@ BR.LayersTab = L.Control.Layers.extend({
|
|||
},
|
||||
|
||||
createLayer: function (layerData) {
|
||||
var props = layerData.properties;
|
||||
var url = props.url;
|
||||
var layer;
|
||||
|
||||
// JOSM: https://{switch:a,b,c}.tile.openstreetmap.org/{zoom}/{x}/{y}.png
|
||||
// Leaflet: https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
|
||||
function convertUrlJosm(url) {
|
||||
var rxSwitch = /{switch:[^}]*}/;
|
||||
var rxZoom = /{zoom}/g;
|
||||
var result = url.replace(rxSwitch, '{s}');
|
||||
result = result.replace(rxZoom, '{z}');
|
||||
return result;
|
||||
}
|
||||
|
||||
// JOSM: https://{switch:a,b,c}.tile.openstreetmap.org/{zoom}/{x}/{y}.png
|
||||
// Leaflet: ['a','b','c']
|
||||
function getSubdomains(url) {
|
||||
var result = 'abc';
|
||||
var regex = /{switch:([^}]*)}/;
|
||||
var found = url.match(regex);
|
||||
if (found) {
|
||||
result = found[1].split(',');
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
var options = {
|
||||
maxZoom: this._map.getMaxZoom(),
|
||||
zIndex: this._lastZIndex + 1
|
||||
};
|
||||
|
||||
var keyName = this.getKeyName(url);
|
||||
if (keyName && BR.keys[keyName]) {
|
||||
options['keys_' + keyName] = BR.keys[keyName];
|
||||
}
|
||||
|
||||
if (props.dataSource === 'leaflet-providers') {
|
||||
layer = L.tileLayer.provider(props.id);
|
||||
} else if (props.dataSource === 'LayersCollection') {
|
||||
layer = L.tileLayer(url, L.Util.extend(options, {
|
||||
minZoom: props.minZoom,
|
||||
maxNativeZoom: props.maxZoom,
|
||||
}));
|
||||
if (props.subdomains) {
|
||||
layer.subdomains = props.subdomains;
|
||||
}
|
||||
} else {
|
||||
// JOSM
|
||||
var url = convertUrlJosm(url);
|
||||
|
||||
var josmOptions = L.Util.extend(options, {
|
||||
minZoom: props.min_zoom,
|
||||
maxNativeZoom: props.max_zoom,
|
||||
subdomains: getSubdomains(url),
|
||||
});
|
||||
|
||||
if (props.type && props.type === 'wms') {
|
||||
layer = L.tileLayer.wms(url, L.Util.extend(josmOptions, {
|
||||
layers: props.layers,
|
||||
format: props.format
|
||||
}));
|
||||
} else {
|
||||
layer = L.tileLayer(url, josmOptions);
|
||||
}
|
||||
}
|
||||
|
||||
return layer
|
||||
var layer = this.layersConfig.createLayer(layerData);
|
||||
layer.options.zIndex = this._lastZIndex + 1;
|
||||
return layer;
|
||||
},
|
||||
|
||||
removeSelectedLayers: function () {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue