commit a3b819edee6644244782ab121842b545eb7b4308
parent 2bb03aaf77a0f7a2688e3dcb0a848d00c7645b4f
Author: Sergej Orlov <wladimirych@gmail.com>
Date: Thu, 5 Jul 2018 01:35:09 +0300
[layers] add option to custom layers to place them above or below other layers #95
Diffstat:
3 files changed, 38 insertions(+), 21 deletions(-)
diff --git a/src/layers.js b/src/layers.js
@@ -1080,6 +1080,7 @@ export default function getLayers() {
'O-sport',
// line overlays
+ '#custom',
'Waymarked Hiking Trails',
'Waymarked Cycling Trails',
'Norway summer trails',
@@ -1105,7 +1106,7 @@ export default function getLayers() {
// assign order to layers
const orderByTitle = {};
for (let i=0; i < titlesByOrder.length; i++) {
- const title = titlesByOrder[i];
+ let title = titlesByOrder[i];
orderByTitle[title] = i + 1;
}
@@ -1180,15 +1181,17 @@ export default function getLayers() {
// check order definition
let seenOverlay = false;
for (let title of titlesByOrder) {
- if (!titles.has(title)) {
- throw new Error(`Unknown layer title in order list: ${title}`);
- }
- let isOverlay = layersByTitle[title];
- if (isOverlay) {
- seenOverlay = true;
- } else {
- if (seenOverlay) {
- throw new Error(`Base layer after overlays: ${title}`);
+ if (title[0] !== '#') {
+ if (!titles.has(title)) {
+ throw new Error(`Unknown layer title in order list: ${title}`);
+ }
+ let isOverlay = layersByTitle[title];
+ if (isOverlay) {
+ seenOverlay = true;
+ } else {
+ if (seenOverlay) {
+ throw new Error(`Base layer after overlays: ${title}`);
+ }
}
}
}
@@ -1209,6 +1212,6 @@ export default function getLayers() {
}
}
- return grouppedLayers;
+ return {layers: grouppedLayers, customLayersOrder: orderByTitle['#custom']};
}
diff --git a/src/lib/leaflet.control.layers.configure/index.js b/src/lib/leaflet.control.layers.configure/index.js
@@ -6,7 +6,7 @@ import {notify} from 'lib/notifications';
import logging from 'lib/logging';
import safeLocalStorage from 'lib/safe-localstorage';
-function enableConfig(control, layers) {
+function enableConfig(control, {layers, customLayersOrder}) {
const originalOnAdd = control.onAdd;
const originalUnserializeState = control.unserializeState;
const originalAddItem = control._addItem;
@@ -15,11 +15,6 @@ function enableConfig(control, layers) {
}
enableTopRow(control);
- control.options = L.Util.extend({
- customBaseLayersOrder: 999,
- customOverlaysOrder: 10000
- }, control.options);
-
L.Util.extend(control, {
_configEnabled: true,
_allLayersGroups: layers,
@@ -179,7 +174,8 @@ function enableConfig(control, layers) {
tms: false,
maxZoom: 18,
isOverlay: false,
- scaleDependent: false
+ scaleDependent: false,
+ isTop: true
}
);
},
@@ -263,6 +259,7 @@ function enableConfig(control, layers) {
scaleDependent: ko.observable(fieldValues.scaleDependent),
maxZoom: ko.observable(fieldValues.maxZoom),
isOverlay: ko.observable(fieldValues.isOverlay),
+ isTop: ko.observable(fieldValues.isTop),
buttonClicked: function buttonClicked(callbackN) {
const fieldValues = {
name: dialogModel.name().trim(),
@@ -270,7 +267,8 @@ function enableConfig(control, layers) {
tms: dialogModel.tms(),
scaleDependent: dialogModel.scaleDependent(),
maxZoom: dialogModel.maxZoom(),
- isOverlay: dialogModel.isOverlay()
+ isOverlay: dialogModel.isOverlay(),
+ isTop: dialogModel.isTop()
};
console.log(fieldValues);
buttons[callbackN].callback(fieldValues);
@@ -283,6 +281,12 @@ function enableConfig(control, layers) {
<label>Tile url template<br/><textarea data-bind="value: url" style="width: 100%"></textarea></label><br/>
<label><input type="radio" name="overlay" data-bind="checked: isOverlay, checkedValue: false">Base layer</label><br/>
<label><input type="radio" name="overlay" data-bind="checked: isOverlay, checkedValue: true">Overlay</label><br/>
+<hr/>
+<label><input type="radio" name="top-or-bottom"
+ data-bind="checked: isTop, checkedValue: true, enable: isOverlay">Place above other layers</label><br/>
+<label><input type="radio" name="top-or-bottom"
+ data-bind="checked: isTop, checkedValue: false, enable: isOverlay">Place below other layers</label><br/>
+<hr/>
<label><input type="checkbox" data-bind="checked: scaleDependent"/>Content depends on scale(like OSM or Google maps)</label><br/>
<label><input type="checkbox" data-bind="checked: tms" />TMS rows order</label><br />
@@ -385,7 +389,8 @@ function enableConfig(control, layers) {
print: true,
jnx: true,
code: serialized,
- noCors: true
+ noCors: true,
+ isTop: fieldValues.isTop
}
);
@@ -395,7 +400,7 @@ function enableConfig(control, layers) {
isCustom: true,
serialized: serialized,
layer: tileLayer,
- order: fieldValues.isOverlay ? this.options.customOverlaysOrder : this.options.customBaseLayersOrder,
+ order: (fieldValues.isTop ? customLayersOrder : -1),
fieldValues: fieldValues,
enabled: true,
checked: ko.observable(true)
@@ -477,6 +482,10 @@ function enableConfig(control, layers) {
if (!this.customLayerExists(fieldValues)) {
this._customLayers.push(this.createCustomLayer(fieldValues));
}
+ // upgrade
+ if (fieldValues.isTop === undefined) {
+ fieldValues.isTop = true;
+ }
return this.serializeCustomLayer(fieldValues);
}
diff --git a/src/lib/leaflet.control.layers.configure/style.css b/src/lib/leaflet.control.layers.configure/style.css
@@ -164,4 +164,9 @@
.leaflet-layers-configure-just-added-2 {
transition: background-color 7s ease-in;
background-color: rgba(0, 0, 0, 0);
+}
+
+.custom-layers-window hr {
+ border: none;
+ border-top: 1px solid hsl(0, 0%, 85%);
}
\ No newline at end of file
