4. Adding Mattertags, customizing disc icons.

//Take info from hotspots.json and add to a new array, matterTags. 
 private addMattertagNode1 = (sdk: any) => {
    let matterTags: any = [];
    hotspots.map((e) => {
      matterTags.push({
        label: e.title,
        description: e.description,
        anchorPosition: {
          x: e.positionX,
          y: e.positionY,
          z: e.positionZ,
        },
        stemVector: { x: e.stemVectorX, y: e.stemVectorY, z: e.stemVectorZ },
        mediaType: e.type,
        mediaSrc: e.url,
        media: {
          type: "mattertag.media." + e.type,
          src: e.url,
        }
      });
      return 0;
    }
    );
    // @ts-ignore 

    //Create the matterTags and add to space.
    sdk.Mattertag.add(matterTags).then(function (mattertagIds) {
      console.log(mattertagIds);
      sdk.Mattertag.getData()
        .then(function (mattertags: any) {

     // After the tags are successfully created, retrieve the tags and update each ones' icons. 
          for (let i = 0; i < matterTags.length; i++) {
            window.matchMedia("(min-width: 768px)").matches ? sdk.Asset.registerTexture(`${mattertags[i].sid}1`, getImage(mattertags[i].label)) : sdk.Mattertag.registerIcon(`${mattertags[i].sid}1`, icon2);
            sdk.Mattertag.editIcon(mattertags[i].sid, `${mattertags[i].sid}1`);
          }

        }).catch(function (error: any) {
          console.log(error)
        });
    })
  };

//Show hotspots.json, the only important inputs are the name, description, type, position, stemVector, and url (if is video type).