Show and hide PLATEAU scenes

Showing PLATEAU Taito buildings and roads as two scenes and switching each with setVisibility.

plateau_overlay_layers.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Show and hide PLATEAU scenes</title>
  <meta property="og:description" content="Showing PLATEAU Taito buildings and roads as two scenes and switching each with setVisibility." />
  <script src="./v0.10.7/mapray.min.js"></script>
  <script src="./v0.10.7/maprayui.min.js"></script>
  <link rel="stylesheet" href="./v0.10.7/mapray.css">
  <style>
    body {margin: 0; padding: 0;}
    html, body, div#mapray-container { height: 100%; }
    .map-overlay {
        font: 12px/20px "Robot", sans-serif;
        position: absolute;
        width: 300px;
        top: 0;
        left: 0;
        padding: 10px;
    }
    .map-overlay .map-overlay-inner {
        background-color: #fff;
        color: #000;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        border-radius: 3px;
        padding: 10px;
        margin-bottom: 10px;
    }
    .map-overlay-inner fieldset {
        border: none;
        padding: 0;
        margin: 0 0 10px;
    }
    .map-overlay-inner fieldset:last-child {
        margin: 0;
    }
    .map-overlay-inner label {
        display: block;
        font-weight: bold;
        margin: 0 0 5px;
    }
    .map-overlay-inner select, .map-overlay-inner input[type=range] {
        width: 100%;
    }
  </style>
</head>
<body>
<div id="mapray-container"></div>
<div class="map-overlay top">
    <div class="map-overlay-inner">
        <fieldset>
            <label>Layers</label>
            <div id="layer_list"></div>
        </fieldset>
    </div>
</div>
</body>
</html>
<script>
  // Two Taito scenes. setVisibility shows and hides a scene without removing it.
  const LAYERS = [
      { label: "Buildings", color: null,      url: "https://assets.cms.plateau.reearth.io/assets/89/471b74-c5ca-4673-afaa-c194d18b5c8c/13106_taito-ku_city_2025_citygml_1_op_bldg_3dtiles_lod2_no_texture/tileset.json" },
      { label: "Roads",     color: "#444444", url: "https://assets.cms.plateau.reearth.io/assets/fc/5c3d9a-c7df-4a91-9102-f0ef936d8df9/13106_taito-ku_city_2025_citygml_1_op_tran_3dtiles_lod3/tileset.json" },
  ];

  const cloudApi = new mapray.cloud.CloudApiV2({
        tokenType: mapray.cloud.CloudApi.TokenType.ACCESS_TOKEN,
        token: "<YOUR_MAPRAY_ACCESS_TOKEN>"
    });
    // The StandardUIView in the ui package includes mouse-based camera manipulation.
    const uiviewer = new maprayui.StandardUIViewer( "mapray-container", {
        dem_provider: new mapray.StandardDemProvider( cloudApi.getDefaultDemAsResource() )
    } );
  // South of Ueno Station in Tokyo JP
  uiviewer.setCameraPosition({
    longitude: 139.7731,
    latitude: 35.7085,
    height: 120
  });
  // Street in front of Ueno Station
  uiviewer.setLookAtPosition({
    longitude: 139.7745,
    latitude: 35.711,
    height: 5
  });

  const layer_list = document.getElementById( 'layer_list' );

  for ( const layer of LAYERS ) {
      // PLATEAU Taito-ku, OGC 3D Tiles 1.1 (glTF content with EXT_structural_metadata)
      const provider = new mapray.StandardTiles3DProvider({
        url: layer.url
      }, {
        // PLATEAU tiles carry no copyright string, so credit the dataset as the PLATEAU terms of use require (Public Data License 1.0, compatible with CC BY 4.0).
        attributions: [ "出典：「3D都市モデル（Project PLATEAU）台東区（2025年度）」（国土交通省）" ]
      });
      const scene = uiviewer.viewer.b3d_collection.createTiles3DScene( provider, {
          show_attributions: true,
          vertical_offset: -37   // ellipsoidal height to elevation (geoid undulation around Tokyo)
      } );

      // Road tiles have no textures and are a flat gray like the buildings, so the road scene gets a color of its own.
      if ( layer.color ) {
          scene.setStyleColorBlendMode( mapray.Tiles3DScene.StyleColorBlendMode.REPLACE );
          scene.setStyle( mapray.Tiles3DStyle.fromJson( { color: "color('" + layer.color + "')" } ) );
      }

      const row = document.createElement( "label" );
      row.style.fontWeight = "normal";
      const check = document.createElement( "input" );
      check.type = "checkbox";
      check.checked = true;
      // setVisibility() shows and hides a scene without removing it.
      check.addEventListener( 'change', () => scene.setVisibility( check.checked ) );
      row.appendChild( check );
      row.appendChild( document.createTextNode( " " + layer.label ) );
      layer_list.appendChild( row );
  }
</script>

Info

このサンプルコードは、<YOUR_MAPRAY_ACCESS_TOKEN>を、あなたのMapray CloudのアカウントのOrganization Tokenに置き換えるまで、期待通りに動作しません。