Intégrez une carte personnalisée à votre site web (presque) sans code !

Intégrer une carte à un site web, ce n'est pas compliqué. Par contre, si vous souhaitez la personnaliser, ça peut commencer rapidement à devenir plus complexe. Bien sûr, si vous maîtrisez JavaScript, il est toujours possible d'obtenir une application cartographique très sympa, comme avec l'API JavaScript d'ArcGIS (dont nous avions appris à nous servir dans ce tuto). Mais saviez-vous qu'il est possible d'économiser énormément de temps de développement et beaucoup de lignes de code (voire ne pas avoir à coder du tout) avec une alternative très simple ? Laissez-moi vous présenter la webmap et le Map Viewer !

Présentation de Map Viewer

La webmap d'ArcGIS vous permet, via une interface interactive (le Map Viewer dans ArcGIS Online ou ArcGIS Enterprise),  de créer une carte, y ajouter de nombreux types de données et modifier leur rendu et leur plage de visibilité, configurer des popups très personnalisées, des labels, etc. 

Pour illustrer cela, je m'en suis servi pour créer une carte des Parcs nationaux de France en utilisant les données disponibles sur data.gouv.fr que j'ai enrichies avec les résultats du rapport du Ministère de la Transition Écologique (2021) pour obtenir des valeurs de fréquentation.

Voici la carte que j'ai pu créer et les paramétrages que j'ai utilisés :

La configuration de la symbologie me permet de représenter la fréquentation de chacun des parcs.

Avec les étiquettes, je décide d'afficher ici le nom des parcs. Je peux créer plusieurs étiquettes si je le souhaite et définir leur plage de visibilité selon les échelles, pour par exemple ne pas surcharger la carte lorsque celle-ci est très dézoomée.

Dans les popups, je peux rajouter de nombreux éléments pour que l'utilisateur obtienne plus d'informations sur les parcs : du texte, des images, des graphiques...

Je peux également créer rapidement des géosignets qui permettront à l'utilisateur de consulter facilement les parcs se situant hors de France Métropolitaine (Guyane, La Réunion, Guadeloupe).

 

Je me suis également permise de dupliquer la couche d'emprise des parcs afin d'en retirer la symbologie sur la fréquentation, ce qui nous permettra de créer une fonctionnalité assez sympa quand nous verrons comment utiliser JavaScript pour aller plus loin avec cette webmap. 

Enfin, j'ai épuré le fond de plan Outdoors (disponible par défaut) avec le Vector Tile Style Editor pour retirer les informations de toponymie qui alourdissaient trop la carte.

 

Une fois configurées, je peux sauvegarder les couches et les cartes dans mon portail ArcGIS Online ou ArcGIS Enterprise, et paramétrer le niveau de partage que je souhaite leur attribuer (privé, organisation, public). Chacun des items de mon portail est identifiable grâce à son itemid, qui sera utilisé par ArcGIS pour charger l'item dans n'importe quelle application web. Vous pouvez très facilement retrouver cet id sur la page de l'item ou directement dans son url.

Maintenant que notre carte est créée, nous allons voir, en tant que développeur, comment nous allons en tirer parti pour le développement d'applications.

Quels avantages pour les développeurs ?

La configuration d'une webmap offre de nombreux avantages aux développeurs à travers différents workflows :

• Développement d'application no-code ;
• Développement d'application low-code ;
• Facilitation du travail d'équipe ;
• Amélioration de la maintenabilité et de l'extensibilité.

Voyons ensemble comment nous allons utiliser la webmap créée ci-dessus dans chacun de ces contextes. 

 

Développement no-code

ArcGIS propose plusieurs générateurs vous permettant de déployer des applications à partir d'une webmap, et ce sans aucune ligne de code. Cela vous permet de développer des applications correspondant à de nombreux besoins standards avec des fonctionnalités sur étagère. 

Pour cela, depuis le Map Viewer, vous pouvez simplement cliquer sur l'un des concepteurs proposés : Instant Apps, Experience Builder, ArcGIS StoryMaps, ou Dashboards.

Par exemple ci-dessous, j'ai pu créer cette application en 5 minutes chrono grâce à l'Instant App "Encarts" :

L'utilisation de générateurs d'application ne requiert pas de connaissances en développement et rend le maintien des applications très simple. 

Développement low-code 

Si les solutions sur étagère ne correspondent pas totalement à votre besoin, il est possible de développer des solutions personnalisées s'appuyant toujours sur votre webmap. Avec un tout petit peu de connaissances en développement web, l'API JavaScript d'ArcGIS vous permet de créer des applications webs, et l'utilisation de la webmap diminue de manière conséquente le code nécessaire.

Dans cette application, j'ai pu intégrer la carte (avec symbologie, popups et étiquettes), sa légende et ses géosignets en moins de 40 lignes de code !

Voici l'intégralité du code (promis, pas une ligne de plus n'est nécessaire !), que vous pouvez également consulter en intégralité sur ce CodePen :

<html lang="fr">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>Parcs nationaux de France</title>

  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/3.0.2/calcite.css" />
  <script type="module" src="https://js.arcgis.com/calcite-components/3.0.2/calcite.esm.js"></script>

  <link rel="stylesheet" href="https://js.arcgis.com/4.32/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.32/"></script>

  <script type="module" src="https://js.arcgis.com/map-components/4.32/arcgis-map-components.esm.js"></script>
