Skip to content
This repository has been archived by the owner on Jun 3, 2024. It is now read-only.

5) How to's

Jump to bottom
xem edited this page Mar 14, 2022 · 3 revisions

Use feature flags

Sometimes, we want to implement / merge a feature without having it visible on production yet. Here's how to do it

flagName:
  enabled: false
  • In the code source, surround the feature with flag tests:
const config = useConfig();
if (config.flagName.enabled) { ... }
  • To enable the flag locally, set it to true in youe .env file:
TILEVIEW_flagName_enabled=true

  • To enable the flag on dev / plive / prod environments, set the env var to true in the yml files of the Erdapfel CI project

  • When the features becomes permanent, the flag can be cleaned up by removing the corresponding tests, the default config, and the env vars.

Change the Suggest behavior

The suggest's data is fetched and ordered in suggest.js and suggest_sources.js

Edit/add icons

There are 3 kinds of icons in Qwant Maps:

Icons displayed by Mapbox

To add new icons or edit the existing ones:

  • Clone https://github.com/Qwant/qwant-basic-gl-style
  • Do your adds/edits in the icons folder and merge on master
  • Do a release (bump the version number then npm publish)
  • Update the version number of @qwant/qwant-basic-gl-style in erdapfel/package.json

Icons from the design system

These icons are currently read-only.

SVG icons displayed by the application

Add an icon not present in the design system:

  • Add a svg file in /public/images/remix/ ("line" svg files from https://remixicon.com/ or provided by the design team)
  • export this file as React component in src/components/ui/icons.js
  • Note: these SVG must use the props "width" and "height" (instead of "size"), and have "fill='currentColor'" set explicitly to not appear black.

Routing

See router's doc here: https://github.com/Qwant/erdapfel/blob/master/docs/src/routing.md

Extra tips:

Use a custom tile server

  • Edit the .env file:
TILEVIEW_mapStyle_baseMapUrl='["http://your-server/path-to-basemap-tiles/{z}/{x}/{y}.pbf"]' # map tiles
TILEVIEW_mapStyle_poiMapUrl='["http://your-server/path-to-poi-tiles/{z}/{x}/{y}.pbf"]' # poi tiles

The suffix {z}/{x}/{y}.pbf lets erdapfel specify zoom and position

Run tests

  • all tests: TEST=true npm run build then npm run test

  • unit tests only: npm run unit-test

  • integration tests only:npm run integration-test

NB: on Windows 10+ and WSL2, it's possible that puppetteer doesn't find chrome to launch the integration tests. If it happens, run:

sudo apt-get update

sudo apt-get install -y gconf-service libasound2 libatk1.0-0 libatk-bridge2.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget

sudo apt-get install -y libgbm-dev

# then, try running `npm run test`

Custom map style

A style builder is used behind the scene to build the style of the map and to ease the usage of the icons for the front end.

The fonts used for the text displayed on the map are also built using an OpenMapTiles script.

Clone this wiki locally