OpenStreetBrowser/doc/Icons.md

#### Unicode Icons
Unicode defines many icons which can be used either directly or via their HTML codes, e.g.:
```html
🎂 🎂 🎂
```

A drawback of Unicode icons is, that the display will differ from system to system as they depend on the available Fonts.

#### Self defined icons
You may upload images to your repository and use them via a relative image link:
```html
<img data-src='img/foobar.svg'>
```

This will include the image from your repository (when uploaded to your 'img' directory).

#### Font Awesome Icons
[Font Awesome 5 Free](https://fontawesome.com/) is included in OpenStreetBrowser, therefore you can use, e.g.:
```html
<i class="fas fa-compass"></i> <!-- solid -->
<i class="far fa-compass"></i> <!-- regular -->
```

You can use normal CSS to modify its look, e.g.
```html
<i style="color: red;" class="fas fa-compass" aria-hidden="true"></i>
```

#### Mapbox Maki Icons
[Mapbox Maki Icons 5](https://www.mapbox.com/maki-icons/) are also included in OpenStreetBrowser. They can be accessed as images with protocol 'maki', e.g.:
```html
<img data-src="maki:park">
```

This will include the park-15.svg icon. Mapbox Maki icons come in two sizes: 11 and 15. Default is 15, if you want to use 11 pass the size parameter with value 11:
```html
<img data-src="maki:park?size=11">
```

You can pass URL options to the icon to modify its look. Note that every icon is a [SVG path](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) and all [style options](https://developer.mozilla.org/de/docs/Web/SVG/Tutorial/Fills_and_Strokes) are available:
```html
<img data-src="maki:park?size=11&amp;fill=red&amp;stroke=black&amp;stroke-width=0.5">
```

#### Temaki Icons
[Temaki icons](https://ideditor.github.io/temaki/docs/) are additions to the Mapbox Maki Icons with the difference that they only exist in to size of 15px.
```html
<img data-src="temaki:shinto">
<img data-src="temaki:shinto?fill=red">
```

#### Markers
Simple syntax (example: a black line):
```html
<img data-src="marker:line?width=3&amp;color=black">
{{ markerLine({ width: 3, color: 'black' }) }}
```

The following marker types are available: line, polygon (a rectangle), circle, pointer

The following style parameters are possible:
* `color`: outline color, default `#000000`.
* `width`: outline width, default `3`.
* `offset`: outline offset, default `0`.
* `fillColor`: color of the fill, default value of `color`. If no `color` is set, use `#f2756a`.
* `fillOpacity`: opacity of the fill, default `0.2`.
* `dashArray`: outline dashes, e.g. `5,5'. Default: `none`.
* `dashOffset`: offset of outline dashes. Default: `0`.

Syntax with multiple symbols (example: a white line with a black casing). Only styles which are listed in the `styles` parameter will be used. Instead of `style:default:width` use `style:width`:
```html
<img data-src="marker:line?styles=casing,default&amp;style:width=2&amp;style:color=white&amp;style:casing:width=4&amp;style:casing:color=black">
{{ markerLine({ styles: 'casing,default', 'style:casing': { color: 'black', width: 4 }, default: { color: 'black', width: 2 }}) }}
```

You can use the `evaluate` function, to emulate a fake object (e.g. for map keys). The following example would draw a line, which looks like the symbol which is generated by this category for an OSM object with the tags highway=primary and maxspeed=80:
```html
{{ markerLine(evaluate({ "highway": "primary", "maxspeed": "80" })) }}
```