Skip to content
GeoViewer 5

Web Component via balise `<script>`

Cas d’usage

Cette approche est adaptée quand:

  • vous intégrez Geoviewer dans une page HTML (prototype, portail, CMS),
  • vous ne souhaitez pas (encore) intégrer Geoviewer via un import ESM,
  • vous voulez une intégration robuste et facilement supportable.

Exemple minimal

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


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


        <script src="https://geoservices.wallonie.be/geoviewer-api/api/<TOKEN>/<CODE_VIEWER>"></script>
    </head>
    <body>
        <geoviewer-esri-element></geoviewer-esri-element>
    </body>
</html>

Événements

Vous pouvez réagir à l’initialisation et aux interactions via les événements DOM:

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


    el.addEventListener('ready', (event) => {
        const viewerService = event.detail;
        console.log('Viewer prêt', viewerService);
    });


    el.addEventListener('topic', (event) => {
        console.log('Topic event:', event.detail);
    });
</script>

Aller plus loin