New mapcomplete version

Customizations/JSON/FromJSON.ts

@@ -264,7 +264,18 @@ export class FromJSON {
         const width = FromJSON.TagRenderingWithDefault(json.width, "layerwidth", "10");
 
         let tagRenderingDefs = json.tagRenderings ?? [];
-        if (tagRenderingDefs.indexOf("images") < 0) {
+        let hasImageElement = false;
+        for (const tagRenderingDef of tagRenderingDefs) {
+            if (typeof tagRenderingDef !== "string") {
+                continue;
+            }
+            let str = tagRenderingDef as string;
+            if(tagRenderingDef.indexOf("images") >= 0 || str.indexOf("pictures") >= 0){
+                hasImageElement = true;
+                break;
+            }
+        }
+        if (!hasImageElement) {
             tagRenderingDefs = ["images", ...tagRenderingDefs];
         }
         let tagRenderings = tagRenderingDefs.map(FromJSON.TagRendering);

Customizations/Layouts/Groen.ts

@@ -14,7 +14,8 @@ export class Groen extends Layout {
             50.8435,
             4.3688,
             "\n" +
-            "<img src='./assets/themes/buurtnatuur/groen_logo.svg' alt='logo-groen' class='logo'> <br />" +
+            
+            "<img style='float:right;margin: 1em;width: 10em;height: auto;' src='./assets/themes/buurtnatuur/groen_logo.svg' alt='logo-groen' class='logo'> <br />" +
             "<h3>Breng jouw buurtnatuur in kaart</h3>" +
             "<b>Natuur maakt gelukkig.</b> Aan de hand van deze website willen we de natuur dicht bij ons beter inventariseren. Met als doel meer mensen te laten genieten van toegankelijke natuur én te strijden voor meer natuur in onze buurten. \n" +
             "<ul>" +

Customizations/Questions/WikipediaLink.ts

@@ -32,10 +32,12 @@ export class WikipediaLink extends TagRenderingOptions {
             key: "wikipedia",
             template: "$$$",
             renderTemplate:
-                "<span class='wikipedialink'>" +
+                "<span style='position: absolute;right: 24px;width: 24px;height: 24px;padding-right: 12px;'>" +
                 "<a href='{wikipedia}' target='_blank'>" +
-                "<img width='64px' src='./assets/wikipedia.svg' alt='wikipedia'>" +
+                "<img style='width: 24px;height: 24px;' src='./assets/wikipedia.svg' alt='wikipedia'>" +
                 "</a></span>",
+
+
             placeholder: ""
 
         },

Customizations/TagRendering.ts

@@ -172,14 +172,15 @@ TagRendering extends UIElement implements TagDependantUIElement {
 
         this._editButton = new FixedUiElement("");
         if (this._question !== undefined) {
-            this._editButton = new FixedUiElement("<img class='editbutton' src='./assets/pencil.svg' alt='edit'>")
+            this._editButton = new FixedUiElement(
+                "<img style='width: 1.3em;height: 1.3em;padding: 0.5em;border-radius: 0.65em;border: solid black 1px;font-size: medium;float: right;' " +
+                "src='./assets/pencil.svg' alt='edit'>")
                 .onClick(() => {
                     self._editMode.setData(true);
                     self._questionElement.GetValue().setData(self.CurrentValue());
                 });
         }
 
-
         const cancelContents = this._editMode.map((isEditing) => {
             if (isEditing) {
                 return "<span class='skip-button'>" + Translations.t.general.cancel.R() + "</span>";

InitUiElements.ts

@@ -62,14 +62,31 @@ export class InitUiElements {
         if (State.state.featureSwitchMoreQuests.data) {
 
             tabs.push({
-                header: `<img src='./assets/add.svg'>`
-                , content: new MoreScreen()
+                header: `<img src='./assets/add.svg'>`,
+                content: new VariableUiElement(State.state.osmConnection.userDetails.map(userdetails => {
+                    if(userdetails.csCount < State.userJourney.moreScreenUnlock){
+                        return "";
+                    }
+                    return new MoreScreen().Render()
+                }, [Locale.language]))
             });
         }
 
 
-        const fullOptions = new TabbedComponent(tabs, State.state.welcomeMessageOpenedTab);
+        tabs.push({
+                header: `<img src='./assets/help.svg'>`,
+                content: new VariableUiElement(State.state.osmConnection.userDetails.map(userdetails => {
+                    if (userdetails.csCount < State.userJourney.mapCompleteHelpUnlock) {
+                        return ""
+                    }
+                    return Translations.t.general.aboutMapcomplete.Render();
+                }, [Locale.language]))
+            }
+        );
 
+
+        const fullOptions = new TabbedComponent(tabs, State.state.welcomeMessageOpenedTab);
+        fullOptions.ListenTo(State.state.osmConnection.userDetails);
         return fullOptions;
 
     }

Logic/Osm/OsmConnection.ts

@@ -117,6 +117,8 @@ export class OsmConnection {
     public LogOut() {
         this.auth.logout();
         this.userDetails.data.loggedIn = false;
+        this.userDetails.data.csCount = 0;
+        this.userDetails.data.name = "";
         this.userDetails.ping();
         console.log("Logged out")
     }

State.ts

@@ -23,15 +23,19 @@ export class State {
     // The singleton of the global state
     public static state: State;
     
-    public static vNumber = "0.0.7e Fixing all the bugs";
+    public static vNumber = "0.0.7f";
     
     // The user journey states thresholds when a new feature gets unlocked
     public static userJourney = {
+        moreScreenUnlock: 5,
         personalLayoutUnlock: 20,
         tagsVisibleAt: 100,
+        mapCompleteHelpUnlock: 200,
         tagsVisibleAndWikiLinked: 150,
         themeGeneratorReadOnlyUnlock: 200,
         themeGeneratorFullUnlock: 500, 
+
+
     };
 
     public static runningFromConsole: boolean = false; 

UI/FullScreenMessageBoxHandler.ts

@@ -36,7 +36,7 @@ export class FullScreenMessageBox extends UIElement {
             window.onhashchange = function () {
                 if (location.hash === "") {
                     // No more element: back to the map!
-                    self._uielement.setData(undefined);
+                    self._uielement?.setData(undefined);
                     onClear();
                 }
             }
@@ -58,7 +58,7 @@ export class FullScreenMessageBox extends UIElement {
         if (this._uielement === undefined) {
             return "";
         }
-        return new Combine([this._uielement, this.returnToTheMap]).SetStyle("").Render();
+        return new Combine([this._uielement, this.returnToTheMap]).Render();
     }
 
 

UI/i18n/Translations.ts

@@ -1148,11 +1148,11 @@ export default class Translations {
             },
             morescreen: {
                 intro: new T({
-                    en: "<h3>More quests</h3>Do you enjoy collecting geodata? <br/>There are more layers available.",
+                    en: "<h3>More quests</h3>Do you enjoy collecting geodata? <br/>There are more themes available.",
                     ca: "<h3>Més peticions</h3>T\'agrada captar dades? <br/>Hi ha més capes disponibles.",
                     es: "<h3>Más peticiones</h3>Te gusta captar datos? <br/>Hay más capas disponibles.",
                     fr: "<h3>Plus de thème </h3>Vous aimez collecter des données? <br/>Il y a plus de thèmes disponible.",
-                    nl: "<h3>Meer thema's</h3>Vind je het leuk om geodata te verzamelen? <br/> Hier vind je meer opties.",
+                    nl: "<h3>Meer thema's</h3>Vind je het leuk om geodata te verzamelen? <br/> Hier vind je meer kaartthemas.",
                     gl: "<h3>Máis tarefas</h3>Góstache captar datos? <br/>Hai máis capas dispoñíbeis."
                 }),
                 
@@ -1232,7 +1232,40 @@ export default class Translations {
                 en: "<h3>Custom themes</h3>These are previously visited user-generated themes.",
                 nl: "<h3>Onofficiële themea's</h3>Je bezocht deze thema's gemaakt door andere OpenStreetMappers eerder",
                 gl: "<h3>Temas personalizados</h3>Estes son temas xerados por usuarios previamente visitados."
-            }),
+            }), aboutMapcomplete: new T({
+                en:"<h3>About MapComplete</h3>" +
+                    "<p>MapComplete is an OpenStreetMap editor that is meant to help everyone to easily add information on a <b>single theme.</b></p>" +
+                    "<p>Only features relevant to a single theme are shown with a few predefined questions, in order to keep things <b>simple and extremly user-friendly</b>." +
+                    "The theme maintainer can also choose a language for the interface, choose to disable elements or even to embed it into a different website without any UI-element at all.</p>" + 
+                  
+                    "<p>However, another important part of MapComplete is to always <b>offer the next step</b> to learn more about OpenStreetMap:" +
+                    "<ul>" +
+                    "<li>An iframe without UI-elements will link to a full-screen version</li>" +
+                    "<li>The fullscreen version offers information about OpenStreetMap</li>" +
+                    "<li>If you're not logged in, you're asked to log in</li>" +
+                    "<li>If you answered a single question, you are allowed to add points</li>" +
+                    "<li>At a certain point, the actual added tags appear which later get linked to the wiki...</li>" +
+                    "</ul></p>" +
+                    "<p>Do you notice an issue with MapComplete? Do you have a feature request? Do you want to help translating? " +
+                    "Head over to <a href='https://github.com/pietervdvn/MapComplete' target='_blank'>the source code</a> or <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'>issue tracker.</a></p>",
+                nl:"<h3>Over MapComplete</h3>" +
+                    "<p>MapComplete is een OpenStreetMap-editor om eenvoudig informatie toe te voegen over <b>één enkel onderwerp</b>.</p>" +
+                    "<p>Om de editor zo <b>simpel en gebruiksvriendelijk mogelijk</b> te houden, worden enkel objecten relevant voor het thema getoond." +
+                    "Voor deze objecten kunnen dan vragen beantwoord worden, of men kan een nieuw punt van dit thema toevoegen." +
+                    "De maker van het thema kan er ook voor opteren om een aantal elementen van de gebruikersinterface uit te schakelen of de taal ervan in te stellen.</p>" +
+
+                    "<p>Een ander belangrijk aspect is om bezoekers stap voor stap meer te leren over OpenStreetMap:" +
+                    "<ul>" +
+                    "<li>Een iframe zonder verdere uitleg linkt naar de volledige versie van MapComplete</li>" +
+                    "<li>De volledige versie heeft uitleg over OpenStreetMap</li>" +
+                    "<li>Als je niet aangemeld bent, wordt er je gevraagd dit te doen</li>" +
+                    "<li>Als je minstens één vraag hebt beantwoord, kan je punten gaan toevoegen.</li>" +
+                    "<li>Heb je genoeg changesets, dan verschijnen de tags die wat later doorlinken naar de wiki</li>" +
+                    "</ul></p>" +
+                    "<p>Merk je een bug of wil je een extra feature? Wil je helpen vertalen? Bezoek dan de <a href='https://github.com/pietervdvn/MapComplete' target='_blank'>broncode</a> en <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'>issue tracker</a></p>",
+
+            })
+
 
         },
         favourite: {

aed.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>    
+<!-- WARNING: index.html serves as a template. If you want to change something, change it there -->
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <title>MapComplete</title>
+    <link rel="stylesheet" href="./vendor/leaflet.css"/>
+    <link rel="stylesheet" href="./index.css"/>
+    <link rel="stylesheet" href="./css/userbadge.css"/>
+    <link rel="stylesheet" href="./css/slideshow.css"/>
+    <link rel="manifest" href="./aed.webmanifest">
+    <link rel="icon" href="./assets/themes/aed/aed.svg" sizes="any" type="image/svg+xml">
+    
+    <meta property="og:type" content="website">
+    
+    <meta property="og:image" content="./assets/add.svg">
+    <meta property="og:title" content="Open AED Map">
+    <meta property="og:description" content="Easily add and edit geodata with OpenStreetMap">
+
+    <style>
+        #decoration-desktop img {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+    
+</head>
+<body>
+
+<div style="position: absolute; left: 1em; bottom: 1em; width:35vh; height:35vh;"
+     id="decoration-desktop">
+    <!-- A nice decoration while loading or on errors -->
+    <img src='./assets/themes/aed/aed.svg' width="100%" height="100%">
+</div>
+
+<div id="hidden-on-mobile">
+    <div id="messagesboxmobile">
+    </div>
+</div>
+
+<div id="topleft-tools">
+    <div id="userbadge-and-search">
+        <div id="userbadge" class="shadow">
+        </div>
+        <div id="searchbox" class="shadow"></div>
+    </div>
+    <div id="messagesbox"></div>
+    <br/>
+    <div id="help-button-mobile"></div>
+</div>
+
+<div id="filter__popup" class="filter__popup">
+    <div id="filter__selection"></div>
+</div>
+
+<div id="centermessage">Loading MapComplete, hang on...</div>
+<div id="top-right"></div>
+
+<div id="geolocate-button"></div>
+<div id="leafletDiv"></div>
+
+<script src="./index.ts"></script>
+<script src="./vendor/Leaflet.AccuratePosition.js"></script>
+
+<script data-goatcounter="https://pietervdvn.goatcounter.com/count"
+        async src="//gc.zgo.at/count.js"></script>
+
+</body>
+</html>

aed.webmanifest

@@ -0,0 +1 @@
+{"name":"aed","short_name":"Open AED Map","start_url":"/MapComplete/aed.html","display":"standalone","background_color":"#fff","description":"","orientation":"portrait-primary, landscape-primary","icons":[{"src":"assets/generated/themes_aed_aed72.png","sizes":"72x72","type":"image/png"},{"src":"assets/generated/themes_aed_aed96.png","sizes":"96x96","type":"image/png"},{"src":"assets/generated/themes_aed_aed120.png","sizes":"120x120","type":"image/png"},{"src":"assets/generated/themes_aed_aed128.png","sizes":"128x128","type":"image/png"},{"src":"assets/generated/themes_aed_aed144.png","sizes":"144x144","type":"image/png"},{"src":"assets/generated/themes_aed_aed152.png","sizes":"152x152","type":"image/png"},{"src":"assets/generated/themes_aed_aed180.png","sizes":"180x180","type":"image/png"},{"src":"assets/generated/themes_aed_aed192.png","sizes":"192x192","type":"image/png"},{"src":"assets/generated/themes_aed_aed384.png","sizes":"384x384","type":"image/png"},{"src":"assets/generated/themes_aed_aed512.png","sizes":"512x512","type":"image/png"},{"src":"./assets/themes/aed/aed.svg","sizes":"513x513","type":"image/svg"}]}

artworks.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>    
+<!-- WARNING: index.html serves as a template. If you want to change something, change it there -->
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <title>MapComplete</title>
+    <link rel="stylesheet" href="./vendor/leaflet.css"/>
+    <link rel="stylesheet" href="./index.css"/>
+    <link rel="stylesheet" href="./css/userbadge.css"/>
+    <link rel="stylesheet" href="./css/slideshow.css"/>
+    <link rel="manifest" href="./artworks.webmanifest">
+    <link rel="icon" href="./assets/themes/artwork/artwork.svg" sizes="any" type="image/svg+xml">
+    
+    <meta property="og:type" content="website">
+    
+    <meta property="og:image" content="./assets/add.svg">
+    <meta property="og:title" content="Open Artwork Map">
+    <meta property="og:description" content="Easily add and edit geodata with OpenStreetMap">
+
+    <style>
+        #decoration-desktop img {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+    
+</head>
+<body>
+
+<div style="position: absolute; left: 1em; bottom: 1em; width:35vh; height:35vh;"
+     id="decoration-desktop">
+    <!-- A nice decoration while loading or on errors -->
+    <img src='./assets/themes/artwork/artwork.svg' width="100%" height="100%">
+</div>
+
+<div id="hidden-on-mobile">
+    <div id="messagesboxmobile">
+    </div>
+</div>
+
+<div id="topleft-tools">
+    <div id="userbadge-and-search">
+        <div id="userbadge" class="shadow">
+        </div>
+        <div id="searchbox" class="shadow"></div>
+    </div>
+    <div id="messagesbox"></div>
+    <br/>
+    <div id="help-button-mobile"></div>
+</div>
+
+<div id="filter__popup" class="filter__popup">
+    <div id="filter__selection"></div>
+</div>
+
+<div id="centermessage">Loading MapComplete, hang on...</div>
+<div id="top-right"></div>
+
+<div id="geolocate-button"></div>
+<div id="leafletDiv"></div>
+
+<script src="./index.ts"></script>
+<script src="./vendor/Leaflet.AccuratePosition.js"></script>
+
+<script data-goatcounter="https://pietervdvn.goatcounter.com/count"
+        async src="//gc.zgo.at/count.js"></script>
+
+</body>
+</html>

artworks.webmanifest

@@ -0,0 +1 @@
+{"name":"artworks","short_name":"Open Artwork Map","start_url":"/MapComplete/artworks.html","display":"standalone","background_color":"#fff","description":"","orientation":"portrait-primary, landscape-primary","icons":[{"src":"assets/generated/themes_artwork_artwork72.png","sizes":"72x72","type":"image/png"},{"src":"assets/generated/themes_artwork_artwork96.png","sizes":"96x96","type":"image/png"},{"src":"assets/generated/themes_artwork_artwork120.png","sizes":"120x120","type":"image/png"},{"src":"assets/generated/themes_artwork_artwork128.png","sizes":"128x128","type":"image/png"},{"src":"assets/generated/themes_artwork_artwork144.png","sizes":"144x144","type":"image/png"},{"src":"assets/generated/themes_artwork_artwork152.png","sizes":"152x152","type":"image/png"},{"src":"assets/generated/themes_artwork_artwork180.png","sizes":"180x180","type":"image/png"},{"src":"assets/generated/themes_artwork_artwork192.png","sizes":"192x192","type":"image/png"},{"src":"assets/generated/themes_artwork_artwork384.png","sizes":"384x384","type":"image/png"},{"src":"assets/generated/themes_artwork_artwork512.png","sizes":"512x512","type":"image/png"},{"src":"./assets/themes/artwork/artwork.svg","sizes":"513x513","type":"image/svg"}]}