Améliorez votre application Web ArcGIS avec OpenAI

Au fur et à mesure que je progresse dans mes expériences de codage et dans ma carrière (et, soyons honnêtes, tout au long de ma vie), je suis constamment à la recherche de façons amusantes de relier ce que j'apprends à ce que je sais. Plus récemment, j'ai créé une série de vidéos pour les développeurs Web souhaitant ajouter un peu d'IA à leurs applications cartographiques. J'ai eu plaisir à tester différentes bibliothèques d'IA et à montrer aux développeurs à quel point il peut être facile de les implémenter dans leurs applications.

Aujourd'hui, je vous guide à travers un tutoriel qui montre comment générer des informations sur un emplacement avec un minimum de code. Nous utiliserons l’API OpenAI aux côtés du SDK ArcGIS Maps pour JavaScript, avec l’approche moderne des composants Web. Il s'agit d'un moyen simple et déclaratif d'ajouter de puissantes fonctionnalités de cartographie à vos applications Web. Ne vous inquiétez pas si vous débutez avec l'un de ces outils : je vous guiderai à travers chaque étape.

Configuration du projet AI ArcGIS JS SDK

Pour commencer, nous utiliserons une configuration simple HTML, CSS et JS. Dans Visual Studio Code, je vais créer les fichiers HTML, CSS et JS. Dans le HTML, j'utiliserai le ! Entrez le raccourci pour la configuration HTML de base. Je veillerai également à lier mes fichiers CSS et JS. Voici à quoi cela ressemble jusqu'à présent :

    
    
      
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="/styles.css">
        <script src="/scripts.js"></script>
      
      
      
    

Configuration HTML

Puisque j'utilise le SDK ArcGIS Maps pour les composants JS, je devrai inclure quelques bibliothèques via CDN : les composants Calcite et le SDK ArcGIS JS. Nous utilisons CDN pour plus de simplicité, mais pour les applications de production plus volumineuses, il est recommandé d'utiliser npm.

    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.13.2/calcite.css">
    <link rel="stylesheet" href="https://js.arcgis.com/4.31/esri/themes/light/main.css">

    <script type="module" src="https://js.arcgis.com/calcite-components/2.13.2/calcite.esm.js"></script>    
    <script src="https://js.arcgis.com/4.31/"></script>
    <script type="module" src="https://js.arcgis.com/map-components/4.31/arcgis-map-components.esm.js"></script>

Avant d'utiliser les styles de carte ArcGIS, je vais configurer l'authentification avec ma clé API ArcGIS. Remarque : N'exposez jamais votre clé API publiquement dans le frontend. Dans un environnement de production, vous devez utiliser un serveur backend pour traiter en toute sécurité les requêtes API et gérer les clés. Pour l'instant, je vais inclure ceci avant toutes les autres balises de script dans mon fichier HTML pour plus de simplicité.

    <script>
       var esriConfig = {
         apiKey: "yourKey"
       };
    </script>

Maintenant, je peux utiliser l'élément personnalisé pour représenter la carte et définir les propriétés du fond de carte, du centre (longitude, latitude) et du zoom à mon goût.

    <arcgis-map basemap="arcgis/topographic" center="-77.02, 38.89" zoom="13">
      <arcgis-zoom position="top-left"></arcgis-zoom>
    </arcgis-map>

Voici à quoi devrait ressembler le fichier HTML final :

    
    
      
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>OpenAI + ArcGIS Map</title>

        <script>
          var esriConfig = {
            apiKey: "yourKey"
          };
        </script>

        <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.13.2/calcite.css">
        <link rel="stylesheet" href="https://js.arcgis.com/4.31/esri/themes/light/main.css">
        <link rel="stylesheet" href="/styles.css">

        <script type="module" src="https://js.arcgis.com/calcite-components/2.13.2/calcite.esm.js"></script>    
        <script src="https://js.arcgis.com/4.31/"></script>
        <script type="module" src="https://js.arcgis.com/map-components/4.31/arcgis-map-components.esm.js"></script>
      
     
        <arcgis-map basemap="arcgis/topographic" center="-77.02, 38.89" zoom="13">
          <arcgis-zoom position="top-left"></arcgis-zoom>
        </arcgis-map>
        <script src="/scripts.js"></script>
     
    

Configuration CSS

