Skip to main content

Intégration avancée

Bêta :

L’intégration avancée est disponible en version bêta. Si vous rencontrez des problèmes avec une fonctionnalité bêta, merci de partager vos commentaires sur le site Esri Community.

Bien que cela soit peu probable, des modifications apportées aux composants internes d’ArcGIS StoryMaps peuvent impacter ou endommager votre code personnalisé. Veillez à limiter vos personnalisations aux fonctionnalités essentielles et aux remplacements de style.

L’intégration avancée est disponible pour les récits, les briefings et les collections.

Les développeurs Web peuvent utiliser l’intégration avancée pour incorporer un élément StoryMaps ArcGIS dans votre site Web et le partager via un lien personnalisé sur votre domaine Web, tel que https://www.my-organization.gov/annual-report. Elle vous permet également de modifier l’apparence d’un élément ArcGIS StoryMaps et d’ajouter des fonctions personnalisées via HTML, CSS et JavaScript.

L’intégration avancée est réalisée à l’aide de balises <script> permettant de traiter le contenu d’un élément ArcGIS StoryMaps comme faisant partie de la page Web hôte. Cela permet de mieux contrôler le style du contenu et élimine les barres de défilement superflues qui peuvent être présentes en cas d’utilisation de l’intégration standard avec un <iframe>. Le code de l’application ArcGIS StoryMaps reste hébergé sur les serveurs d’Esri et s’actualise automatiquement pour vous offrir les améliorations les plus récentes et optimales en matière de sécurité et de performance.

Avec l’intégration avancée, vous pouvez réaliser les opérations suivantes :

  • Intégrer un élément ArcGIS StoryMaps dans une URL spécifique sur votre domaine Web

  • Incorporer un élément ArcGIS StoryMaps dans la navigation globale de votre site Web en utilisant l’en-tête et le pied de page du site Web standard de votre organisation

  • Éviter les multiples barres de défilement lorsque vous intégrez du contenu ArcGIS StoryMaps dans votre site Web

  • Utiliser vos propres polices

  • Appliquer des styles personnalisés aux images, hyperliens, boutons et autres éléments de contenu

  • Ajouter des éléments personnalisés, comme un écran d’accueil indiquant le chargement de la page ou un volet extensible qui permet aux utilisateurs d’envoyer des questions ou des commentaires

  • Élaborer de nouvelles expériences utilisateur, comme un formulaire qui demande au lecteur d’entrer son code postal, puis qui accède à la localisation indiquée sur une carte

  • Suivre l’implication des lecteurs grâce à votre service d’analyse préféré

Conseil :

Pour plus d’informations et d’exemples, consultez les exemples de développement ArcGIS StoryMaps sur GitHub.

Activer l’intégration avancée

Procédez comme suit pour activer l’intégration avancée :

  1. Dans le générateur, cliquez sur le bouton ****More (Plus)⋯ dans l’en-tête et sélectionnez Settings (Paramètres).

  2. Dans l’onglet Advanced (Avancé), cliquez sur Enable advanced embedding (Activer l’intégration avancée).

  3. Dans Allowed domains (Domaines autorisés), saisissez le nom d’un domaine sur lequel vous prévoyez d’intégrer l’élément ArcGIS StoryMaps, par exemple www.example.com. N’incluez pas de protocole ou de numéro de port.

  4. Cliquez sur Add (Ajouter).

  5. Si nécessaire, répétez l’action pour ajouter d’autres domaines.

  6. Publiez l’élément ArcGIS StoryMaps.

Important :

Pour intégrer un élément ArcGIS StoryMaps sur une autre page Web, il doit être partagé avec tout le monde.

Copier l’extrait de code d’intégration

Une fois l’intégration avancée activée et l’élément ArcGIS StoryMaps publié et partagé avec tout le monde, utilisez les étapes suivantes pour obtenir l’extrait de code nécessaire à son intégration.

  1. Modifiez l’élément ArcGIS StoryMaps.

  2. Cliquez sur le bouton More (Plus) ⋯ dans l’en-tête, puis sélectionnez Embed this story (Intégrer ce récit).

  3. Dans le menu déroulant, sélectionnez Script (advanced) (Script [avancé]).

  4. Cliquez sur Copier.

    Le code d’intégration est copié.

Le code d’intégration peut également être obtenu en affichant un élément ArcGIS StoryMaps publié dans le menu Share (Partage) de l’onglet Embed (Intégrer).

L’extrait de code est fourni sous forme de balises <script> similaires à celles présentées ci-dessous. Placez la deuxième balise de script sur la page où vous souhaitez ajouter l’élément ArcGIS StoryMaps.

<script>
  window.storyMapsEmbedConfig = {
    storyId: '[StoryMapItemID]',
    rootNode: '.storymaps-root',
  };
</script>
<script src="https://storymaps.arcgis.com/embed/view"></script>

Ressources supplémentaires

Haut