app/assets/javascripts/maplibre/attribution.js

   1 OSM.MapLibre.AttributionControl = class extends maplibregl.AttributionControl {
   2   constructor({ includeReportLink, credit, ...options } = {}) {
   3     if (includeReportLink) {
   4       options.compact = false;
   5     }
   6     super(options);
   7     this._map = null;
   8     this._container = null;
   9     this._includeReportLink = Boolean(includeReportLink);
  10     this._credit = credit;
  11   }
  12
  13   _updateAttributions() {
  14     if (!this._map.style) return;
  15
  16     let attribHTML = "";
  17
  18     // Without the map being loaded, a user is unlikely to have good data-feedback
  19     if (this._includeReportLink && this._map.loaded()) {
  20       const reportLink = document.createElement("a");
  21       reportLink.href = "/fixthemap";
  22       reportLink.target = "_blank";
  23       reportLink.rel = "noopener noreferrer";
  24       reportLink.className = "maplibregl-ctrl-attrib-report-link";
  25       reportLink.textContent = OSM.i18n.t("javascripts.embed.report_problem");
  26       attribHTML += reportLink.outerHTML + " | ";
  27     }
  28
  29     const copyrightLink = document.createElement("a");
  30     copyrightLink.href = "/copyright";
  31     copyrightLink.textContent = OSM.i18n.t("javascripts.map.openstreetmap_contributors");
  32
  33     attribHTML += OSM.i18n.t("javascripts.map.copyright_text", {
  34       copyright_link: copyrightLink.outerHTML
  35     });
  36
  37     if (this._credit) {
  38       attribHTML += this._credit.donate ? " ♥️ " : ". ";
  39       attribHTML += this._buildCreditHtml(this._credit);
  40     }
  41
  42     attribHTML += ". ";
  43
  44     const termsLink = document.createElement("a");
  45     termsLink.href = "https://wiki.osmfoundation.org/wiki/Terms_of_Use";
  46     termsLink.target = "_blank";
  47     termsLink.rel = "noopener noreferrer";
  48     termsLink.textContent = OSM.i18n.t("javascripts.map.website_and_api_terms");
  49     attribHTML += termsLink.outerHTML;
  50
  51     // check if attribution string is different to minimize DOM changes
  52     if (attribHTML === this._attribHTML) return;
  53
  54     this._innerContainer.innerHTML = attribHTML;
  55     this._attribHTML = attribHTML;
  56     this._updateCompact();
  57
  58     // Update report link href after initial render
  59     if (this._includeReportLink) {
  60       this._updateReportLink();
  61     }
  62   }
  63
  64   _buildCreditHtml(credit) {
  65     const children = {};
  66     for (const childId in credit.children) {
  67       children[childId] = this._buildCreditHtml(credit.children[childId]);
  68     }
  69
  70     const text = OSM.i18n.t(`javascripts.map.${credit.id}`, children);
  71
  72     if (!credit.href) {
  73       return text;
  74     }
  75     const link = document.createElement("a");
  76     link.href = credit.href;
  77     link.textContent = text;
  78
  79     if (credit.donate) {
  80       link.className = "donate-attr";
  81     } else {
  82       link.target = "_blank";
  83       link.rel = "noopener noreferrer";
  84     }
  85
  86     return link.outerHTML;
  87   }
  88
  89   onAdd(map) {
  90     this._map = map;
  91
  92     if (this._includeReportLink) {
  93       map.once("load", this._updateAttributions.bind(this));
  94       map.on("moveend", this._updateReportLink.bind(this));
  95     }
  96
  97     return super.onAdd(map);
  98   }
  99
 100   onRemove() {
 101     if (!this._map) return;
 102
 103     if (this._includeReportLink) {
 104       this._map.off("moveend", this._updateReportLink.bind(this));
 105     }
 106     this._map = null;
 107     super.onRemove();
 108   }
 109
 110   _updateReportLink() {
 111     if (!this._container) return;
 112
 113     const reportLink = this._container.querySelector(".maplibregl-ctrl-attrib-report-link");
 114     if (!reportLink) return;
 115
 116     const center = this._map.getCenter();
 117     const params = new URLSearchParams({
 118       lat: center.lat.toFixed(5),
 119       lon: center.lng.toFixed(5),
 120       zoom: Math.floor(this._map.getZoom())
 121     });
 122     reportLink.href = `/fixthemap?${params.toString()}`;
 123   }
 124 };