Maintenant, passons au CSS. Nous commencerons par cibler les éléments html, body et arcgis-map. Puisque je souhaite que ma carte occupe toute la page, je m'assurerai qu'il n'y a pas de remplissage ou de marges prédéfinies et qu'elle occupe 100 % de la hauteur et de la largeur de la page.

    html,
    body,
    arcgis-map {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

À ce stade, vous pourrez voir votre carte ArcGIS JS à l’écran. Les fonctionnalités se limitent au zoom et au panoramique, alors continuons !

Configuration JS

Maintenant, passons à la partie amusante : faire interagir notre carte avec OpenAI ! Tout d’abord, nous devons définir notre clé API OpenAI pour l’authentification. Vous devrez avoir un compte avec OpenAI pour en obtenir un. Après cela, nous récupérerons la carte en sélectionnant l'élément personnalisé dans le DOM et en l'attribuant à la variable arcgisMap. Cela nous permet de manipuler la carte par programme.

    
    
      
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="/styles.css">
        <script src="/scripts.js"></script>
      
      
      
    

En parlant d’interagir avec notre carte, nous allons y ajouter un écouteur d’événement. Nous allons capturer l'événement arcgisViewClick, qui est déclenché lorsque l'utilisateur clique n'importe où sur la carte. Cela nous aidera à obtenir l'emplacement cliqué et à l'envoyer à l'API OpenAI.

Après que l'utilisateur ait cliqué, nous extrairons les coordonnées de la carte (mapPoint) des détails de l'événement et les stockerons dans l'objet params. Cela nous donne l'emplacement (longitude, latitude) où l'utilisateur a cliqué. Nous utiliserons également outFields : "*" pour demander tous les attributs de la fonctionnalité cliquée (vous pouvez affiner cela en fonction de vos besoins).

    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.13.2/calcite.css">
    <link rel="stylesheet" href="https://js.arcgis.com/4.31/esri/themes/light/main.css">

    <script type="module" src="https://js.arcgis.com/calcite-components/2.13.2/calcite.esm.js"></script>    
    <script src="https://js.arcgis.com/4.31/"></script>
    <script type="module" src="https://js.arcgis.com/map-components/4.31/arcgis-map-components.esm.js"></script>

Maintenant, passons à l’obtention de la réponse d’OpenAI. Tout d'abord, nous définissons l'invite qui sera envoyée à l'API en utilisant la longitude et la latitude de params.location. Ensuite, nous déstructurerons le tableau de choix de la réponse. C'est ici qu'OpenAI stockera le contenu généré en fonction de notre invite. Nous appellerons ensuite l'API OpenAI avec fetch(), en envoyant une requête POST au point de terminaison de discussion/achèvements. Les en-têtes incluent Content-Type : application/json pour indiquer que nous envoyons et recevons du JSON, et Authorization avec le jeton Bearer pour l'authentification.

Dans le corps, on précise le modèle (je choisis ici le modèle gpt-4o). Ensuite, nous transmettrons l'invite dans le champ des messages avec un rôle "utilisateur", indiquant qu'il s'agit d'une entrée utilisateur. Après avoir fait la demande, nous utilisons wait pour obtenir la réponse et appelons .json() pour l'analyser.

    <script>
       var esriConfig = {
         apiKey: "yourKey"
       };
    </script>

Enfin, nous utilisons arcgisMap.popup.open() pour afficher une popup à l'emplacement cliqué. La longitude et la latitude sont définies à partir de params.location, et le titre est celui que vous choisissez. Le contenu est défini sur le texte généré par l'IA à partir de choix[0].message.content, affichant le fait sur la carte.

    <arcgis-map basemap="arcgis/topographic" center="-77.02, 38.89" zoom="13">
      <arcgis-zoom position="top-left"></arcgis-zoom>
    </arcgis-map>

Application finale en action

Une fois tout configuré, cette application permet désormais aux utilisateurs de cliquer n'importe où sur la carte. En fonction de leur clic, il envoie les coordonnées à l'API OpenAI. L'API génère un fait pertinent sur cet emplacement, qui est ensuite affiché dans une fenêtre contextuelle sur la carte. Mais ne vous arrêtez pas là : amusez-vous avec ! Vous pouvez facilement modifier l'invite envoyée à OpenAI. Par exemple, vous pouvez demander un fait effrayant ?, un fait drôle ?, ou même lui demander d'inclure des emojis ! ?

Pour votre référence, voici un CodePen avec le code complet.

Conclusion

En suivant ces étapes, nous avons réussi à créer une application de cartographie alimentée par l'IA. Voici un bref récapitulatif de ce que nous avons fait :

• Configurez la carte à l'aide du SDK ArcGIS Maps pour les composants Web JavaScript via CDN.

• Utilisation de l'API OpenAI pour générer du contenu dynamique basé sur les emplacements cliqués.

• Affichage de ce contenu dans une fenêtre contextuelle sur la carte.

Avec cette approche, vous avez constaté à quel point il est facile d'intégrer des outils d'IA et de cartographie dans vos applications Web. L'essentiel à retenir est qu'il faut vraiment un minimum de configuration et de code pour créer des applications puissantes qui combinent les interactions des utilisateurs en temps réel avec les informations de l'IA.

Donc, que vous amélioriez vos projets de cartographie ou que vous exploriez de nouvelles façons d’utiliser l’IA, j’espère vous avoir inspiré aujourd’hui. J’aimerais voir toutes vos futures créations, alors partagez-les ici ou avec moi sur mes réseaux sociaux. J'adorerais voir votre travail !

---

Cet article a été rédigé par Courtney Yatteau, Developer Advocate chez Esri. Les opinions exprimées dans cet article sont uniquement celles de Courtney et ne représentent pas nécessairement les points de vue, les stratégies ou les opinions de son employeur. Si vous avez des retours, n'hésitez pas à liker et/ou commenter. De plus, si vous avez des questions ou des commentaires que vous préférez envoyer en privé, vous pouvez contacter Courtney via LinkedIn, X, Bluesky, ou par e-mail. Si vous envisagez de changer de carrière, si vous cherchez à vous lancer dans la technologie ou si vous êtes curieux de savoir à quoi ressemble le travail chez Esri, restez à l'écoute des prochaines publications ! Vous pouvez également consulter la page Carrières d’Esri ou cette vidéo pour plus d’informations.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!