Add support for multiple custom background layers by tordans · Pull Request #12703 · openstreetmap/iD

tordans · 2026-08-08T16:16:08Z

Summary

Save and switch between multiple custom backgrounds (add, rename, edit URL, delete)
Optional display names; when omitted, the list shows a cleaned host/path instead of the full template
#background=custom:<url> adds/selects a layer
Some other related changes (called out below)

Test plan

Open Backgrounds → add two customs, rename one, edit a URL, delete one
Confirm the selected layer updates the hash as background=custom:<url>
Reload with a saved custom still selected
Confirm URL add custom layer https://pr-12703--ideditor.netlify.app/#disable_features=boundaries&map=20.00/52.48194/13.45328&background=custom:https://mapproxy.codefor.de/tiles/1.0.0/alkis_30/mercator/{z}/{x}/{y}.png&locale=en&maproulette=true&id=n1650938353

More URL to test in Berlin: https://github.com/codeforberlin/mapproxy-config/tree/master/demo_links

https://mapproxy.codefor.de/tiles/1.0.0/baumbestand_0_1_3_4_merged/mercator/{z}/{x}/{y}.png
https://mapproxy.codefor.de/tiles/1.0.0/atkis_dom/mercator/{z}/{x}/{y}.png

🤖 Made with Cursor

Arrow handlers broke `this`, so shade clicks never matched the backdrop element and outside-click close did nothing. Co-authored-by: Cursor <cursoragent@cursor.com>

Use the area annotation string for the convert-to-area quick fix. Co-authored-by: Cursor <cursoragent@cursor.com>

The active list/text toggle does nothing when clicked again, so a hand cursor is misleading. Co-authored-by: Cursor <cursoragent@cursor.com>

Generalize the heading-line icon button classes so other disclosures can reuse the same chrome without a second CSS path. Co-authored-by: Cursor <cursoragent@cursor.com>

The star is informational (tooltip only), so show the question cursor instead of a text I-beam. Co-authored-by: Cursor <cursoragent@cursor.com>

Co-authored-by: Cursor <cursoragent@cursor.com>

Replaces the single custom background with a saved list: add/edit/delete rows, optional names, cleaned URL templates, collapsible WMS/TMS help, and `#background=custom:<url>` / legacy `#background=custom` hash support. Co-authored-by: Cursor <cursoragent@cursor.com>

Co-authored-by: Cursor <cursoragent@cursor.com>

Place add/view controls in the summary and hide them with :not(:open), removing the negative-margin layout hack. Co-authored-by: Cursor <cursoragent@cursor.com>

Reuse the shared 200px tooltip width; scrollContainer and word-break already keep long URLs inside the pane. Co-authored-by: Cursor <cursoragent@cursor.com>

Keep this PR focused on custom backgrounds; leave that validation string bug for a separate fix. Co-authored-by: Cursor <cursoragent@cursor.com>

The optional label is enough; an example string is unnecessary. Co-authored-by: Cursor <cursoragent@cursor.com>

Avoid a noise-only const/let rewrite in the PR diff. Co-authored-by: Cursor <cursoragent@cursor.com>

TypeScript can type reads as string|null and writes as boolean, so callers no longer need a local cast. Co-authored-by: Cursor <cursoragent@cursor.com>

Run template + last-used migration only when needed, clear the old key, and stop writing an empty list on fresh installs. Co-authored-by: Cursor <cursoragent@cursor.com>

Drop the global hyphenation rules and stop wiring scrollContainer onto ordinary background-list tooltips. Co-authored-by: Cursor <cursoragent@cursor.com>

Pass the entry via d3 selection.call instead of a forEntry helper, and drop unnecessary type casts. Co-authored-by: Cursor <cursoragent@cursor.com>

Type uiModal/uiConfirm and utilNoAuto at the source so the settings modal no longer needs as-any workarounds. Co-authored-by: Cursor <cursoragent@cursor.com>

Co-authored-by: Cursor <cursoragent@cursor.com>

Drop the thin setPref/getPref wrappers now that prefs is typed. Co-authored-by: Cursor <cursoragent@cursor.com>

Co-authored-by: Cursor <cursoragent@cursor.com>

tordans

~~Working on some cleanup.~~

tordans · 2026-08-08T19:01:22Z

    padding: 5px;
    flex: 0 0 auto;
    align-self: center;
