Show message about how to support OSM after a successful save, closes #10054

for example in form of a donation

this can be disabled by setting an env variable (`ID_SHOW_DONATION_MESSAGE=false`)

the icon is from https://uxwing.com/charity-donation-hand-love-icon/

CHANGELOG.md

@@ -56,6 +56,7 @@ _Breaking developer changes, which may affect downstream projects or sites that
 #### :earth_asia: Localization
 #### :hourglass: Performance
 #### :mortar_board: Walkthrough / Help
+* Show message about how to support OSM (e.g. in form of a donation) after a successful save ([#10054])
 #### :rocket: Presets
 * Don't consider traffic_calming features as areas ([id-tagging-schema#1076])
 * Add rendering style for roller coaster tracks and supports ([#9891], thanks [@mangerlahn])
@@ -69,6 +70,7 @@ _Breaking developer changes, which may affect downstream projects or sites that
 [#9891]: https://github.com/openstreetmap/iD/pull/9891
 [#9983]: https://github.com/openstreetmap/iD/issues/9983
 [#9992]: https://github.com/openstreetmap/iD/issues/9992
+[#10054]: https://github.com/openstreetmap/iD/issues/10054
 [#10062]: https://github.com/openstreetmap/iD/pull/10062
 [#10066]: https://github.com/openstreetmap/iD/pull/10066
 [#10074]: https://github.com/openstreetmap/iD/issues/10074

config/envs.mjs

@@ -16,6 +16,8 @@ const envs = {
 
   ENV__ID_TAGINFO_API_URL: JSON.stringify(process.env.ENV__ID_TAGINFO_API_URL || null),
   ENV__ID_NOMINATIM_API_URL: JSON.stringify(process.env.ENV__ID_NOMINATIM_API_URL || null),
+
+  ENV__ID_SHOW_DONATION_MESSAGE: JSON.stringify(process.env.ENV__ID_SHOW_DONATION_MESSAGE || null),
 };
 
 export default envs;

config/id.js

@@ -53,6 +53,9 @@ const taginfoApiUrl = ENV__ID_TAGINFO_API_URL
 const nominatimApiUrl = ENV__ID_NOMINATIM_API_URL
   || 'https://nominatim.openstreetmap.org/';
 
+// support/donation message on upload success screen
+const showDonationMessage = ENV__ID_SHOW_DONATION_MESSAGE !== 'false';
+
 export {
   presetsCdnUrl,
   ociCdnUrl,
@@ -61,4 +64,5 @@ export {
   osmApiConnections,
   taginfoApiUrl,
   nominatimApiUrl,
+  showDonationMessage
 };

css/80_app.css

@@ -5078,10 +5078,12 @@ img.tile-debug {
 }
 
 .save-summary,
+.save-supporting,
 .save-communityLinks {
     padding: 0px 20px 15px 20px;
 }
 
+.save-supporting,
 .save-communityLinks {
     border-top: 1px solid #ccc;
 }
@@ -5113,6 +5115,7 @@ img.tile-debug {
 }
 
 .summary-view-on-osm,
+.support-the-map,
 .community-name {
     font-size: 14px;
     font-weight: bold;

data/core.yaml

@@ -1034,6 +1034,12 @@ en:
     help_link_url: "https://wiki.openstreetmap.org/wiki/FAQ#I_have_just_made_some_changes_to_the_map._How_do_I_get_to_see_my_changes.3F"
     view_on_osm: "View Changes on OSM"
     changeset_id: "Your changeset #: {changeset_id}"
+    supporting:
+      title: "OpenStreetMap is free to use, but not free to run"
+      details: "Its stability, quality, independence, and strength depend on donations from people like you."
+      donation:
+        title: "Support the map"
+        details: "Any donation will go directly towards keeping OpenStreetMap running."
     like_osm: "Like OpenStreetMap? Connect with others:"
     more: More
     events: Events

modules/ui/success.js

@@ -3,6 +3,8 @@ import { select as d3_select } from 'd3-selection';
 
 import { resolveStrings } from 'osm-community-index';
 
+import { showDonationMessage } from '../../config/id.js';
+
 import { fileFetcher } from '../core/file_fetcher';
 import { locationManager } from '../core/LocationManager';
 import { t, localizer } from '../core/localizer';
@@ -155,6 +157,55 @@ export function uiSuccess(context) {
         changeset_id: { html: `<a href="${changesetURL}" target="_blank">${_changeset.id}</a>` }
       }));
 
+    if (showDonationMessage !== false) {
+      // support ask
+      const donationUrl = 'https://supporting.openstreetmap.org/';
+      let supporting = body
+        .append('div')
+        .attr('class', 'save-supporting');
+
+      supporting
+        .append('h3')
+        .call(t.append('success.supporting.title'));
+
+      supporting
+        .append('p')
+        .call(t.append('success.supporting.details'));
+
+      table = supporting
+        .append('table')
+        .attr('class', 'supporting-table');
+
+      row = table
+        .append('tr')
+        .attr('class', 'supporting-row');
+
+      row
+        .append('td')
+        .attr('class', 'cell-icon supporting-icon')
+        .append('a')
+        .attr('target', '_blank')
+        .attr('href', donationUrl)
+        .append('svg')
+        .attr('class', 'logo-small')
+        .append('use')
+        .attr('xlink:href', '#iD-donation');
+
+      let supportingDetail = row
+        .append('td')
+        .attr('class', 'cell-detail supporting-detail');
+
+      supportingDetail
+        .append('a')
+        .attr('class', 'cell-detail support-the-map')
+        .attr('target', '_blank')
+        .attr('href', donationUrl)
+        .call(t.append('success.supporting.donation.title'));
+
+      supportingDetail
+        .append('div')
+        .call(t.append('success.supporting.donation.details'));
+    }
 
     // Get OSM community index features intersecting the map..
     ensureOSMCommunityIndex()

svg/iD-sprite/graphics/donation.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="122.88" height="102.36" viewBox="0 0 122.88 102.36" ><g><path d="M29.83,89.55V52.63h16.61c7.04,1.26,14.08,5.08,21.12,9.51h12.9c5.84,0.35,8.9,6.27,3.22,10.16 c-4.52,3.32-10.49,3.13-16.61,2.58c-4.22-0.21-4.4,5.46,0,5.48c1.53,0.12,3.19-0.24,4.64-0.24c7.64-0.01,13.92-1.47,17.77-7.5 l1.93-4.51l19.19-9.51c9.6-3.16,16.42,6.88,9.35,13.87c-13.9,10.11-28.15,18.43-42.73,25.15c-10.59,6.44-21.18,6.22-31.76,0 L29.83,89.55L29.83,89.55z M76.08,7.8c3.63-3.79,6.17-7.06,11.77-7.7c10.5-1.21,20.16,9.55,14.86,20.14 c-1.51,3.02-4.58,6.6-7.98,10.12c-3.73,3.86-7.86,7.65-10.76,10.52l-7.89,7.83l-6.52-6.28c-7.84-7.55-20.63-17.06-21.05-28.84 c-0.3-8.25,6.22-13.54,13.7-13.44C68.91,0.23,71.72,3.56,76.08,7.8L76.08,7.8L76.08,7.8z M0,49.08h24.83v44.18H0V49.08L0,49.08z" fill="currentColor"/></g></svg>