diff --git a/UI/LayerSelection.ts b/UI/LayerSelection.ts index f9fad8c824..8f9779a8d9 100644 --- a/UI/LayerSelection.ts +++ b/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 = `` + icon = new FixedUiElement(``); + }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(``); + }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([Img.no_checkmark, icon, name]), + new Combine([icon, name, zoomStatus]), + new Combine([iconUnselected, "",name,"", zoomStatus]), layer.isDisplayed) .SetStyle("margin:0.3em;") ); diff --git a/UI/i18n/Translations.ts b/UI/i18n/Translations.ts index 5d9d80c222..0887dd6d06 100644 --- a/UI/i18n/Translations.ts +++ b/UI/i18n/Translations.ts @@ -498,7 +498,7 @@ export default class Translations { "

Moltes persones i aplicacions ja utilitzen OpenStreetMap: Maps.me, OsmAnd, 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ó.

", nl: "

Een open kaart

" + - "

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? " + + "

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

" + "

OpenStreetMap is deze open kaart. Je mag de kaartdata gratis gebruiken (mits bronvermelding en herpublicatie van aanpassingen). 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

" + @@ -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: {