Support different icon sets

[bhousel]

One actionable thing we can do to get ready for #3024 would be to support icon namespacing in the presets.

For example, we currently do:

{
    "icon": "bicycle",
    ...
    "tags": {"shop": "bicycle"},
    "name": "Bicycle Shop"
}

And we use a little bit of magic to know that bicycle is a Maki icon, and not one found in the iD spritesheet.

We should namespace this string to:

1. eliminate magic "is it maki or not" code
2. support both maki1 and maki2
3. open up the possibility for people with custom presets to use other iconsets:

    "icon": "maki1:bicycle"
    "icon": "maki2:bicycle"
    "icon": "fontawesome:bicycle"

[kepta]

I was thinking about working on this issue.
This is what I understand as of now,
We change all the icons which we get from maki to "x" => "maki1:x",
and then in the file,
id/ui/preset_icon.js:12

  icon = p.icon || (geom === 'line' ? 'other-line' : 'marker-stroked'),

we do some logic to determine whether it is coming from maki1, maki2 or fontawesome.
Is my understanding correct ?

[bhousel]

@kepta, it's more complicated than that.. I started to list out the places in code we would need to change, but it got to be quite a lot of things, and I'm still not sure myself if what I am thinking is the best way to support this. I need to think about it for a few days to decide if it's even worth doing.

Key challenges to supporting multiple icon sets are:

• code in defs.js needs to namespace all of the svg id's to avoid DOM conflicts.
• different icon sets support different icon resolutions.. e.g. maki1 is -12, -18, -24, maki2 is -11, -15
• changes in preset_icon.js, labels.js, etc..
• do this in a way to support splitting out the presets into separate projects per Move presets / data into a separate repository #2656

Also forget what I said about fontawesome - it's really a webfont, not a svg icon set. But I do hope more designers move towards offering svg icon sets now that GitHub has done it. Even if an icon repository has the svg source files in it, we could package them up ourselves into a sprite the way we already do with maki.

Update on above: I didn't search well enough before, but somebody already made a repository with automated extract of the svg and png for all the fontawesome glyphs. It's no surprise that something this useful exists already..

[bhousel]

For now let's just support maki2 and we will revisit later the idea of supporting multiple spritesheets if an iD fork project needs this.

[bhousel]

This is happening anyway for the cleanups for #3924
I've split the internal iD poi icons out into a new library: https://github.com/bhousel/temaki

[bhousel]

iD supports several icon sets now!

You can use any of the following open source map icon sets as preset icons.

• Maki - prefix: maki-
• Temaki - prefix: temaki-
• Font Awesome (free, solid) - prefix: fas-
• Font Awesome (free, regular) - prefix: far-
• Font Awesome (free, brands) - prefix: fab-

When specifying an icon, use the prefixed version of the name, for example "icon": "maki-park".