Support optional and custom layers in hash URL
- extend layer control to get current active layers (and more) - access layer control in hash instead of static initial list - use ',' layer separator and encode layers individually, so that comma in layer name gets encoded and is not mistaken as separator as with '-'
This commit is contained in:
Norbert Renner
parent
dbc7fce91d
commit
d83ffa3fbc
5 changed files with 101 additions and 74 deletions
|
|
@ -90,14 +90,9 @@ BR.Map = {
|
|||
BR.debug = BR.debug || {};
|
||||
BR.debug.map = map;
|
||||
|
||||
var layersAndOverlays = baseLayers;
|
||||
for (var o in overlays) {
|
||||
layersAndOverlays[o] = overlays[o];
|
||||
}
|
||||
return {
|
||||
map: map,
|
||||
layersControl: layersControl,
|
||||
layers: layersAndOverlays
|
||||
layersControl: layersControl
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
60
js/control/Control.Layers.js
Normal file
60
js/control/Control.Layers.js
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
BR.ControlLayers = L.Control.Layers.extend({
|
||||
|
||||
getActiveLayers: function () {
|
||||
var result = [];
|
||||
|
||||
for (var i = 0; i < this._layers.length; i++) {
|
||||
var obj = this._layers[i];
|
||||
if (this._map.hasLayer(obj.layer)) {
|
||||
if (obj.overlay) {
|
||||
result.push(obj);
|
||||
} else {
|
||||
result.unshift(obj);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
|
||||
removeActiveLayers: function () {
|
||||
var removed = [];
|
||||
|
||||
for (var i = 0; i < this._layers.length; i++) {
|
||||
var obj = this._layers[i];
|
||||
if (this._map.hasLayer(obj.layer)) {
|
||||
this._map.removeLayer(obj.layer);
|
||||
removed.push(obj);
|
||||
}
|
||||
}
|
||||
|
||||
return removed;
|
||||
},
|
||||
|
||||
getLayer: function (name) {
|
||||
for (var i = 0; i < this._layers.length; i++) {
|
||||
if (this._layers[i] && this._layers[i].name === name) {
|
||||
return this._layers[i];
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
activateLayer: function (name) {
|
||||
var obj = this.getLayer(name);
|
||||
if (obj) {
|
||||
this._map.addLayer(obj.layer);
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
|
||||
activateFirstLayer: function () {
|
||||
for (var i = 0; i < this._layers.length; i++) {
|
||||
var obj = this._layers[i];
|
||||
if (!obj.overlay) {
|
||||
this._map.addLayer(obj.layer);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
BR.LayersTab = L.Control.Layers.extend({
|
||||
BR.LayersTab = BR.ControlLayers.extend({
|
||||
previewLayer: null,
|
||||
saveLayers: [],
|
||||
|
||||
|
|
@ -123,7 +123,7 @@ BR.LayersTab = L.Control.Layers.extend({
|
|||
};
|
||||
|
||||
var onUncheckNode = function (e, data) {
|
||||
var obj = this._getLayerObjByName(data.node.text);
|
||||
var obj = this.getLayer(data.node.text);
|
||||
if (!obj) return;
|
||||
|
||||
this.removeLayer(obj.layer);
|
||||
|
|
@ -131,7 +131,7 @@ BR.LayersTab = L.Control.Layers.extend({
|
|||
if (this._map.hasLayer(obj.layer)) {
|
||||
this._map.removeLayer(obj.layer);
|
||||
if (!obj.overlay) {
|
||||
this.addFirstLayer();
|
||||
this.activateFirstLayer();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -287,41 +287,17 @@ BR.LayersTab = L.Control.Layers.extend({
|
|||
this.layersConfig.storeDefaultLayers(baseLayers, overlays);
|
||||
},
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_getLayerObjByName: function (name) {
|
||||
for (var i = 0; i < this._layers.length; i++) {
|
||||
if (this._layers[i] && this._layers[i].name === name) {
|
||||
return this._layers[i];
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
createLayer: function (layerData) {
|
||||
var layer = this.layersConfig.createLayer(layerData);
|
||||
layer.options.zIndex = this._lastZIndex + 1;
|
||||
return layer;
|
||||
},
|
||||
|
||||
removeSelectedLayers: function () {
|
||||
for (var i = 0; i < this._layers.length; i++) {
|
||||
var obj = this._layers[i];
|
||||
if (this._map.hasLayer(obj.layer)) {
|
||||
this._map.removeLayer(obj.layer);
|
||||
this.saveLayers.push(obj);
|
||||
}
|
||||
}
|
||||
saveRemoveActiveLayers: function () {
|
||||
this.saveLayers = this.removeActiveLayers();
|
||||
},
|
||||
|
||||
restoreSelectedLayers: function (overlaysOnly) {
|
||||
restoreActiveLayers: function (overlaysOnly) {
|
||||
for (var i = 0; i < this.saveLayers.length; i++) {
|
||||
var obj = this.saveLayers[i];
|
||||
|
||||
|
|
@ -333,7 +309,7 @@ BR.LayersTab = L.Control.Layers.extend({
|
|||
}
|
||||
} else if (!obj.overlay) {
|
||||
// saved base layer has been removed during preview, select first
|
||||
this.addFirstLayer();
|
||||
this.activateFirstLayer();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -361,7 +337,7 @@ BR.LayersTab = L.Control.Layers.extend({
|
|||
// otherwise added overlay checkbox state doesn't update
|
||||
setTimeout(L.Util.bind(function () {
|
||||
this.removePreviewLayer();
|
||||
this.restoreSelectedLayers(true);
|
||||
this.restoreActiveLayers(true);
|
||||
this.deselectNode();
|
||||
}, this), 0);
|
||||
},
|
||||
|
|
@ -369,7 +345,7 @@ BR.LayersTab = L.Control.Layers.extend({
|
|||
showPreview: function (layer) {
|
||||
this._map.addLayer(layer);
|
||||
if (!this.removePreviewLayer()) {
|
||||
this.removeSelectedLayers();
|
||||
this.saveRemoveActiveLayers();
|
||||
this._map.once('baselayerchange', this.onBaselayerchange, this);
|
||||
}
|
||||
this.previewLayer = layer;
|
||||
|
|
@ -378,7 +354,7 @@ BR.LayersTab = L.Control.Layers.extend({
|
|||
hidePreview: function (layer) {
|
||||
this._map.off('baselayerchange', this.onBaselayerchange, this);
|
||||
this.removePreviewLayer();
|
||||
this.restoreSelectedLayers();
|
||||
this.restoreActiveLayers();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@
|
|||
function initApp(mapContext) {
|
||||
var map = mapContext.map,
|
||||
layersControl = mapContext.layersControl,
|
||||
mapLayers = mapContext.layers,
|
||||
search,
|
||||
router,
|
||||
routing,
|
||||
|
|
@ -311,9 +310,9 @@
|
|||
};
|
||||
urlHash.onHashChangeCb = onHashChangeCb;
|
||||
urlHash.onInvalidHashChangeCb = onInvalidHashChangeCb;
|
||||
urlHash.layers = mapLayers;
|
||||
urlHash.map = map;
|
||||
urlHash.init(map, mapLayers);
|
||||
urlHash.init(map, {
|
||||
layersControl: layersControl
|
||||
});
|
||||
|
||||
routingOptions.on('update', urlHash.onMapMove, urlHash);
|
||||
nogos.on('update', urlHash.onMapMove, urlHash);
|
||||
|
|
|
|||
|
|
@ -23,7 +23,12 @@
|
|||
var zoom = parseInt(mapsArgs[0], 10),
|
||||
lat = parseFloat(mapsArgs[1]),
|
||||
lon = parseFloat(mapsArgs[2]),
|
||||
layers = decodeURIComponent(mapsArgs[3]).split('-'),
|
||||
layersParam = mapsArgs[3],
|
||||
// legacy support for '-' layer separator
|
||||
layerSeparator = layersParam.indexOf('-') !== -1 ? '-' : this.options.layerSeparator,
|
||||
layers = layersParam.split(layerSeparator).map(function (name) {
|
||||
return decodeURIComponent(name);
|
||||
}),
|
||||
additional = args[1];
|
||||
if (isNaN(zoom) || isNaN(lat) || isNaN(lon)) {
|
||||
return false;
|
||||
|
|
@ -44,26 +49,13 @@
|
|||
var center = map.getCenter(),
|
||||
zoom = map.getZoom(),
|
||||
precision = Math.max(0, Math.ceil(Math.log(zoom) / Math.LN2)),
|
||||
layers = [];
|
||||
layers = this.getActiveLayers();
|
||||
|
||||
//console.log(this.options);
|
||||
var options = this.options;
|
||||
//Check active layers
|
||||
for(var key in options) {
|
||||
if (options.hasOwnProperty(key)) {
|
||||
if (map.hasLayer(options[key])) {
|
||||
layers.push(key);
|
||||
};
|
||||
};
|
||||
};
|
||||
if (layers.length == 0) {
|
||||
layers.push(Object.keys(options)[0]);
|
||||
}
|
||||
var params = [
|
||||
zoom,
|
||||
center.lat.toFixed(precision),
|
||||
center.lng.toFixed(precision),
|
||||
encodeURIComponent(layers.join("-"))
|
||||
layers.join(this.options.layerSeparator)
|
||||
];
|
||||
url = "#map=" + params.join("/");
|
||||
if (this.additionalCb != null) {
|
||||
|
|
@ -76,6 +68,9 @@
|
|||
},
|
||||
|
||||
L.Hash.prototype = {
|
||||
options: {
|
||||
layerSeparator: ','
|
||||
},
|
||||
map: null,
|
||||
lastHash: null,
|
||||
|
||||
|
|
@ -95,6 +90,13 @@
|
|||
}
|
||||
},
|
||||
|
||||
getActiveLayers: function () {
|
||||
var objList = this.options.layersControl.getActiveLayers();
|
||||
return objList.map(function (obj) {
|
||||
return encodeURIComponent(obj.name);
|
||||
});
|
||||
},
|
||||
|
||||
removeFrom: function(map) {
|
||||
if (this.changeTimeout) {
|
||||
clearTimeout(this.changeTimeout);
|
||||
|
|
@ -144,27 +146,22 @@
|
|||
|
||||
this.map.setView(parsed.center, parsed.zoom);
|
||||
var layers = parsed.layers,
|
||||
options = this.options,
|
||||
layersControl = this.options.layersControl,
|
||||
that = this;
|
||||
//Add/remove layer
|
||||
this.map.eachLayer(function(layer) {
|
||||
for (alayer in that.layers) {
|
||||
if (that.layers[alayer] == layer) {
|
||||
that.map.removeLayer(layer);
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
layersControl.removeActiveLayers();
|
||||
|
||||
var added = false;
|
||||
layers.forEach(function(element, index, array) {
|
||||
if (element in options) {
|
||||
if (!element) return;
|
||||
var obj = layersControl.activateLayer(element);
|
||||
if (obj && !obj.overlay) {
|
||||
added = true;
|
||||
that.map.addLayer(options[element]);
|
||||
}
|
||||
});
|
||||
if (!added) {
|
||||
// if we couldn't add layers (custom ones or invalid name), add the default one
|
||||
this.map.addLayer(options[Object.keys(options)[0]]);
|
||||
// if we couldn't add layers (removed or invalid name), add the default one
|
||||
layersControl.activateFirstLayer();
|
||||
}
|
||||
|
||||
if (this.onHashChangeCb != null) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue