Premier viewer

Objectif

Afficher un viewer fonctionnel en intégrant le script geoviewer-api, puis ajouter un minimum de code applicatif.

Avant de commencer: token + code viewer

Pour instancier un viewer, vous avez besoin de:

un token
un code viewer

Ils se créent via GeoViewer Admin. Si ce n’est pas fait, suivez d’abord: Installation.

Exemple minimal (HTML)

Créez un fichier index.html (ou une page équivalente), servi par HTTP:

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Mon premier GeoViewer</title>

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

        <!-- Charge le viewer correspondant à votre token et à votre code viewer -->
        <script src="https://geoservices.wallonie.be/geoviewer-api/api/<TOKEN>/<CODE_VIEWER>"></script>
    </head>

    <body>
        <geoviewer-esri-element></geoviewer-esri-element>
    </body>
</html>

Ajouter du code applicatif (événements `ready` et `topic`)

Le Web Component émet notamment:

ready: le viewer est initialisé (vous pouvez accéder à viewerService)
topic: un événement métier est publié (interaction utilisateur, widget, etc.)

Exemple:

<script type="module">
    const el = document.querySelector('geoviewer-esri-element');

    // Optionnel: utile pour les tests automatisés (data-testid, etc.)
    el.activateDataTestIds = true;

    el.addEventListener('ready', (event) => {
        // Accès aux managers via viewerService
        const viewerService = event.detail;
        console.log('Viewer prêt', viewerService);

        // Exemple: enregistrer un widget custom après initialisation
        // viewerService.widgetManager.registry.registerWidget('mon/widget', maFactoryWidget);
    });

    el.addEventListener('topic', (event) => {
        // event.detail est typé via les typings (voir page Installation)
        console.log('Topic event:', event.detail);
    });
</script>

Points d’attention

La page doit être servie en http:// ou https:// (pas de file://).
En cas d’écran vide:
- vérifiez la console (token expiré, accès refusé, erreur réseau),
- vérifiez que le code viewer existe et correspond au viewer attendu.

Étape suivante: piloter le viewer depuis votre application

Si votre prochain besoin est d’interagir avec le viewer en JavaScript, commencez par ce parcours: