Some tools to build and debug GL styles for Qwant Maps
It can be used:
- as a node package. We used it as a a dependency on Erdapfel, Qwant Maps front end application. You can also use it as a dependency of your style node package.
- as a standalone cli application.
This readme explains the common use cases of the standalone version.
You will need a style repository, for instance Qwant basic style. It contains:
- a template style saved as a
style.json
- some config files (
*.yml
) used to overwrite some fields in the template style - some TileJSON, with the schema of the tiles, saved as
tileschema_base.json
andtileschema_poi.json
- many icons used in style saved as SVG files inside
icons
folder
You may also need a configuration file to define the url of your tiles services (vector tiles sources and servers that host the sprites and fonts). If you need inspiration, you can check out prod_conf.json
, which is the one we use for Qwant Maps production instances (but please note that Qwant instances are internal components and are not meant (yet) to be used directly other than as part of Qwant Maps. You can learn more in our Terms of services))
The builder also create a style version that uses OpenMapTiles Tilehosting service which is mostly compatible with Qwant Maps schema. You may want to use this one to debug or contribute ;)
npm test -- PATH/TO/YOUR/MAPSTYLE/FOLDER
to check if your style is ok
The build_all
command will generate the sprites from the icons and create the GL style file using the icons and i18n config files (from the style directory) and the url of the tile servers (from the conf).
npm run build_all -- --style-dir PATH/TO/YOUR/MAPSTYLE/FOLDER --conf PATH/TO/YOUR/CONF
Commons options:
- add
--icons=true
to use theicons.yml
config file to create the rules in the style for the icon and text-color used - build a localised versions of your style, using the
i18n
parameter (npm run build_all -- --style-dir PATH/TO/YOUR/MAPSTYLE/FOLDER --conf PATH/TO/YOUR/CONF --i18n fr
) - add webfont generation using
--webfont=true
: this will create a subfolder containing webfont (css + ttf + woff) inside build folder
The build command generate a build
folder inside the style directory. It contains mostly some GL style files (in json) that can be used right away, and some html files detailled to debug.
You can use the built compare.html
page to compare your style to other ones (only Mapbox Streets for now).
You need to insert a valid Mapbox token in the built compare.html
page.
If you are not from Qwant, you may also want to replace the style url by style-omt.json
to use the OpenMapTiles version of the style.
You can use the built debug.html
page to inspect your tiles et check your style.
If you are not from Qwant, you may want to replace the style url by style-omt.json
to use the OpenMapTiles version of the style.