Small css tweaks, fix layer filtering
This commit is contained in:
parent
52f1d5511d
commit
ddea3d2fc1
4 changed files with 25 additions and 14 deletions
|
@ -32,20 +32,20 @@ export default class FilteringFeatureSource implements FeatureSource {
|
||||||
if (layer === undefined) {
|
if (layer === undefined) {
|
||||||
throw "No layer found with id " + layerId;
|
throw "No layer found with id " + layerId;
|
||||||
}
|
}
|
||||||
if(layer.isDisplayed.data && (layer.layerDef.minzoom <= location.data.zoom)){
|
if (FilteringFeatureSource.showLayer(layer, location)) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
// Does it match any other layer?
|
// Does it match any other layer?
|
||||||
for (const toCheck of layers) {
|
for (const toCheck of layers) {
|
||||||
if(!toCheck.isDisplayed.data){
|
if (!FilteringFeatureSource.showLayer(toCheck, location)) {
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
if(toCheck.layerDef.overpassTags.matchesProperties(f.feature.properties)){
|
if (toCheck.layerDef.overpassTags.matchesProperties(f.feature.properties)) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
|
|
||||||
});
|
});
|
||||||
self.features.setData(newFeatures);
|
self.features.setData(newFeatures);
|
||||||
}
|
}
|
||||||
|
@ -54,15 +54,16 @@ export default class FilteringFeatureSource implements FeatureSource {
|
||||||
layerDict[layer.layerDef.id] = layer;
|
layerDict[layer.layerDef.id] = layer;
|
||||||
}
|
}
|
||||||
upstream.features.addCallback(() => {
|
upstream.features.addCallback(() => {
|
||||||
update()});
|
update()
|
||||||
|
});
|
||||||
location.map(l => {
|
location.map(l => {
|
||||||
// We want something that is stable for the shown layers
|
// We want something that is stable for the shown layers
|
||||||
const displayedLayerIndexes = [];
|
const displayedLayerIndexes = [];
|
||||||
for (let i = 0; i < layers.length; i++) {
|
for (let i = 0; i < layers.length; i++) {
|
||||||
if(l.zoom < layers[i].layerDef.minzoom){
|
if (l.zoom < layers[i].layerDef.minzoom) {
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
if(!layers[i].isDisplayed.data){
|
if (!layers[i].isDisplayed.data) {
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
displayedLayerIndexes.push(i);
|
displayedLayerIndexes.push(i);
|
||||||
|
@ -70,10 +71,16 @@ export default class FilteringFeatureSource implements FeatureSource {
|
||||||
return displayedLayerIndexes.join(",")
|
return displayedLayerIndexes.join(",")
|
||||||
}, layers.map(l => l.isDisplayed))
|
}, layers.map(l => l.isDisplayed))
|
||||||
.addCallback(() => {
|
.addCallback(() => {
|
||||||
update();});
|
update();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private static showLayer(layer: {
|
||||||
|
isDisplayed: UIEventSource<boolean>,
|
||||||
|
layerDef: LayerConfig
|
||||||
|
}, location: UIEventSource<Loc>) {
|
||||||
|
return layer.isDisplayed.data && (layer.layerDef.minzoom <= location.data.zoom)
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -43,10 +43,13 @@ export default class LayerSelection extends UIElement {
|
||||||
}
|
}
|
||||||
return ""
|
return ""
|
||||||
}))
|
}))
|
||||||
const style = "display:flex;align-items:center;flex-wrap:wrap;"
|
const style = "display:flex;align-items:center;"
|
||||||
|
const styleWhole = "display:flex; flex-wrap: wrap"
|
||||||
this._checkboxes.push(new CheckBox(
|
this._checkboxes.push(new CheckBox(
|
||||||
new Combine([icon, name, zoomStatus]).SetStyle(style),
|
new Combine([new Combine([icon, name]).SetStyle(style), zoomStatus])
|
||||||
new Combine([iconUnselected, "<del>", name, "</del>", zoomStatus]).SetStyle(style),
|
.SetStyle(styleWhole),
|
||||||
|
new Combine([new Combine([iconUnselected, "<del>", name, "</del>"]).SetStyle(style), zoomStatus])
|
||||||
|
.SetStyle(styleWhole),
|
||||||
layer.isDisplayed)
|
layer.isDisplayed)
|
||||||
.SetStyle("margin:0.3em;")
|
.SetStyle("margin:0.3em;")
|
||||||
);
|
);
|
||||||
|
|
|
@ -28,7 +28,7 @@
|
||||||
box-shadow: 0 10px 10px -10px var(--shadow-color);
|
box-shadow: 0 10px 10px -10px var(--shadow-color);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
max-width: 95vw;
|
width: 100%;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -68,7 +68,7 @@
|
||||||
max-height: 75vh;
|
max-height: 75vh;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding-top: 1em;
|
padding-top: 1em;
|
||||||
max-width: 95vw;
|
width:100%;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -103,6 +103,7 @@ a {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 2em;
|
width: 2em;
|
||||||
height: 2em;
|
height: 2em;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.single-layer-selection-toggle img {
|
.single-layer-selection-toggle img {
|
||||||
|
|
Loading…
Reference in a new issue