Visualizing Google 3D Tiles

export async function fetchSessionAndRootURL(apiKey: string): Promise<{
  rootURL: string,
  sessionID: string
}> {
  const response = await fetch(`https://tile.googleapis.com/v1/3dtiles/root.json?key=${apiKey}`);
  const jsonResponse = await response.json();
  const rootWithSession = "https://tile.googleapis.com" +
                          jsonResponse["root"]["children"][0]["children"][0]["content"]["uri"];
  const rootURL = rootWithSession.split('?')[0];
  const sessionID = rootWithSession.split('=')[1];
  return {
    rootURL,
    sessionID
  };
}

export function createGoogle3DTilesModel(apiKey: string, rootUrl: string, sessionId: string): Promise<OGC3DTilesModel> {
  return OGC3DTilesModel.create(rootUrl,
      {
        requestParameters: {
          "key": apiKey,
          "session": sessionId
        }
      });
}

export function createGoogle3DTilesLayer(google3DTilesModel: OGC3DTilesModel): TileSet3DLayer {
  return new TileSet3DLayer(google3DTilesModel, {
    // Make sure to keep "Google" in the label of the layer
    label: "Google 3D Tiles",
    // keep the qualityFactor low, this dataset does not handle larger quality factors well due to it being so big.
    qualityFactor: 0.125,
    // individual buildings cannot be selected, there is no id property for them included in the data.
    selectable: false,
    // the meshStyle
    meshStyle: {
      // don't add lighting, lighting is included in the textures, so this would lead to strange effects.
      lighting: false,
      // use the culling type as specified in the data, which in this case is backface culling.
      facetCulling: FacetCullingType.BASED_ON_DATA,
    },
    // this tileset has terrain elevation information included, the mesh has the correct elevation where no
    // buildings are present.
    isPartOfTerrain: true,
    // no fading when replacing tiles
    fadingTime: 0,
    // add other setting like isDrapeTarget for example
  });
}

// We need a transparent globe when showing Google 3D Tiles.
map.globeColor = "rgba(0,0,0,0)";

/**
 * Almost all TileSet3DLayerConstructorOptions can be used to create a Google tileset 3D layer,
 * except
 * <ul>
 *   <li>qualityFactor: fixed at 0.125</li>
 *   <li>pointCloudStyle: no pointCloud layer.</li>
 * </ul>
 */
type GoogleTileSet3DLayerConstructorOptions = Omit<TileSet3DLayerConstructorOptions, "pointCloudStyle" | "qualityFactor">;

export interface Google3DTilesLoaderOptions {
  /**
   * Provide the map if you want to automatically
   * <ul>
   *   <li> make the globe transparent (without doing this, terrain intersects with the tiles). </li>
   *   <li> add the above mesh constraint. </li>
   *   <li> make all terrain-draped layers invisible. </li>
   * </ul>
   * These special map conditions will only remain in place as long as the Google tiles layer is visible.
   */
  map?: Map,

  /**
   * Set to true if you want to renew your session when the session expires.
   * <br>
   * From <a href="https://developers.google.com/maps/documentation/tile/3d-tiles"> the Google 3D tiles documentation</a>,
   * we learn that the same session can be used for 3 hours.
   * <br>
   * <i>"The render can make at least three hours of tile requests from a single root tileset request.
   * After reaching this limit, you must make another root tileset request."</i>
   *
   * @default false
   */
  autoRenew?: boolean,

  /**
   * Set to true if you want to keep your session active (through the use of local storage)
   *
   * @default false
   */
  keepSession?: boolean,

  /**
   * Almost all TileSet3DLayerConstructorOptions can be provided here, except for pointCloudStyle and qualityFactor
   * @default {}
   */
  layerConstructorOptions?: GoogleTileSet3DLayerConstructorOptions,
}

export const Google3DTilesLoader = {

  /**
   * Async function to create a TileSet3DLayer for Google 3D Tiles
   * @param googleApiKey your API key
   * @param options
   */
  createLayer: async (googleApiKey: string, options?: Google3DTilesLoaderOptions): Promise<TileSet3DLayer> => {

/**
 * Async function to check the validity of the Google API key
 * @param apiKey your API key
 */
export async function validateGoogleAPIKey(apiKey: string): Promise<{
  valid: boolean,
  message: string
}> {
  const response = await fetch(`https://tile.googleapis.com/v1/3dtiles/root.json?key=${apiKey}`);
  if (response.status !== 200) {
    const errorMsg = (await response.json())["error"]["message"];
    return {valid: false, message: errorMsg};
  }
  return {valid: true, message: "Valid API key"};
}

return OGC3DTilesModel.create(googleInfo.rootUrl,
    {requestParameters: {"key": googleInfo.apiKey, "session": googleInfo.sessionId}})
    .then(model => {
      model.getLogo = function(): string {
        return GoogleLogoUrl;
      };