Utiliser ses propres polices dans Mapbox GL

Après nous être intéressé à la génération et à l’utilisation des « sprites » personalisés on va s’intéresser à celles des polices. C’est plus simple, mais la littérature sur internet est très maigre… J’ai dû tâtonner.

Bien sûr, on aurait pu utiliser MapboxStudio qui s’occupera de tout et hébergera nos fonts, mais il faudra alors un accès à internet, un compte Mapbox et on sera soumis à des restrictions ($£).

Les polices qu’utilise MapboxGL sont en fait des SDF « compressés » en protocol buffer et se présente sous la forme de fichiers .pbf classés par échelle, un peu comme les vectorTiles. Pour les générer, Mapbox met à disposition node-fontnik et FontMachine, le premier étant utilisé par le deuxième.

Pour installer node-fontnik que l’on va utiliser ici, il nous faudra nodejs 4.x ( pas compatible avec la 6.x) un Linux ou un Mac. Widowsiens, passez votre chemin, ou alors, si comme moi vous galérez, créez une petite VM avec Ubuntu 16.04 et node 4.2, ça fonctionnera.

Node-fontnik est disponible sur NPM, il vous suffit alors de taper ses lignes pour l’installer de façon globale:

npm install fontnik -g

Utilisant le Material Design pour une application et pour plus de cohérence, j’ai décidé d’utiliser la même police pour la carte, à savoir le Roboto. On peut télécharger l’ensemble des .ttf sur le Github de Google.

Nous avons nos fichiers .ttf et nous allons générer nos glyphs. Chaque glyph sera stocké dans un dossier portant le nom de la police. La génération se fait ainsi :

build-glyphs « chemin vers le .ttf ou .otf » « répertoire de sortie »

Ou plus concrètement :

mkdir ./glyphs/Roboto-Bold
build-glyphs "./roboto/hinted/Roboto-Bold.ttf" ./glyphs/Roboto-Bold

Pour utiliser ces glyphes dans MapboxGL, il faudra modifier la feuille de style de la carte

    	...
"sprite": "assets/mapStyle/sprites",
    "glyphs": "assets/mapStyle/glyphs/{fontstack}/{range}.pbf"
	...

	...
       "layout": {
                "icon-image": "{maki}-11",
                "text-font": ["Roboto-Bold"],
                "text-field": "{name_en}",
                         },

Voilà…

Etiquettes en Roboto
Étiquettes en Roboto

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *