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