Mapbox¶

Gisaf uses mapbox-gl for rendering online maps.

Base maps¶

Mapbox doesn't have the concept of "base map". Instead, Mapbox maps are defined with a style (that we call the base style).
A mapbox style contains different layers, which can be vector based (eg. labels, roads, areas) or raster (eg. satellite).

Gisaf adds layers (in GeoJSON format) at the top the base style.

Gisaf allows to pick a base style for the map, though a menu. The options for the base styles are stored in the database (table map_base_style), and editable through the admin interface. The definition of the style itself is in json format, and can be created with online tools like Maputnik (MapboxStudio is also an alternative, but it's heavily linked to their business ecosystem).

Setting styles for the layers (models)¶

There are 2 places where mapbox styles live, depending on the type of layer.

Custom models¶

In the qml table, define the style in the column mapbox-paint corresponding to the type in the column model_name.

Models from categories¶

In the category table, these columns used for styling:

• mapbox_type_custom: the mapbox type can be overridden, eg. fill-extrusion for polygons (no other known useful cases)

• mapbox_paint: the mapbox paint style

• mapbox_layout: the mapbox layout (usually not used)

Mapbox style definition¶

The specification of mapbox paint styles can be found at https://www.mapbox.com/mapbox-gl-js/style-spec/ .

For example:

{"fill-color": ["rgba", 204, 204, 255, 1]}

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

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.

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:

CSS¶

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

.gisaf-V_VEGE_TMPL:before { content: '\e044';}

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.

Build¶

In the gisaf-app directory:

./node_modules/.bin/build-glyphs src/assets/fonts/GisafSymbols.ttf src/assets/fonts/glyphs/GisafSymbols/