Add support for stylized attribution text for static images (#1005)

* add support for stylized attribution text for static images

* restrict to static opt_mode

* adjust sizes

* chore: fix lint

Signed-off-by: Craig Kochis <cjkochis@gmail.com>

* chore: rename to staticAttributionText

Signed-off-by: Craig Kochis <cjkochis@gmail.com>

* chore: update docs

Signed-off-by: Craig Kochis <cjkochis@gmail.com>

* chore: add staticAttributionText to example config, and run lint

Signed-off-by: Craig Kochis <cjkochis@gmail.com>

---------

Signed-off-by: Craig Kochis <cjkochis@gmail.com>

docs/config.rst

@@ -33,6 +33,7 @@ Example:
       "serveAllStyles": false,
       "serveStaticMaps": true,
       "allowRemoteMarkerIcons": true,
+      "staticAttributionText": "© OpenMapTiles  © OpenStreetMaps",
       "tileMargin": 0
     },
     "styles": {
@@ -140,7 +141,13 @@ It is recommended to also use the ``serveAllFonts`` option when using this optio
 -----------
 
 Optional string to be rendered into the raster tiles (and static maps) as watermark (bottom-left corner).
-Can be used for hard-coding attributions etc. (can also be specified per-style).
+Not used by default.
+
+``staticAttributionText``
+-----------
+
+Optional string to be rendered in the static images endpoint. Text will be rendered in the bottom-right corner,
+and styled similar to attribution on web-based maps (text only, links not supported).
 Not used by default.
 
 ``allowRemoteMarkerIcons``

src/serve_rendered.js

@@ -771,6 +771,35 @@ export const serve_rendered = {
             composite_array.push({ input: canvas.toBuffer() });
           }
 
+          if (opt_mode === 'static' && item.staticAttributionText) {
+            const canvas = createCanvas(scale * width, scale * height);
+            const ctx = canvas.getContext('2d');
+            ctx.scale(scale, scale);
+
+            ctx.font = '10px sans-serif';
+            const text = item.staticAttributionText;
+            const textMetrics = ctx.measureText(text);
+            const textWidth = textMetrics.width;
+            const textHeight = 14;
+
+            const padding = 6;
+            ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+            ctx.fillRect(
+              width - textWidth - padding,
+              height - textHeight - padding,
+              textWidth + padding,
+              textHeight + padding,
+            );
+            ctx.fillStyle = 'rgba(0,0,0,.8)';
+            ctx.fillText(
+              item.staticAttributionText,
+              width - textWidth - padding / 2,
+              height - textHeight + 8,
+            );
+
+            composite_array.push({ input: canvas.toBuffer() });
+          }
+
           if (composite_array.length > 0) {
             image.composite(composite_array);
           }
@@ -1378,6 +1407,8 @@ export const serve_rendered = {
       dataProjWGStoInternalWGS: null,
       lastModified: new Date().toUTCString(),
       watermark: params.watermark || options.watermark,
+      staticAttributionText:
+        params.staticAttributionText || options.staticAttributionText,
     };
     repo[id] = repoobj;