Evening over Mt. Fuji and Lake Kawaguchi

Sunset on Mt. Fuji with a reflective water surface on Lake Kawaguchi

evening_fuji_lake.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Evening over Mt. Fuji and Lake Kawaguchi</title>
  <meta property="og:description" content="Sunset on Mt. Fuji with a reflective water surface on Lake Kawaguchi" />
  <script src="./v0.10.6/mapray.min.js"></script>
  <script src="./v0.10.6/maprayui.min.js"></script>
  <link rel="stylesheet" href="./v0.10.6/mapray.css">
  <style>
    body {margin: 0; padding: 0;}
    html, body, div#mapray-container { height: 100%; }
  </style>
</head>

<body>
  <div id="mapray-container"></div>
</body>
</html>

<script>
  const cloudApi = new mapray.cloud.CloudApiV2({
    tokenType: mapray.cloud.CloudApi.TokenType.ACCESS_TOKEN,
    token: "<YOUR_MAPRAY_ACCESS_TOKEN>"
  });

  const uiviewer = new maprayui.StandardUIViewer( "mapray-container", {
    dem_provider: new mapray.StandardDemProvider( cloudApi.getDefaultDemAsResource() ),
    atmosphere: new mapray.Atmosphere(),
    sun_visualizer: new mapray.SunVisualizer( 32 )
  } );

  // Above the north-east corner of Lake Kawaguchi, facing south-west so that
  // Mt. Fuji (bearing 194 deg) and the setting sun (bearing 256 deg) are both
  // in frame, with the lake between them.
  //
  // setLookAtPosition() only turns the camera horizontally - it leaves the
  // pitch at 90 (level) whatever height the target has - so the angles are set
  // directly here. Note that yaw runs counter-clockwise: yaw = 360 - bearing.
  uiviewer.setCameraPosition({ longitude: 138.7790, latitude: 35.5245, height: 1020 });
  uiviewer.setCameraAngle({ roll: 0, pitch: 94, yaw: 143 });   // bearing 217 deg
  // 72 deg is wide enough to hold both subjects. Going much wider makes the
  // terrain LOD coarse enough that Mt. Fuji is flattened out.
  uiviewer.setCameraParameter({ fov: 72 });

  // Lake Kawaguchi. The water surface sits at 833 m, so the polygon is placed
  // in absolute altitude mode. Reflection is always on, so no options are needed.
  const LAKE_SURFACE_ALTITUDE = 833.0;

  const visualizer = new mapray.WaterPolygonEntityVisualizer();

  mapray.WaterPolygonEntity.loadWaterPolygonGeoJSON(
    uiviewer.viewer.scene,
    [ "../data/geojson/lake_kawaguchi.geojson" ],
    {
      transform: url => ( { url, credentials: mapray.CredentialMode.SAME_ORIGIN } ),
      altitude_mode: mapray.AltitudeMode.ABSOLUTE,
      height: LAKE_SURFACE_ALTITUDE,
      visualizer,
    }
  );

  // Sun direction in GOCS. This one is the sun a few minutes before it sets on
  // 2026-10-20 (16:52 JST): bearing 256 deg, elevation 1.5 deg. Mt. Fuji turns
  // into a silhouette and the low sun lays a glitter path across the lake.
  uiviewer.viewer.sun.setSunDirection( [ 0.518203, 0.836056, -0.180208 ] );
</script>

Info

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