Small css tweaks, fix layer filtering

Logic/FeatureSource/FilteringFeatureSource.ts

@@ -32,12 +32,12 @@ 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)) {
@@ -54,7 +54,8 @@ 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 = [];
@@ -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<boolean>,
+        layerDef: LayerConfig
+    }, location: UIEventSource<Loc>) {
+        return layer.isDisplayed.data && (layer.layerDef.minzoom <= location.data.zoom)
+    }
 }

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, "<del>", name, "</del>", zoomStatus]).SetStyle(style),
+                new Combine([new Combine([icon, name]).SetStyle(style), zoomStatus])
+                    .SetStyle(styleWhole),
+                new Combine([new Combine([iconUnselected, "<del>", name, "</del>"]).SetStyle(style), zoomStatus])
+                    .SetStyle(styleWhole),
                 layer.isDisplayed)
                 .SetStyle("margin:0.3em;")
             );

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;
 }
 

index.css

@@ -103,6 +103,7 @@ a {
     position: relative;
     width: 2em;
     height: 2em;
+    flex-shrink: 0;
 }
 
 .single-layer-selection-toggle img {