GIS » Gisaf

h1. Fonts

Gisaf uses a custom font for symbols: @GisafSymbols@.

This same font is used in 2 different ways:

1. as normal font for the web interface, using css: eg, the symbols for the layer list.

1. for mapbox: Mapbox's rendering uses a WebGL component with its own specification, so the font needs to be converted (see below).

h2. Creation and update of characters

The main font file is created with BirdFont, and is in the git repository: @gisaf-app/src/assets/fonts/gisafSymbols.bf@.

It is then exported as ttf in Birdfont.

h2. Mapping of characters

Each character for a layer has a unicode number, which needs to be mapped to the layer it represents.

The mapping is done in 2 different places, following the 2 techniques quickly described above:



h3. CSS

In @gisaf-app/src/gisaf-icons.css@, the mapping is like @layer_name => unicode@, eg:

<pre>
.gisaf-V_VEGE_TMPL:before { content: '\e044' ! important;} '\e044';}
</pre>



h3. Mapbox

* For custom models, the Unicode is defined in the @symbols@ attribute

* For category-based models, the Unicode is defined in the @symbol@ column and can be set through the Gisaf admin.

h2. Build

In the @gisaf-app@ directory:
<pre>
./node_modules/.bin/build-glyphs src/assets/fonts/GisafSymbols.ttf src/assets/fonts/glyphs/GisafSymbols/
</pre>