Add small display of OSM-contributors who added data previously

InitUiElements.ts

@@ -37,6 +37,8 @@ import SelectedFeatureHandler from "./Logic/Actors/SelectedFeatureHandler";
 import LZString from "lz-string";
 import {LayoutConfigJson} from "./Customizations/JSON/LayoutConfigJson";
 import AttributionPanel from "./UI/BigComponents/AttributionPanel";
+import ContributorCount from "./Logic/ContributorCount";
+import FeatureSource from "./Logic/FeatureSource/FeatureSource";
 
 export class InitUiElements {
 
@@ -270,12 +272,12 @@ export class InitUiElements {
         isOpened.setData(Hash.hash.data === undefined || Hash.hash.data === "" || Hash.hash.data == "welcome")
     }
 
-    private static InitLayerSelection() {
+    private static InitLayerSelection(featureSource: FeatureSource) {
 
         const copyrightNotice =
             new ScrollableFullScreen(
                 () => Translations.t.general.attribution.attributionTitle.Clone(),
-                () => new AttributionPanel(State.state.layoutToUse),
+                () => new AttributionPanel(State.state.layoutToUse, new ContributorCount(featureSource).Contributors),
                 "copyright"
             )
 
@@ -371,7 +373,7 @@ export class InitUiElements {
 
     }
 
-    private static InitLayers() {
+    private static InitLayers() : FeatureSource{
 
 
         const state = State.state;
@@ -409,15 +411,15 @@ export class InitUiElements {
 
         const selectedFeatureHandler = new SelectedFeatureHandler(Hash.hash, State.state.selectedElement, source, State.state.osmApiFeatureSource);
         selectedFeatureHandler.zoomToSelectedFeature(State.state.locationControl);
-
+        return source;
     }
 
     private static setupAllLayerElements() {
 
         // ------------- Setup the layers -------------------------------
 
-        InitUiElements.InitLayers();
+       const source =  InitUiElements.InitLayers();
-        InitUiElements.InitLayerSelection();
+        InitUiElements.InitLayerSelection(source);
 
 
         // ------------------ Setup various other UI elements ------------

UI/BigComponents/AttributionPanel.ts

@@ -9,6 +9,7 @@ import * as licenses from "../../assets/generated/license_info.json"
 import SmallLicense from "../../Models/smallLicense";
 import {Utils} from "../../Utils";
 import Link from "../Base/Link";
+import {VariableUiElement} from "../Base/VariableUIElement";
 
 /**
  * The attribution panel shown on mobile
@@ -17,20 +18,51 @@ export default class AttributionPanel extends Combine {
 
     private static LicenseObject = AttributionPanel.GenerateLicenses();
 
-    constructor(layoutToUse: UIEventSource<LayoutConfig>) {
+    constructor(layoutToUse: UIEventSource<LayoutConfig>, contributions: UIEventSource<Map<string, number>>) {
         super([
             Translations.t.general.attribution.attributionContent,
-
             ((layoutToUse.data.maintainer ?? "") == "") ? "" : Translations.t.general.attribution.themeBy.Subs({author: layoutToUse.data.maintainer}),
-            layoutToUse.data.credits ,
+            layoutToUse.data.credits,
             "<br/>",
             new Attribution(undefined, undefined, State.state.layoutToUse, undefined),
             "<br/>",
-            "<h3>",Translations.t.general.attribution.iconAttribution.title.Clone().SetClass("pt-6 pb-3"),"</h3>",
+
+            new VariableUiElement(contributions.map(contributions => {
+                const sorted = Array.from(contributions, ([name, value]) => ({name, value}));
+                if (sorted.length === 0) {
+                    return "";
+                }
+                sorted.sort((a, b) => b.value - a.value);
+                let hiddenCount = 0;
+                if (sorted.length > 10) {
+                    hiddenCount = sorted.length - 10
+                    sorted.splice(10, sorted.length - 10)
+                }
+                const links = sorted.map(kv => `<a href="https://openstreetmap.org/user/${kv.name}" target="_blank">${kv.name}</a>`)
+                const contribs = links.join(", ")
+
+                if (hiddenCount == 0) {
+
+
+                    return Translations.t.general.attribution.mapContributionsBy.Subs({
+                        contributors: contribs
+                    }).InnerRender()
+                } else {
+                    return Translations.t.general.attribution.mapContributionsByAndHidden.Subs({
+                        contributors: contribs,
+                        hiddenCount: hiddenCount
+                    }).InnerRender();
+                }
+
+
+            })),
+            "<br/>",
+            "<h3>", Translations.t.general.attribution.iconAttribution.title.Clone().SetClass("pt-6 pb-3"), "</h3>",
             ...Utils.NoNull(Array.from(layoutToUse.data.ExtractImages()))
                 .map(AttributionPanel.IconAttribution)
         ]);
         this.SetClass("flex flex-col link-underline")
+        this.SetStyle("max-width: calc(100vw - 5em); width: 40em;")
     }
 
     private static IconAttribution(iconPath: string) {
@@ -42,28 +74,28 @@ export default class AttributionPanel extends Combine {
         if (license == undefined) {
             return undefined;
         }
-        if(license.license.indexOf("trivial")>=0){
+        if (license.license.indexOf("trivial") >= 0) {
             return undefined;
         }
 
-        const sources =Utils.NoNull(Utils.NoEmpty(license.sources))
+        const sources = Utils.NoNull(Utils.NoEmpty(license.sources))
-       
+
         return new Combine([
             `<img src='${iconPath}' style="width: 50px; height: 50px; margin-right: 0.5em;">`,
             new Combine([
                 new FixedUiElement(license.authors.join("; ")).SetClass("font-bold"),
-                new Combine([license.license, 
+                new Combine([license.license,
-                    sources.length > 0 ? " - " : "", 
+                        sources.length > 0 ? " - " : "",
-                    ... sources.map(lnk => {
+                        ...sources.map(lnk => {
-                        let sourceLinkContent = lnk;
+                            let sourceLinkContent = lnk;
-                        try{
+                            try {
-                            sourceLinkContent =   new URL(lnk).hostname
+                                sourceLinkContent = new URL(lnk).hostname
-                        }catch{
+                            } catch {
-                            console.error("Not a valid URL:", lnk)
+                                console.error("Not a valid URL:", lnk)
-                        }
+                            }
-                        return new Link(sourceLinkContent, lnk, true);
+                            return new Link(sourceLinkContent, lnk, true);
-                    })
+                        })
-                ]
+                    ]
                 ).SetClass("block")
             ]).SetClass("flex flex-col")
         ]).SetClass("flex")