</head>

<body>
  <arcgis-map item-id="55496d29650f4e11b53b4c9d724519cc">
    <arcgis-zoom position="top-left"></arcgis-zoom>
    <arcgis-expand expanded position="top-left">
      <arcgis-bookmarks ></arcgis-bookmarks>
    </arcgis-expand>
    <arcgis-legend></arcgis-legend>
  </arcgis-map>
</body>
  
</html>

En utilisant les configurations de la webmap avec les composants du SDK JavaScript d'ArcGIS, notez que je n'ai pas eu une seule ligne de JavaScript à écrire : c'est ici du pur HTML et CSS pour un niveau de développement très abordable pour un débutant.

 

Notez également que ce code est universel pour n'importe quelle webmap de votre portail : en remplaçant l'item-id du composant arcgis-map ligne 27, l'application se mettra à jour avec les données de la nouvelle webmap ! (Notez tout de même que si vous utilisez un composant bookmarks ou legend, il faut respectivement que les géosignets ou la légende ait été configurés pour la webmap).

 

Sans utiliser la webmap ni les composants, j'aurais pu développer exactement le même type d'application en utilisant les widgets du SDK JavaScript d'ArcGIS. Cela m'aurait demandé de reconstruire la carte en ajustant le point de vue, en appelant la couche, puis en paramétrant de manière programmatique la symbologie, les widgets, les étiquettes et les popups. Nous l'avions fait avec un autre jeu de données dans cette série de tutoriels,  avec un code atteignant plus de 500 lignes en combinant le HTML, CSS et JS. 

 

Par dessus cette première intégration, il reste bien sûr possible de rajouter des comportement très personnalisés en interagissant avec les widgets et les données, et de rajouter des éléments d'interface utilisateur. Nous verrons comment faire cela dès le prochain article (pour que celui-ci garde une longueur correcte), donc restez connecté pour amener votre application dans une nouvelle dimension. 

 

Travail d'équipe

Configurer une webmap dans le Map Viewer permet un travail d'équipe plus efficace dans le processus de développement de l'application. Comme la configuration d'une carte dans le Map Viewer utilise une interface utilisateur intuitive, il n'est pas nécessaire d'être développeur pour participer au processus de création d'une application web.
Un spécialiste SIG ou un cartographe peut se charger lui-même de la configuration de la carte puis simplement fournir l'id de la webmap au développeur qui se chargera de développer l'application. Ne dit-on pas "chacun son métier et les vaches seront bien gardées"? 🐄

Maintenabilité et extensibilité

Oui, on a déjà économisé pas mal de lignes de code pendant la conception. Mais ça ne s'arrête pas là !  Il arrive souvent que les données doivent être modifiées car elles sont mises à jour régulièrement (via un script Python par exemple), que vous souhaitiez rajouter une classe d'étiquettes, modifier la symbologie ou ajouter une nouvelle couche. En utilisant la webmap, tout cela va se faire très rapidement.

 

Mais d'abord, quel serait le scénario si vous ne passiez pas par la webmap ? Imaginons que, malgré cet article, vous décidiez de développer une application dans laquelle vous construisez programmatiquement une carte via l'API JavaScript par exemple. Et cette carte, vous en êtes content, et vous avez besoin de l'utiliser dans plusieurs applications, alors vous copiez-collez le code dans toutes vos applications qui ont chacune des fonctionnalités personnalisées.

Si maintenant il faut par exemple changer la couleur de la symbologie des couches, et bien vous devrez retourner dans le code de chacune des apps une par une pour modifier le rendu, et faire cela pour chacune des apps dans laquelle vous avez construit la carte. Je suis fatiguée rien que d'y penser.

 

Deuxième scénario : vous avez configuré une webmap. Dans ce cas là, pas de changement de code dans aucune des applications, car l'id de la webmap reste identique. Les changements sont faits sans ligne de code dans le Map Viewer puis les modifications sont immédiatement et automatiquement reflétées dans toutes les applications qui consomment, sans risque d'en oublier une. Cela rend vos applications beaucoup plus simples à maintenir, et leur évolution beaucoup moins coûteuse.

Conclusion

Grâce à la webmap, vous pouvez économiser beaucoup d'efforts de développement de votre application, que ce soit au moment de sa conception ou de son maintien. Elle permet également au développeur et au spécialiste SIG d'apporter chacun son expertise en séparant la conception de la carte de son intégration à l'application finale. 

Avec les solutions no-code, les webmaps sont intégrables directement dans des applications puissantes proposant des solutions sur étagère qui sont déjà très personnalisables. Mais, si vous avez besoin d'une liberté de paramétrage plus poussée, alors vous pouvez vous orienter vers l'API JavaScript d'ArcGIS. En tirant parti des composants combinés à la webmap, vous réduisez considérablement le nombre de lignes de code nécessaires. 

Bien sûr, la conception de la webmap ne permet pas tout, et vous pourriez vouloir aller plus loin. C'est là que les développeurs restent indispensables. Dans le prochain article, nous verrons justement comment nous pouvons nous appuyer sur les bases solides de l'application créée aujourd'hui pour l'enrichir avec des fonctionnalités personnalisées.