Document where to find icons for presets and how to add them

[tordans]

For #267 I am trying to understand …

• Where do the icons come from? (Source/Overview/Usage)
• How can I add new icons? (Process)

---

Here is what I found until now…

• I could not find any documentation in this repo.
• I could not find any documentation in the
• There is Don't reuse preset icons so much #41, which talks about icons most, but does not help solve the questions
• There is Icons ideditor/schema-builder#4 which hints that the Icons are part of iD
  • Which lead me to https://github.com/openstreetmap/iD/search?l=SVG&q=icon, which is a list of fontawesome icons and I checked and found one of the icons from here, there.
  • => How does it work with the other icons?
• There is https://github.com/ideditor/temaki => Which I assume would be the best place to contribute icons to?
• There is https://github.com/mapbox/maki

---

Some statistics:

• maki- found 930 times in this repo, 233 unique icons
• temaki- found 1190 times in this repo, 522 unique icons
• id- found 146 times in this repo, 38 unique icons
• fas- found 437 times in this repo, 231 unique icons
• <noprefix> found 16 times in this repo, 7 unique icons

---

Where do I find which icons?

• maki- – https://github.com/mapbox/maki
• temaki- – https://github.com/ideditor/temaki
• id- – => ?
• fas- – https://github.com/openstreetmap/iD/tree/develop/svg/fontawesome, which is pulled from https://github.com/openstreetmap/iD/blob/develop/scripts/build_data.js#L11-L16
• <noprefix> – => ?

[tyrasd]

the id- icons should be the ones found here: https://github.com/openstreetmap/iD/tree/develop/svg/iD-sprite/presets

The non-prefixed ones are only shown on fields, which is a bit strange: While the schema apparently allows for an "icon" property, it is not documented and AFAIK it is also not used anywhere. 🤷 My best guess would be that an early prototype of iD once had support for icons of fields (or there were plans for such a thing), but it was dropped at some point (or never implemented). Anyway these unused icons can point to non-existing icons and nobody would notice. I've opened ideditor/schema-builder#30 to clarify this.

[tyrasd]

Where do the icons come from? (Source/Overview/Usage)

As you already found out, from the various places linked above.

How can I add new icons? (Process)

As of now, new icons should probably go into temaki (since maki and fontawesome can be considered "out of scope" third party sources for most new icons we would need). I just don't know how actively @bhousel currently maintains that project (I don't have access to it).

Ideally, ideditor/schema-builder#4 should eventually be resolved somehow. Not only because the current solution is a bit "confusing", but also because it doesn't work when new versions of the tagging schema are to be released when they reference icons which are not yet included in the deployed release (and forks) of iD.

[bhousel]

My best guess would be that an early prototype of iD once had support for icons of fields (or there were plans for such a thing), but it was dropped at some point (or never implemented).

Yes the original "extra" fields were represented by icons before being replaced with the more fields dropdown.
openstreetmap/iD#2365
openstreetmap/iD#2433

[tordans]

Another thing I learned:

There is also the imageURL key in the Schema (Code, Readme).

The URL of a remote image file. This does not fully replace icon—both may be shown in the UI.

However, that is not used in this repo, but only the NSI Code.

I added it to my PR at https://github.com/openstreetmap/id-tagging-schema/pull/345/files#diff-def303ad241ab6b78f19dd3b30e8c84ab3f13f53b16c0193d66a58eb5477f2fbR6 but I am not sure we would want that (the PR will find out :-)).

[matkoniecz]

@tordans Do you have whatever script was used to calculate "Some statistics:"?

Which icons are without prefix?

[tyrasd]

script to calculate "Some statistics:"

I just used this javascript

var presets = require("./dist/presets.json");
var fields = require("./dist/fields.json");
var categories = require("./dist/preset_categories.json");
var allIcons = Object.values(presets).map(d => d.icon).filter(Boolean).concat(
    Object.values(fields).map(d => d.icons).filter(Boolean).flatMap(Object.values)).concat(
    Object.values(categories).map(d => d.icon).filter(Boolean));
var prefixes = allIcons.map(i => i.substr(0, i.indexOf('-')));
var frequencies = prefixes.reduce((acc, cur) => { acc[cur] = (acc[cur] || 0) + 1; return acc; },  {});
Object.keys(frequencies).forEach(prefix => console.log(`icon set ${prefix}: count = ${frequencies[prefix]}, # unique icons = ${allIcons.filter(i => i.startsWith(prefix)).reduce((acc, cur) => acc.add(cur), new Set()).size}`));

to get to the following results:

icon set	count	number of unique icons
fas	257	171
temaki	633	368
maki	562	149
iD	90	49
roentgen	65	62
far	2	2

Not sure why there's such a big difference to the numbers by @tordans (I think the totals could be off because of double-counting the data in the dist folder, but the number unique icons should actually still match, but don't) 🤔

Which icons are without prefix?

These have all been removed in 4df0dd3

[tordans]

Not sure why there's such a big difference to the numbers by @tordans

Don't know what I did back then anymore. Likely some global search with "select all occurences of …", deduplication and line counts. But it's not that important, I guess — Its great to have some docs now, thank.

---

And while I am here … an update to #314 (comment)

I added it to my PR at https://github.com/openstreetmap/id-tagging-schema/pull/345/files#diff-def303ad241ab6b78f19dd3b30e8c84ab3f13f53b16c0193d66a58eb5477f2fbR6 but I am not sure we would want that (the PR will find out :-)).

The new preview https://pr-345--ideditor-presets-preview.netlify.app/id/dist/#background=Bing&disable_features=boundaries&id=w59463482&locale=en&map=16.39/53.68949/13.23793 shows that the icon does show up just fine.

So as part of that PR, we should think about how to handle external images (copy them as part of the build? include them externally and update the privacy statement with an allow list of domains? and so on…).

[tyrasd]

how to handle external images

let's continue that discussion in #856

[tiptoptom]

So for now the way to go is to look for a temaki icon?

[tordans]

So for now the way to go is to look for a temaki icon?

No, there are more icons sets. There is documentation on this now at
https://github.com/ideditor/schema-builder/blob/main/ICONS.md#icons (which is also linked from https://github.com/openstreetmap/id-tagging-schema/blob/main/CONTRIBUTING.md#icons).