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