Apprenez à utiliser un widget pour enrichir votre carte web interactive

Afin de permettre aux utilisateurs de naviguer plus aisément entre les différents points d'intérêts de notre scène web interactive, nous allons y ajouter des géosignets (bookmarks) dans ce sixième épisode de la série consacrée à la prise en main de l'API JavaScript d'ArcGIS. Pour cela, nous ferons appel à un widget de l'API, qui nous permet de créer des interactions poussées avec la vue de notre carte en seulement quelques lignes de code.

Voici le résultat que nous allons obtenir à l'issue de cette étape :

Comme vous le voyez, les géosignets permettent de faire naviguer la caméra vers des lieux prédéfinis de notre scène. Nous allons en créer un pour Montmartre, un pour le bois de Boulogne et un pour le Trocadéro et la Tour Eiffel.
Vous pouvez suivre pas à pas le tutoriel ci-dessous pour obtenir le même résultat, ou aller sur ce CodePen pour jouer interactivement avec les paramètres du code

Les widgets de l'API JavaScript d'ArcGIS

Les géosignets que nous allons mettre en place sont issus de la classe Widget de l'API. Cette classe contient de nombreux outils prêts à l'emploi que vous pouvez utiliser afin d'enrichir votre application. L'API JavaScript d'ArcGIS étant une API cartographique, vous trouverez de nombreux widgets relatifs aux cartes (légende, profil d'élévation, mesure, localisation, fonds de carte, etc.), mais aussi liés aux données (liste des tables, histogramme, éditeur, etc.). Vous pouvez en retrouver la liste complète ici.

Ces nombreux widgets sont très utiles, car ils vous économisent un grand temps de développement. Imaginez : vous souhaitez ajouter une barre d'échelle à votre carte. Pour cela, vous devez créer un style pour votre échelle, configurer sa taille et s'assurer qu'elle soit correcte par rapport à la taille de la carte et de l'écran, adapter son comportement et son évolution en fonction des zooms et des dézooms de l'utilisateur, ... Avec l'API, vous pouvez faire appel au widget ScaleBar préconfiguré et régler ce problème en deux lignes :

let scaleBar = new ScaleBar({view: view});
view.ui.add(scaleBar, {position: "bottom-left"});

De la même manière ici, nous allons utiliser le widget Bookmarks (géosignet) de l'API. Nous n'aurons qu'à indiquer les différents paramètres de caméra et le nom de chacun des géosignets, et le reste sera prévu par le widget : style d'affichage du widget, mode de déplacement de la caméra entre les différents points de vue, etc.

Créer des géosignets

Afin de rajouter des géosignets à notre scène, nous allons utiliser le widget Bookmarks (Géosignets), qui contiendra lui-même une collection de différents Bookmark contenant chacun les paramétrages de caméra pour naviguer vers une étendue particulière de la scène

 

Complétion de la directive require

Comme expliqué dans l'épisode 2 de la série, nous allons compléter la directive require de notre code afin de pouvoir faire appel aux modules  Bookmarks et  Bookmark de l'API. Nous les rajoutons donc en compléments des autres modules que nous avons utilisés lors des étapes précédentes :