+    cursor: help;


Unrelated change to the backgrounds. But i notices a text select cursor on the star which is weird given the star is only there as an info indicator and to show the tooltip.

Apply selected/hover/active styles to label and button cells so custom edit controls don't need a background-pane override. Co-authored-by: Cursor <cursoragent@cursor.com>

Put the example URL under the template field, drop the help-icon column, and fix extra gaps from inline textarea baseline and disclosure line-height. Co-authored-by: Cursor <cursoragent@cursor.com>

tordans · 2026-08-08T20:00:59Z

+        annotation: Converted an area to a line.
      convert_to_area:
        title: Convert this to an area
-        annotation: Converted an area to a line.
+        annotation: Converted a line to an area.


I removed this from this PR in c92f9c2
But Cursor things we should address this in a separate Bugfix.
I did not look into it more, yet.

Wrong undo annotation for “Convert this to an area”

Bug: Applying the mismatched-geometry fix “Convert this to an area” records the history/undo annotation for converting to a line.

Why it’s wrong: The fix adds area=yes (line → area), but closedAreaToLineDynamicFixes passes t('issues.fix.convert_to_line.annotation'). On top of that, issues.fix.convert_to_area.annotation in core.yaml is itself the line string (“Converted an area to a line.”), and convert_to_line has no annotation of its own.

Fix:

Give each action its own string: line → “Converted an area to a line.” / area → “Converted a line to an area.”

Use issues.fix.convert_to_area.annotation in the convert-to-area quick fix.

tordans

LGTM now.

tordans · 2026-08-08T20:02:52Z

+    /* already the active view — no further action, so not a pointer */
+    cursor: default;


Unrelated change to the background layer but I noticed this.

tags-cursor-states.mov

