Installation

Objectif

Afficher un premier viewer en partant de zéro, avec les identifiants nécessaires et une page HTML fonctionnelle.

Prérequis

Un navigateur moderne.
Une page servie en http:// ou https:// (pas de file://).
Un token et un code viewer (créés via GeoViewer Admin).

Étapes

1) Créer un token et un code viewer (GeoViewer Admin)

Rendez-vous dans GeoViewer Admin et créez:

un token (clé d’accès aux services)
un code viewer (identifiant du viewer à instancier)

Selon l’environnement, vous trouverez généralement une entrée dédiée (ex: /5.x/ ou /4.x/).

Exemples d’URL (à adapter à votre environnement):

https://geoservices.wallonie.be/geovieweradmin/
https://geoservices.wallonie.be/geovieweradmin/5.x/

2) Préparer une page HTML servie en HTTP

Geoviewer doit être chargé depuis une page servie par un serveur web.

Exemple rapide:

npx http-server . -p 8080

3) Charger le viewer via le script d’API

Ajoutez le script geoviewer-api en injectant votre token et votre code viewer dans l’URL:

<script src="https://geoservices.wallonie.be/geoviewer-api/api/<TOKEN>/<CODE_VIEWER>"></script>

4) Insérer le Web Component

Le script enregistre le Web Component. Vous pouvez l’ajouter directement dans le DOM:

<geoviewer-esri-element></geoviewer-esri-element>

Ajoutez aussi un style minimum pour que le viewer prenne toute la place:

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

Typings TypeScript (recommandé)

Même si l’intégration se fait via <script>, des typings TypeScript peuvent être utilisés côté applicatif.

Dépendance prévue (typings uniquement):

pnpm add -D @spw/geoviewer-typings

Exemple d’usage:

import type { TopicEvent } from '@spw/geoviewer-typings';

function onTopic(e: TopicEvent) {
    console.log(e.type);
}