require([
  "esri/Map",
  "esri/Basemap",
  "esri/views/SceneView",
  "esri/layers/GeoJSONLayer",
  "esri/popup/content/TextContent",
  "esri/popup/content/MediaContent",
  "esri/popup/content/ImageMediaInfo",
  "esri/popup/content/support/ImageMediaInfoValue",
  "esri/widgets/Bookmarks",
  "esri/webmap/Bookmark",
], (
  Map, Basemap, SceneView, GeoJSONLayer, TextContent, MediaContent, ImageMediaInfo, ImageMediaInfoValue, Bookmarks, Bookmark) => {{

Création d'une instance de widget Bookmarks

Nous allons paramétrer le widget Bookmarks avec deux propriétés. La première, view, indique sur quelle instance de vue l'action du widget s'effectuera, c'est-à-dire pour le widget Bookmarks dans quelle vue les paramètres de caméra seront actualisés. Notre application ne contenant qu'une seule  vue nommée view, sur laquelle nous paramétrons la propriété.

La seconde propriété, bookmarks, attend une liste de Bookmark donnant les coordonnées de la caméra que nous paramétrerons juste après.

const bookmarks = new Bookmarks({
   view: view,
   bookmarks: [
     // ajout de chacun des géosignets à l'étape suivante
   ],
});

Paramétrage de chaque  Bookmark

Nous allons compléter le paramètre bookmarks du widget en créant trois nouveaux Bookmark.Voici comment créer un Bookmark, avec par exemple celui renvoyant sur la vue de Montparnasse : 

new Bookmark({
    name: "Montmartre",
    viewpoint: {
       camera: {
          position: {
             longitude: 2.340861136194503,
             latitude: 48.88276594605576,
             z: 178.8139155479148,
           },
           heading: 29.620133897254565,
           tilt: 65.59724234196116,
        },
    },
}),

Chaque Bookmark contient un nom (name) qui renseigne sur le lieu vers lequel renvoie le géosignet et qui sera affiché dans l'application. Il doit donc être explicite pour que l'utilisateur sache vers quel endroit il sera renvoyé en cliquant sur le widget.

Nous nous intéressons ensuite à la propriété viewpoint, qui nous permet d'indiquer comment la caméra sera positionnée pour le géosignet. C'est une propriété centrale, car c'est elle qui donne l'étendue géographique de chacun des géosignets. Comme dans l'épisode 1 où nous avions paramétré le point de vue initial de la caméra dans la scène, nous donnons ici la longitude, la latitude et l'altitude de la caméra ainsi que son orientation par rapport au Nord et son inclinaison.

Afin de pouvoir connaître les paramètres de caméra que vous pouvez utiliser pour paramétrer vos géosignets, vous pouvez utiliser cette application qui vous permet de naviguer dans une scène puis de copier/coller les paramètres de caméra une fois que vous avez trouvé le point de vue idéal (n'hésitez pas à aller consulter l'application en mode plein écran pour mieux pouvoir l'utiliser).

Je ne l'ai pas fait ici pour ne pas surcharger l'interface de l'application, mais sachez que vous pouvez également paramétrer une miniature (thumbnail) pour votre Bookmark en donnant un lien vers une image afin que l'utilisateur puisse prévisualiser l'étendue du géosignet sans même cliquer dessus

 

Voici le paramétrage final du widget Bookmarks et des trois Bookmark qu'il contient :

const bookmarks = new Bookmarks({
  view: view,
  bookmarks: [
    new Bookmark({
      name: "Montmartre",
      viewpoint: {
        camera: {
          position: {
            longitude: 2.340861136194503,
            latitude: 48.88276594605576,
            z: 178.8139155479148,
          },
          heading: 29.620133897254565,
          tilt: 65.59724234196116,
        },
      },
    }),
    new Bookmark({
      name: "Bois de Boulogne",
      viewpoint: {
        camera: {
          position: {
            longitude: 2.2321180102165576,
            latitude: 48.86061846868905,
            z: 263.4042479386553,
          },
          heading: 57.84309619643786,
          tilt: 72.15443981366577,
        },
      },
    }),
    new Bookmark({
      name: "Trocadéro et Tour Eiffel",
      viewpoint: {
        camera: {
          position: {
            longitude: 2.292790675917738,
            latitude: 48.84796326886384,
            z: 450.4147386122495,
          },
          heading: 355.6069497207025,
          tilt: 73.39124532085117,
        },
      },
    }),
  ],
});

Ajouter les géosignets à la vue

Nous avons défini plus tôt sur quelle vue allait interagir le widget, mais nous devons également définir dans quelle vue le widget va simplement s'afficher. Avec l'API JavaScript d'ArcGIS, c'est à l'intérieur de l'interface utilisateur l'(ui) d'une vue que vous pourrez ajouter les différents widgets que vous créez. Nous accédons donc à l'ui de notre vue, et nous y utilisons la méthode .add() pour afficher le widget Bookmarks que nous venons de paramétrer et choisissons une position en haut à droite de notre application.

view.ui.add(bookmarks, {
	position: "top-right",
});

C'est tout pour cette semaine ! N'hésitez pas à aller consulter le code complet à l'issue de cette étape sur Github ou sur CodePen. Lors de la prochaine étape, nous apprendrons à utiliser un composant du Calcite Design System d'Esri afin d'afficher ou de cacher la couche des arbres de la basemap permettant de voir ou non les autres arbres de la capitale. En attendant, n'hésitez pas à retrouver les autres épisodes de cette série si vous les avez manqués.