Skip to content
GeoViewer 5

Events API

Canaux d’émission

Le viewer expose les événements via:

  • callback ontopic à l’instanciation
  • événement DOM topic (CustomEvent) sur le custom element

Événements DOM du custom element:

  • topic: event.detail contient un TopicEvent
  • ready: event.detail contient viewerService (actuellement émis côté Esri)

Contrat TopicEvent (source runtime)

Le type TopicEvent est défini dans packages/common/src/lib/api/managers/topic/topic.model.ts.

1. Événements widget

type: 'widget-activated'

  • widgetId: string
  • widgetClass: string

type: 'widget-deactivated'

  • widgetId: string
  • widgetClass: string

2. Événement fond de plan

type: 'BasemapChooser-select'

  • basemap: ApiBasemap
  • source: 'BasemapChooser' | 'Toc'

3. Événements AddData

type: 'AddData-add-mapService-from-categories'

  • layer: ApiMapService
  • category: string
  • topCategory: string

type: 'AddData-add-mapService-from-populars'

  • layer: ApiMapService
  • source: 'populars' | 'trending'

type: 'AddData-add-mapService-from-catalog'

  • layer: ApiMapService

type: 'AddData-add-mapService-from-url'

  • layer: ApiMapService

type: 'AddData-add-mapService-from-file'

  • layer: ApiMapService
  • uploadType: 'file' | 'url'
  • fileType: 'GeoJSON' | 'SHP' | 'CSV' | 'KML' | 'XLSX' | 'KMZ' | 'GPX' | 'GML'
  • sourceUrl: string | null

type: 'AddData-add-mapService-from-predefined-view'

  • layer: ApiMapService
  • context.id: string | number
  • context.label: I18nData

4. Événements TOC

type: 'Toc-Layer-visibility-toggle'

  • toggle: boolean
  • layer: ApiMapService | ApiSublayer

type: 'Toc-Layer-remove'

  • layer: ApiMapService | ApiSublayer

type: 'Toc-Layer-description-open'

  • layer: ApiMapService

type: 'Toc-Layer-metadata-open'

  • layer: ApiMapService

5. Événement ActionButton (EMIT_EVENT)

Le widget ActionButton publie action.event tel quel. Avec la configuration actuelle (buttonActionTopicEventSchema), le payload est:

  • name: string

Important: cet événement n’a pas de propriété type par défaut.

Paramètres exploitables sur layer

Les événements AddData/TOC transportent un objet runtime (ApiMapService ou ApiSublayer), pas un JSON plat. Pour analytics (GTM/Matomo), sérialisez explicitement un sous-ensemble stable.

Champs généralement exploitables:

  • commun (ApiMapService et ApiSublayer): id, label, visible, opacity, minScale, maxScale
  • map service: type, metadataUrl, description, removable, identifiable, toc.visible, toc.open
  • map service (selon type): url (quand présent)
  • sublayer: mapService.id, mapService.type, mapService.label
  • basemap: id, label, selected, opacity, grayscale, metadataUrl

Exemple GTM/Matomo

geoviewerElement.addEventListener('topic', (evt) => {
    const e = evt.detail;
    window.dataLayer = window.dataLayer || [];


    const layer =
        'layer' in e && e.layer
            ? {
                  id: e.layer.id,
                  label: e.layer.label,
                  visible: e.layer.visible,
                  opacity: e.layer.opacity,
                  type: 'type' in e.layer ? e.layer.type : e.layer.mapService?.type,
                  serviceId: 'mapService' in e.layer ? e.layer.mapService?.id : e.layer.id,
              }
            : undefined;


    const basemap =
        'basemap' in e
            ? {
                  id: e.basemap.id,
                  label: e.basemap.label,
                  opacity: e.basemap.opacity,
                  grayscale: e.basemap.grayscale,
                  metadataUrl: e.basemap.metadataUrl,
              }
            : undefined;


    window.dataLayer.push({
        event: 'geoviewer_topic',
        topic_type: e.type ?? 'action-button-custom',
        topic_name: e.name ?? null,
        category: e.category ?? null,
        top_category: e.topCategory ?? null,
        upload_type: e.uploadType ?? null,
        file_type: e.fileType ?? null,
        source_url: e.sourceUrl ?? null,
        add_data_source: e.source ?? null,
        predefined_view_id: e.context?.id ?? null,
        toggle: e.toggle ?? null,
        layer,
        basemap,
    });
});

Références code

  • packages/common/src/lib/api/managers/topic/topic.model.ts
  • packages/common/src/lib/widgets/add-data/add-data.topic.ts
  • packages/common/src/lib/widgets/basemap-chooser/basemap-chooser.topic.ts
  • packages/common/src/lib/widgets/toc/toc.topic.ts
  • packages/common/src/lib/widgets/action-button/action-button.config.ts
  • packages/common/src/lib/api/managers/widget/widget-reference.svelte.ts
  • packages/esri/src/api/EsriViewer.svelte
  • packages/ol/src/api/OlViewer.svelte

Aller plus loin