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;