How to set up Federated Model View

Overview

This page describes the steps involved in setting up a Federated Model View.

How to set up a Federated Model View

The main steps in setting up a federated view are:

1. Configure federation type

2. Configure GIS and Federated Mode (for multiple models on map)

3. Manage camera when GIS and View3D Are both enabled

4. Render Federated Viewer

Step 1: Configure fedaration type

Set {{defaultFederationType}} to load all workspace models. Refer to sample code below.

modelComposition: {
  defaultFederationType: "Project",
  initial: {
    Architectural: true,
    Structural: false,
    Mechanical: false,
    Electrical: false,
    Plumbing: false,
    FireProtection: false,
    Infrastructural: false,
    default: false
  },
  quality: 'high'
}

For a single model, use default or "SingleModel" and pass {{model}} and {{modelVersionId}}.

Step 2 Configure GIS and Federated Mode (for multiple models on map)

When showing multiple models on the map, enable GIS and set federated mode. Refer to sample code below.

gis: {
  enable: true,
  token: "<your-mapbox-token>",
  federatedMode: EvmUtils.EvmFederatedMode.Outline,  // or Dynamic, Markers
  primaryModelId: "<reference-model-id>",            // optional
  showMapMarkers: true,
  onFederatedModeChanged: (mode) => console.log('Federated mode:', mode),
  onReferenceModelChanged: (modelId) => console.log('Reference model:', modelId)
}

Step 3: Manage camera when GIS and View3D are both enabled

The camera must be managed centrally by IafViewer via proxy APIs. Avoid direct {{mapbox.setCenter()}} or View3D camera calls to prevent desynchronization.

Refer to sample code below.

view3d: {
  enable: true,
  showToolbar: false,
  onCameraUpdate: {
    delayInMs: 300,
    callback: (camera) => { /* sync to external state if needed */ }
  }
}

Step 4: Render Federated Viewer

<IafViewerDBM
  {...viewerProps}
  model={undefined}
  title="Federated Workspace"
/>

With Project federation type, omit {{model}} (or pass it to set primary) so all workspace models load. With SingleModel, pass {{model}} and {{modelVersionId}}.

Complete example

import React from 'react';
import IafViewerDBM from '@dtplatform/iaf-viewer';
import EvmUtils from '@dtplatform/iaf-viewer/src/common/evmUtils';

function FederatedProjectViewer({ workspaceId }) {
  const viewerProps = {
    serverUri: 'https://api.invicara.com/',
    modelComposition: {
      defaultFederationType: "Project",
      initial: {
        Architectural: true,
        Structural: false,
        Mechanical: false,
        Electrical: false,
        Plumbing: false,
        FireProtection: false,
        Infrastructural: false,
        default: false
      },
      quality: 'high'
    },
    view3d: {
      enable: true,
      showToolbar: false,
      onCameraUpdate: {
        delayInMs: 300,
        callback: (camera) => { /* optional: sync to state */ }
      }
    },
    view2d: {
      enable: true
    },
    gis: {
      enable: true,
      token: process.env.MAPBOX_TOKEN,
      federatedMode: EvmUtils.EvmFederatedMode.Outline,
      primaryModelId: undefined,
      showMapMarkers: true,
      onFederatedModeChanged: (mode) => console.log('Federated mode:', mode),
      onReferenceModelChanged: (modelId) => console.log('Reference model:', modelId)
    },
    enablePersistence: false
  };
  return (
    <div style={{ width: '100%', height: '100%' }}>
      <IafViewerDBM
        {...viewerProps}
        model={undefined}
        title="Federated Workspace"
      />
    </div>
  );
}

export default FederatedProjectViewer;