Etiquetez vos couches cartographiques web avec les labels

Nous avons vu la semaine dernière comment mettre en place des popups pour permettre à l'utilisateur d'obtenir plus d'informations sur les données en cliquant dessus. Pour continuer notre série de tutoriels sur l'API JavaScript d'ArcGIS, nous allons voir cette semaine comment étiqueter vos données avec des labels, pour que les données donnent plus d'informations sans même que l'utilisateur n'ait à les interroger.

Voici le résultat que nous obtiendrons à l'issue de cette nouvelle  étape :

Comme vous le voyez, le nom des arbres apparaît directement dans la scène. Vous pouvez suivre le tutoriel ci-dessous pas à pas pour reproduire cette fonctionnalité, ou allez tester interactivement le code sur ce CodePen.

Créer des labels 3D

Afin de créer des labels, nous allons paramétrer une instance de LabelClass. 

let labelClass = {  
    //la suite du code ira ici :
    //paramétrage des propriétés symbol et labelExpressionInfo
};

Nous utiliserons deux propriétés des LabelClass : labelExpressionInfo et symbol. La première permet de définir ce que contiendra l'étiquette, et la seconde de choisir la manière dont elle s'affichera

 

Commençons par labelExpressionInfo.Cette propriété contient elle-même une propriété d'expression, qui doit contenir une expression Arcade indiquant le texte à afficher. Pour l'application, le label affichera le nom de chaque arbre, contenu dans le champ "com-nom_usuel" de l'entité (feature). Voici comment écrire cela :

labelExpressionInfo: {
  expression: "$feature.com_nom_usuel"
},

Si vous souhaitez en apprendre plus sur les bases d'Arcade, je vous renvoie vers cet article du blog arcOrama.

 

Nous allons maintenant paramétrer la propriété symbol. Par défaut, les étiquettes s'affichent comme dans l'illustration ci-dessous à gauche. En utilisant cette propriété, nous allons pouvoir jouer sur la manière dont les étiquettes sont rendues, et obtenir le résultat à droite.

Voici le code pour paramétrer cette propriété :

symbol: {
    type: "label-3d",
    symbolLayers: [{
         type: "text",
         material: { color: "#7B656F"},
         halo : {color : "#FFF", size : "1px"},
         size: 12,  // en points
         font: {  
            family: "Playfair Display",
            style : "italic",
            weight : "bold",
            size: 12,
          }
     }],
     verticalOffset: {
          screenLength: "25px",
     },
     callout: {
          type: "line",
          size: 0.2,
          color: "#7B656F",
     }
},

Comme vous le voyez, elle se compose elle-même d'un certain nombre de paramètres. Tout d'abord, type. Il peut prendre deux valeurs : "text", pour les étiquettes des cartes 2D, et "label-3d", pour les étiquettes dans les scènes 3D. Nous choisissons donc ici "label-3d".

Nous allons ensuite paramétrer un symbolLayers, un verticalOffset et un callout. 

Le premier nous permet de paramétrer le symbole avec lequel l'étiquette s'affiche. Son type est toujours "texte". Nous pouvons choisir la couleur du texte avec la prorpiété material et la couleur et la taille de son contour avec la propriété halo. Nous réglons ensuite la taille (size) en points. Enfin, nous pouvons sélectionner et paramétrer une police (font). Notez que depuis la version 4.27 de l'API, il est possible de charger des polices personnalisée chargées à partir de ressources statiques sans CSS personnalisé. J'ai personnellement choisi la police Playfair Display, mais vous pouvez choisir celle de votre choix dans cette liste.

Le second paramètre de symbol, verticalOffset, nous permet d'ajouter un décalage vertical, en pixels. 

Enfin, le troisième, callout, permet de créer une ligne entre l'étiquette et l'entité qu'elle décrit si vous avez défini un décalage, dont vous pouvez choisir le type, la taille, la couleur, et une bordure (que nous n'avons pas ajoutée ici). 

Voici l'effet de chacun de ces trois paramètres :

Appliquer les labels à votre couche de données

A présent que les labels sont configurés, il faut configurer la couche pour qu'elle y fasse appel. Nous allons accéder à une première propriété de la couche, labelsVisible, et la définir à true pour donner à la couche la capacité d'avoir des labels. Il ne nous reste ensuite plus qu'à accéder à une seconde propriété, labelingInfo, afin de le faire pointer vers le LabelClass que nous venons de créer. Après cela, vous devriez voir apparaître les étiquettes des arbres sur votre carte.

arbresRemarquables.labelsVisible = true;
arbresRemarquables.labelingInfo = [labelClass];

C'est terminé pour aujourd'hui ! Vous pouvez retrouver le code complet de cette étape et des précédentes sur Github et CodePen. La semaine prochaine, nous faciliterons le déplacement de l'utilisateur dans l'application en créant des géosignets au niveau de différents points d'intérêt. En attendant, n'hésitez pas à retrouver les autres épisodes de cette série si vous les avez manqués.