Project

General

Profile

Mapbox » History » Version 5

Philippe May, 06/08/2018 12:12

1 1 Philippe May
h1. Mapbox
2 1 Philippe May
3 1 Philippe May
Gisaf uses mapbox-gl for rendering online maps.
4 1 Philippe May
5 4 Philippe May
h2. Base maps
6 4 Philippe May
7 4 Philippe May
Mapbox doesn't have the concept of "base map". Instead, Mapbox maps are defined with a _style_ (that we call the _base style_).
8 4 Philippe May
A mapbox style contains different layers, which can be vector based (eg. labels, roads, areas) or raster (eg. satellite). 
9 4 Philippe May
10 4 Philippe May
Gisaf adds layers (in GeoJSON format) at the top the base style.
11 4 Philippe May
12 5 Philippe May
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).
13 4 Philippe May
14 1 Philippe May
15 2 Philippe May
h2. Setting styles for the layers (models)
16 1 Philippe May
17 1 Philippe May
There are 2 places where mapbox styles live, depending on the type of layer.
18 1 Philippe May
19 1 Philippe May
h3. Custom models
20 1 Philippe May
21 1 Philippe May
In the @qml@ table, define the style in the column @mapbox-paint@ corresponding to the type in the column @model_name@.
22 1 Philippe May
23 1 Philippe May
h3. Models from categories
24 1 Philippe May
25 1 Philippe May
In the @category@ table, these columns used for styling:
26 1 Philippe May
27 1 Philippe May
* @mapbox_type_custom@: the mapbox type can be overridden, eg. @fill-extrusion@ for polygons (no other known useful cases)
28 1 Philippe May
29 1 Philippe May
* @mapbox_paint@: the mapbox paint style
30 1 Philippe May
31 1 Philippe May
* @mapbox_layout@: the mapbox layout (usually not used)
32 1 Philippe May
33 1 Philippe May
34 1 Philippe May
h2. Mapbox style definition
35 1 Philippe May
36 1 Philippe May
The specification of mapbox paint styles can be found at https://www.mapbox.com/mapbox-gl-js/style-spec/ .
37 1 Philippe May
38 1 Philippe May
For example:
39 1 Philippe May
40 1 Philippe May
<pre>
41 1 Philippe May
{"fill-color": ["rgba", 204, 204, 255, 1]}
42 1 Philippe May
</pre>
43 3 Philippe May
44 3 Philippe May
h2. Building fonts
45 3 Philippe May
46 3 Philippe May
In the @gisaf-app@ directory:
47 3 Philippe May
<pre>
48 3 Philippe May
./node_modules/.bin/build-glyphs src/assets/fonts/GisafSymbols.ttf src/assets/fonts/glyphs/GisafSymbols/
49 3 Philippe May
</pre>