Mapbox » History » Version 6
Version 5 (Philippe May, 06/08/2018 12:12) → Version 6/10 (Philippe May, 15/07/2019 13:12)
h1. Mapbox
Gisaf uses mapbox-gl for rendering online maps.
h2. 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":https://maputnik.github.io/editor ("MapboxStudio":https://www.mapbox.com/editor/ is also an alternative, but it's heavily linked to their business ecosystem).
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. Fonts
h3. 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.
h3. Mapping of characters
Each character for a layer has a unicode number, which needs to be mapped to the layer it represents.
TODO: add documentation about the mapping.
h3. Build 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. 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":https://maputnik.github.io/editor ("MapboxStudio":https://www.mapbox.com/editor/ is also an alternative, but it's heavily linked to their business ecosystem).
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. Fonts
h3. 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.
h3. Mapping of characters
Each character for a layer has a unicode number, which needs to be mapped to the layer it represents.
TODO: add documentation about the mapping.
h3. Build Building fonts
In the @gisaf-app@ directory:
<pre>
./node_modules/.bin/build-glyphs src/assets/fonts/GisafSymbols.ttf src/assets/fonts/glyphs/GisafSymbols/
</pre>