How to implement Place Markers on Canvas?

[iklimis]

Hello Forma Team!,

We are currently working on a feature that involves the Forma canvas, and I am looking to implement a feature similar to the place markers seen in Google Maps (akin to pins). The goal is to show a list of markers to the canvas (based on an array of coordinates) and enable interactions such as clicking, removing, and moving them around within the canvas.

Some approaches i took:

1. Using the Render Api and the addMesh() method  (see code below) where I created a shape of a pyramid to represent a specific point in the canvas but the downside is that the object created is not interactable , meaning you cannot click on it and get an event it is a hustle to create the shape of a map marker. Also the canvas gets cleaned when exiting the extension.
   
   

      const geometryData = {
        position: new Float32Array([
          -5, -5, 0,// triangle 1 (0,1,2)
          5, -5, 0,
          5, 5, 0,
          ....
        ]),
        color,
      }

      if (point && point.x && point.y) {
        const res = await Forma.render.addMesh({
          geometryData,
          transform: [
            1, 0, 0, 0,
            0, 1, 0, 0,
            0, 0, 1, 0,
            point.x, point.y, elevation + 20, 1
          ]
        });
      }​

2.  Uploading a GLB as library item and use it inside the canvas. This I have not managed to implement successfully .
I am uploading a 3D model of a marker using the integrateElements.uploadFile() method, the file gets uploaded successfully , but I have not managed to successfully display the uploaded GLB file as a marker on the canvas.Attempts to use createElementHierarchy() to integrate the library item have not yielded visible results on the canvas.

Given these attempts, I would greatly appreciate your insights on the approaches I've taken

Are there improvements or alternative methods you would recommend?

Thanks you kindly

Giannis

[Paul.KnokeYUP67]

private async createElementHierarchyInForma(projectId: string, fileId: string, name: string, coordinates: [number,number][]): Promise<string> {
    
   const geom: CreateElementHierarchy.Geometry.Glb = {
      type: "File",
      format: "glb",
      s3Id: fileId,
    };

    const element: CreateElementHierarchy.Element = {
      id: "0000",
      children: [],
      properties: {
        geometry: geom,
        name,
        category: "buildings" // e.g. site_limit / constraints
      },
    };

    const scalingElement: CreateElementHierarchy.Element = {
      id: "root",
      children: [
        {
          id: element.id,
          transform: this.createTransform(coordinates)
        },
      ],
    };

    const elementHierarchy: CreateElementHierarchy = {
      rootElement: scalingElement.id,
      elements: { [scalingElement.id]: scalingElement, [element.id]: element }
    };

    const { urn } = await Forma.integrateElements.createElementHierarchy( {
      authcontext: projectId,
      data: elementHierarchy,
    });
  
    return urn;
  }

The Transform is a standard 4x4 Matrix. You can also look it up in the SDK.

[iklimis]

@Paul.KnokeYUP67 

Hey Paul thanks for your reply 

Is there a way to access the file Id ? Meaning if the file was uploaded successfully in the past and the etension starts how do I know the fileId so i can use it in the following code? 

    const geom: CreateElementHierarchy.Geometry.Glb = {
       type: "File",
       format: "glb",
       s3Id: fileId,
     };

Thanks a lot
Giannis

[Paul.KnokeYUP67]

The SDK states that: Files stored in the integrate file storage can only be retrieved in relation to an element.