How to create and load bookmark?

/*
 * NOTE for .js: The file you are vieweing has been compiled via Tutorial1TypeScript/app.ts.
 * If you do not want to use TypeScript, unload (or delete) the project or delete the app.ts file.
 */

window.onload = () => {

   // Create the options object for the DocumentViewer
   var createOptions: lt.Documents.UI.DocumentViewerCreateOptions = new lt.Documents.UI.DocumentViewerCreateOptions();

   // We will choose to use Elements Mode for this example, but you can disable it
   // Elements Mode can be styled with CSS - see the HTML for information
   createOptions.viewCreateOptions.useElements = true;
   createOptions.thumbnailsCreateOptions.useElements = true;

   // Set thumbnailsContainer to #thumbnails
   createOptions.thumbnailsContainer = document.getElementById("thumbnails");
   // Set viewContainer to #documentViewer
   createOptions.viewContainer = document.getElementById("documentViewer");

   createOptions.bookmarksContainer = document.getElementById("bookmarks");

   // Create the document viewer
   this.documentViewer = lt.Documents.UI.DocumentViewerFactory.createDocumentViewer(createOptions);

   // Set interactive mode to Pan / Zoom
   this.documentViewer.commands.run(lt.Documents.UI.DocumentViewerCommands.interactivePanZoom);

   // We prefer SVG viewing over Image viewing for this example
   this.documentViewer.view.preferredItemType = lt.Documents.UI.DocumentViewerItemType.svg;
   // To use Image: lt.Documents.UI.DocumentViewerItemType.image;

   // Change our thumbnails to be centered horizontally in the provided container
   //this.documentViewer.thumbnails.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center;

   // Before we call the service, we need to explain where it is ("localhost:19000/api", for example):
   lt.Documents.DocumentFactory.serviceHost = "http://localhost:19000"; // or wherever your host is
   lt.Documents.DocumentFactory.servicePath = ""; // the path to the root of the service, which is nothing for this example
   lt.Documents.DocumentFactory.serviceApiPath = "api"; // Routing occurs at "/api", unless you change the routing in the DocumentsService

   /* A quick example with a different service location:
    * > client: http://localhost:123
    * > service: https://www.leadtools.com/path/to/service
    * > service routing namespace: /api
    * 
    * Set these properties with these values:
    * serviceHost = "https://www.leadtools.com";
    * servicePath = "path/to/service";
    * serviceApiPath = "api"
    */

   // Load a PDF document
   var url = "https://demo.leadtools.com/images/pdf/leadtools.pdf";

   // Call the "LoadFromUri" and pass success and failure callbacks to the promise
   lt.Documents.DocumentFactory.loadFromUri(url, null)
      .done((document) => {
         // Set the document in the viewer
         showStructure(document);
         this.documentViewer.setDocument(document);
      })
      .fail((jqXHR, statusText, errorThrown) => {
         // Get more information from LEADTOOLS
         var serviceError = lt.Documents.ServiceError.parseError(jqXHR, statusText, errorThrown);
         lt.LTHelper.log(serviceError);

         // Show an alert about what the issue is
         var lines = [];
         lines.push("Document Viewer Error:");
         lines.push(serviceError.message);
         lines.push(serviceError.detail);
         lines.push("See console for details.")
         alert(lines.join("\n"));
      });
}

function showStructure(doc) {
   if (!doc.isStructureSupported) {
      // This document does not support table of content or links 
      return;
   }
   if (doc.structure.isParsed) {
      // Show them 
      var bookmarks = doc.structure.bookmarks;
      for (var i = 0; i < bookmarks.length; i++) {
         this.showBookmark(bookmarks[i], "");
      }
   }
   else {
      // We support it, but we dont have it parsed yet, do it now 
      doc.structure.parse()
         .done(function (doc) {
            console.log("Document structure was parsed succesfully");
            // Show the structure, this time doc.isStructureParsed is true and will not call 
            // the command again 
            showStructure(doc);
         });
   }
}

function showBookmark(bookmark, indent) {
   console.log(indent + "page:" + bookmark.target.pageNumber + " title '" + bookmark.title + "'");
   for (var i = 0; i < bookmark.children.length; i++) {
      showBookmark(bookmark.children[i], indent + "  ");
   }
}

private populateBookmarks(structure: lt.Documents.DocumentStructure): void {

            this.clearBookmarks();

            var list = document.getElementById("bookmarksTree");
            if (list) {

               if (structure != null && structure.bookmarks != null) {
                  var bookmarks = new Array<lt.Documents.DocumentBookmark>(structure.bookmarks.length);
                  for (var i = 0; i < structure.bookmarks.length; i++)
                     bookmarks[i] = structure.bookmarks[i];

                  this.addBookmarks(bookmarks, list);
               }
            }
         }

private addBookmarks(bookmarks: lt.Documents.DocumentBookmark[], baseElement: HTMLElement): void {
            if (bookmarks == null)
               return;

            for (var i = 0; i < bookmarks.length; i++) {
               var titleElement: HTMLElement = document.createElement("li");

               if (i + 1 == bookmarks.length)
                  lt.LTHelper.addClass(titleElement, "last");

               // If bookmark has children, add collapse/expand checkbox
               if (bookmarks[i].children.length > 0) {
                  lt.LTHelper.addClass(titleElement, "hasChildren");
                  var checkbox = document.createElement("input");
                  checkbox.type = "checkbox";
                  // Create unique id for the checkbox
                  checkbox.id = (bookmarks[i].title + Date.now().toString()).replace(/\s/g, '');
                  // Create checkbox label
                  var checkboxLabel = document.createElement("label");
                  checkboxLabel.setAttribute("for", checkbox.id);
                  titleElement.appendChild(checkbox);
                  titleElement.appendChild(checkboxLabel);
               }

               // Create title span
               var titleSpan = document.createElement("span");
               titleSpan.textContent = bookmarks[i].title;
               lt.LTHelper.addClass(titleSpan, "bookmark");
               // attach current bookmark as data to the title span
               $(titleSpan).data("bookmark", bookmarks[i])
               titleElement.appendChild(titleSpan);
               baseElement.appendChild(titleElement);
               // handle click event, to go to the selected bookmark
               // using the attached data
               titleSpan.onclick = (e: MouseEvent) => this.titleSpan_Click(e);

               var parentElement = titleElement;
               if (bookmarks[i].children.length > 0) {
                  parentElement = <HTMLElement>document.createElement("ul");
                  titleElement.appendChild(parentElement);
               }
               this.addBookmarks(bookmarks[i].children, parentElement);
            }
         }

private titleSpan_Click(e: MouseEvent): void {
            // Get attached data
            var bookmark = <lt.Documents.DocumentBookmark>$(e.currentTarget).data("bookmark");
            this._documentViewer.gotoBookmark(bookmark);
         }