Mapbox » History » Version 3
Version 2 (Philippe May, 10/07/2018 18:37) → Version 3/10 (Philippe May, 17/07/2018 18:01)
h1. Mapbox
Gisaf uses mapbox-gl for rendering online maps.
h2. Setting styles for the layers (models)
There are 2 places where mapbox styles live, depending on the type of layer.
h3. Custom models
In the @qml@ table, define the style in the column @mapbox-paint@ corresponding to the type in the column @model_name@.
h3. 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)
h2. Mapbox style definition
The specification of mapbox paint styles can be found at https://www.mapbox.com/mapbox-gl-js/style-spec/ .
For example:
<pre>
{"fill-color": ["rgba", 204, 204, 255, 1]}
</pre>
h2. Building fonts
In the @gisaf-app@ directory:
<pre>
./node_modules/.bin/build-glyphs src/assets/fonts/GisafSymbols.ttf src/assets/fonts/glyphs/GisafSymbols/
</pre>
Gisaf uses mapbox-gl for rendering online maps.
h2. Setting styles for the layers (models)
There are 2 places where mapbox styles live, depending on the type of layer.
h3. Custom models
In the @qml@ table, define the style in the column @mapbox-paint@ corresponding to the type in the column @model_name@.
h3. 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)
h2. Mapbox style definition
The specification of mapbox paint styles can be found at https://www.mapbox.com/mapbox-gl-js/style-spec/ .
For example:
<pre>
{"fill-color": ["rgba", 204, 204, 255, 1]}
</pre>
h2. Building fonts
In the @gisaf-app@ directory:
<pre>
./node_modules/.bin/build-glyphs src/assets/fonts/GisafSymbols.ttf src/assets/fonts/glyphs/GisafSymbols/
</pre>