Skip to content

Latest commit

 

History

History
82 lines (67 loc) · 3.56 KB

Icons.md

File metadata and controls

82 lines (67 loc) · 3.56 KB

Unicode Icons

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

🎂 🎂 🎂

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:

<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 6 Free (search) is included in OpenStreetBrowser, therefore you can use, e.g.:

<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.

<i style="color: red;" class="fas fa-compass" aria-hidden="true"></i>

Mapbox Maki Icons

Mapbox Maki Icons 8 are also included in OpenStreetBrowser. They can be accessed as images with protocol 'maki', e.g.:

<img data-src="maki:park">
<img data-src="maki:park">

You can pass URL options to the icon to modify its look. Note that every icon is a SVG path and all style options are available:

<img data-src="maki:park?size=11&amp;fill=red&amp;stroke=black&amp;stroke-width=0.5">

Temaki Icons

Temaki icons are additions to the Mapbox Maki Icons.

<img data-src="temaki:shinto">
<img data-src="temaki:shinto?fill=red">

Markers

Markers are rendered by the module openstreetbrowser-markers.

You can either use a <img data-src="..."> syntax or TwigJS: {{ markerLine({ ... }) }}. A simple example (a black line, 3px wide):

<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.
  • fill: if the marker should be filled (boolean), default true.
  • 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.
  • radius or size: Radius resp. size of the circle/pointer. Default: 10.

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:

<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:

{{ markerLine(evaluate({ "highway": "primary", "maxspeed": "80" })) }}