tordans · 2026-08-08T20:04:02Z


  if (!blocking) {
-    shaded.on('click.remove-modal', (d3_event) => {
+    shaded.on('click.remove-modal', function(d3_event) {


non-arrow: this must be the shaded element (target === shade, not modal)

tordans · 2026-08-08T20:07:36Z

Some Screenshots

edit / new modal
help in edit modal
delete modal
hover (now a bit more narrow)

tordans and others added 7 commits August 8, 2026 18:14

Fix modal dismiss when clicking the shaded backdrop

32df287

Arrow handlers broke `this`, so shade clicks never matched the backdrop element and outside-click close did nothing. Co-authored-by: Cursor <cursoragent@cursor.com>

Fix convert-to-area validation fix annotation

9ce676c

Use the area annotation string for the convert-to-area quick fix. Co-authored-by: Cursor <cursoragent@cursor.com>

Use default cursor on the selected raw-tag view button

c26ec47

The active list/text toggle does nothing when clicked again, so a hand cursor is misleading. Co-authored-by: Cursor <cursoragent@cursor.com>

Rename raw-tag-option to disclosure-header-option

ba90a0a

Generalize the heading-line icon button classes so other disclosures can reuse the same chrome without a second CSS path. Co-authored-by: Cursor <cursoragent@cursor.com>

Use help cursor on the best-imagery star

83f2868

The star is informational (tooltip only), so show the question cursor instead of a text I-beam. Co-authored-by: Cursor <cursoragent@cursor.com>

Improve wrapping of long unbroken strings in tooltips

9c0d524

Co-authored-by: Cursor <cursoragent@cursor.com>

github-actions Bot deployed to pr-preview-12703 August 8, 2026 16:18 View deployment

Remove undocumented bare #background=custom hash handling

894d561

Co-authored-by: Cursor <cursoragent@cursor.com>

github-actions Bot deployed to pr-preview-12703 August 8, 2026 18:58 View deployment

tordans and others added 13 commits August 8, 2026 21:07

Render disclosure header options in the summary row

b8c3593

Place add/view controls in the summary and hide them with :not(:open), removing the negative-margin layout hack. Co-authored-by: Cursor <cursoragent@cursor.com>

Drop special max-width for code tooltips in the map pane

552637c

Reuse the shared 200px tooltip width; scrollContainer and word-break already keep long URLs inside the pane. Co-authored-by: Cursor <cursoragent@cursor.com>

Revert unrelated convert-to-area annotation changes

c92f9c2

Keep this PR focused on custom backgrounds; leave that validation string bug for a separate fix. Co-authored-by: Cursor <cursoragent@cursor.com>

Remove placeholder from the custom background name field

840c5e4

The optional label is enough; an example string is unnecessary. Co-authored-by: Cursor <cursoragent@cursor.com>

Keep original var style in unchanged Custom.imageryUsed code

60162e3

Avoid a noise-only const/let rewrite in the PR diff. Co-authored-by: Cursor <cursoragent@cursor.com>

Document prefs get/set return types with JSDoc overloads

bc574f3

TypeScript can type reads as string|null and writes as boolean, so callers no longer need a local cast. Co-authored-by: Cursor <cursoragent@cursor.com>

Consolidate legacy custom-background migration into one path

c59f42f

Run template + last-used migration only when needed, clear the old key, and stop writing an empty list on fresh installs. Co-authored-by: Cursor <cursoragent@cursor.com>

Narrow tooltip changes to custom URL rows only

bda701a

Drop the global hyphenation rules and stop wiring scrollContainer onto ordinary background-list tooltips. Co-authored-by: Cursor <cursoragent@cursor.com>

Simplify custom background settings open API

a2a197c

Pass the entry via d3 selection.call instead of a forEntry helper, and drop unnecessary type casts. Co-authored-by: Cursor <cursoragent@cursor.com>

Remove type casts from custom background settings

05d08ac

Type uiModal/uiConfirm and utilNoAuto at the source so the settings modal no longer needs as-any workarounds. Co-authored-by: Cursor <cursoragent@cursor.com>

Remove explanatory comment from modal shade click handler

97ea75d

Co-authored-by: Cursor <cursoragent@cursor.com>

Call prefs directly in background custom tests

869b04f

Drop the thin setPref/getPref wrappers now that prefs is typed. Co-authored-by: Cursor <cursoragent@cursor.com>

Note that custom backgrounds from the URL are stored in localStorage

428338e

Co-authored-by: Cursor <cursoragent@cursor.com>

tordans commented Aug 8, 2026

View reviewed changes

tordans and others added 2 commits August 8, 2026 21:39

Highlight layer-list cells instead of whole rows

8e14db1

Apply selected/hover/active styles to label and button cells so custom edit controls don't need a background-pane override. Co-authored-by: Cursor <cursoragent@cursor.com>

Tighten custom background settings help layout and spacing

8f1f8d5

Put the example URL under the template field, drop the help-icon column, and fix extra gaps from inline textarea baseline and disclosure line-height. Co-authored-by: Cursor <cursoragent@cursor.com>

tordans commented Aug 8, 2026

View reviewed changes

github-actions Bot deployed to pr-preview-12703 August 8, 2026 20:04 View deployment

tordans commented Aug 8, 2026

View reviewed changes

tordans marked this pull request as ready for review August 8, 2026 20:04

tordans mentioned this pull request Aug 9, 2026

Support multiple saved custom background layers tordans/iD#5

Closed

6 tasks

Navigation Menu

Uh oh!

Add support for multiple custom background layers - #12703

Add support for multiple custom background layers#12703
tordans wants to merge 23 commits into
openstreetmap:developfrom
tordans:multiple-custom-backgrounds

tordans commented Aug 8, 2026 •

edited

Loading

Uh oh!

tordans left a comment •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tordans Aug 8, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tordans Aug 8, 2026

Uh oh!

tordans left a comment

Uh oh!

tordans Aug 8, 2026

Uh oh!

tordans Aug 8, 2026

Uh oh!

tordans commented Aug 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

		/* already the active view — no further action, so not a pointer */
		cursor: default;

Uh oh!

Conversation

tordans commented Aug 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Uh oh!

tordans left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tordans Aug 8, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tordans Aug 8, 2026

Choose a reason for hiding this comment

Wrong undo annotation for “Convert this to an area”

Uh oh!

tordans left a comment

Choose a reason for hiding this comment

Uh oh!

tordans Aug 8, 2026

Choose a reason for hiding this comment

Uh oh!

tordans Aug 8, 2026

Choose a reason for hiding this comment

Uh oh!

tordans commented Aug 8, 2026

Some Screenshots

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

tordans commented Aug 8, 2026 •

edited

Loading

tordans left a comment •

edited

Loading