diff --git a/Logic/FeatureSource/FilteringFeatureSource.ts b/Logic/FeatureSource/FilteringFeatureSource.ts index 9d684248e..cfc9c9480 100644 --- a/Logic/FeatureSource/FilteringFeatureSource.ts +++ b/Logic/FeatureSource/FilteringFeatureSource.ts @@ -32,20 +32,20 @@ export default class FilteringFeatureSource implements FeatureSource { if (layer === undefined) { throw "No layer found with id " + layerId; } - if(layer.isDisplayed.data && (layer.layerDef.minzoom <= location.data.zoom)){ + if (FilteringFeatureSource.showLayer(layer, location)) { return true; } // Does it match any other layer? for (const toCheck of layers) { - if(!toCheck.isDisplayed.data){ + if (!FilteringFeatureSource.showLayer(toCheck, location)) { continue; } - if(toCheck.layerDef.overpassTags.matchesProperties(f.feature.properties)){ + if (toCheck.layerDef.overpassTags.matchesProperties(f.feature.properties)) { return true; } } return false; - + }); self.features.setData(newFeatures); } @@ -54,15 +54,16 @@ export default class FilteringFeatureSource implements FeatureSource { layerDict[layer.layerDef.id] = layer; } upstream.features.addCallback(() => { - update()}); + update() + }); location.map(l => { // We want something that is stable for the shown layers const displayedLayerIndexes = []; for (let i = 0; i < layers.length; i++) { - if(l.zoom < layers[i].layerDef.minzoom){ + if (l.zoom < layers[i].layerDef.minzoom) { continue; } - if(!layers[i].isDisplayed.data){ + if (!layers[i].isDisplayed.data) { continue; } displayedLayerIndexes.push(i); @@ -70,10 +71,16 @@ export default class FilteringFeatureSource implements FeatureSource { return displayedLayerIndexes.join(",") }, layers.map(l => l.isDisplayed)) .addCallback(() => { - update();}); + update(); + }); } - + private static showLayer(layer: { + isDisplayed: UIEventSource, + layerDef: LayerConfig + }, location: UIEventSource) { + return layer.isDisplayed.data && (layer.layerDef.minzoom <= location.data.zoom) + } } \ No newline at end of file diff --git a/UI/BigComponents/LayerSelection.ts b/UI/BigComponents/LayerSelection.ts index f38b8ca5b..d812b6810 100644 --- a/UI/BigComponents/LayerSelection.ts +++ b/UI/BigComponents/LayerSelection.ts @@ -43,10 +43,13 @@ export default class LayerSelection extends UIElement { } 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( - new Combine([icon, name, zoomStatus]).SetStyle(style), - new Combine([iconUnselected, "", name, "", zoomStatus]).SetStyle(style), + new Combine([new Combine([icon, name]).SetStyle(style), zoomStatus]) + .SetStyle(styleWhole), + new Combine([new Combine([iconUnselected, "", name, ""]).SetStyle(style), zoomStatus]) + .SetStyle(styleWhole), layer.isDisplayed) .SetStyle("margin:0.3em;") ); diff --git a/css/tagrendering.css b/css/tagrendering.css index f99be5789..eb3290bda 100644 --- a/css/tagrendering.css +++ b/css/tagrendering.css @@ -28,7 +28,7 @@ box-shadow: 0 10px 10px -10px var(--shadow-color); display: flex; justify-content: space-between; - max-width: 95vw; + width: 100%; overflow-x: hidden; } @@ -68,7 +68,7 @@ max-height: 75vh; overflow-y: auto; padding-top: 1em; - max-width: 95vw; + width:100%; overflow-x: hidden; } diff --git a/index.css b/index.css index 74584f272..486bdbd11 100644 --- a/index.css +++ b/index.css @@ -103,6 +103,7 @@ a { position: relative; width: 2em; height: 2em; + flex-shrink: 0; } .single-layer-selection-toggle img {