Sexier layer selection panel

UI/LayerSelection.ts

@@ -4,6 +4,8 @@ import Combine from "./Base/Combine";
 import {Img} from "./Img";
 import {State} from "../State";
 import Translations from "./i18n/Translations";
+import {FixedUiElement} from "./Base/FixedUiElement";
+import {VariableUiElement} from "./Base/VariableUIElement";
 
 export class LayerSelection extends UIElement {
 
@@ -15,16 +17,36 @@ export class LayerSelection extends UIElement {
 
         for (const layer of State.state.filteredLayers.data) {
             const checkbox = Img.checkmark;
-            let icon = "";
+            let icon : UIElement;
             if (layer.layerDef.icon && layer.layerDef.icon !== "") {
-                icon = `<img width="20" height="20" src="${layer.layerDef.icon}">`
+                icon = new FixedUiElement(`<img style="height:2em;max-width: 2em;" src="${layer.layerDef.icon}">`);
+            }else{
+                icon = new FixedUiElement(Img.checkmark);
             }
-            const name = Translations.WT(layer.layerDef.name).Clone()
-                .SetStyle("font-size:large;");
 
+            let iconUnselected : UIElement;
+            if (layer.layerDef.icon && layer.layerDef.icon !== "") {
+                iconUnselected = new FixedUiElement(`<img style="height:2em;max-width: 2em;" src="${layer.layerDef.icon}">`);
+            }else{
+                iconUnselected = new FixedUiElement("");
+            }
+            iconUnselected.SetStyle("opacity:0.2");
+            
+            const name = Translations.WT(layer.layerDef.name).Clone()
+                .SetStyle("font-size:large;margin-left: 0.5em;");
+
+            
+            const zoomStatus = new VariableUiElement(State.state.locationControl.map(location => {
+                if(location.zoom < layer.layerDef.minzoom){
+                    return Translations.t.general.zoomInToSeeThisLayer
+                        .SetClass("alert")
+                        .Render();
+                }
+                return ""
+            }))
             this._checkboxes.push(new CheckBox(
-                new Combine([checkbox, icon, name]),
+                new Combine([icon, name, zoomStatus]),
-                new Combine([Img.no_checkmark, icon, name]),
+                new Combine([iconUnselected, "<del>",name,"</del>", zoomStatus]),
                 layer.isDisplayed)
                 .SetStyle("margin:0.3em;")
             );

UI/i18n/Translations.ts

@@ -498,7 +498,7 @@ export default class Translations {
                     "<p>Moltes persones i aplicacions ja utilitzen OpenStreetMap: <a href='https://maps.me/' target='_blank'>Maps.me</a>, <a href='https://osmAnd.net' target='_blank'>OsmAnd</a>, però també els mapes de Facebook, Instagram, Apple i Bing són (en part) impulsats ​​per OpenStreetMap." +
                     "Si canvies alguna cosa aquí també es reflectirà en aquestes aplicacions en la seva propera actualització.</p>",
                 nl: "<h3>Een open kaart</h3>" +
-                    "<p>Zou het niet fantastisch zijn als er een open kaart zou zijn die door iedereen aangepast én gebruikt kan worden? Een kaart iedereen zijn interesses aan zou kunnen toevoegen? " +
+                    "<p>Zou het niet fantastisch zijn als er een open kaart zou zijn die door iedereen aangepast én gebruikt kan worden? Een kaart waar iedereen zijn interesses aan zou kunnen toevoegen? " +
                     "Dan zouden er geen duizend-en-één verschillende kleine kaartjes, websites, ... meer nodig zijn</p>" +
                     "<p><b><a href='https://OpenStreetMap.org' target='_blank'>OpenStreetMap</a></b> is deze open kaart. Je mag de kaartdata gratis gebruiken (mits <a href='https://osm.org/copyright' target='_blank'>bronvermelding en herpublicatie van aanpassingen</a>). Daarenboven mag je de kaart ook gratis aanpassen als je een account maakt. " +
                     "Ook deze website is gebaseerd op OpenStreetMap. Als je hier een vraag beantwoord, gaat het antwoord daar ook naartoe</p>" +
@@ -791,6 +791,10 @@ export default class Translations {
                 "en": "Background map",
                 "nl": "Achtergrondkaart",
                 "de": "Hintergrundkarte"
+            }),
+            zoomInToSeeThisLayer: new T({
+                "nl":"Vergroot de kaart om deze laag te zien",
+                "en":"Zoom in to see this layer"
             })
         },
         favourite: {