jpmap_terrain

jpmap_terrain is a front-end project that builds 3D terrain representations in Babylon.js based on elevation data from Geospatial Information Authority of Japan tiles. Implemented in TypeScript, it is distributed as the npm package jpmap-terrain with ESM and type definition files (.d.ts) included (@babylonjs/core is a peerDependency). There are two main public APIs. The first, JpmapTerrain, mounts to any DOM element to embed a 3D terrain viewer, allowing WebGPU/WebGL2 engine selection, specification of latitude, longitude, altitude, azimuth, and elevation angle, camera movement via flyTo, and toggling of compass display. Map types can be switched between standard maps and aerial photographs. The second, JpmapDiorama, is an API that displays terrain as a hand-sized square "diorama", supporting both standard web browsers and WebXR (immersive-ar) sessions, with the ability to enter AR sessions in AR-supported environments. The demo portal includes 17 demos, such as a 3D terrain viewer, timelapse (sun position and shadow animation), zoom loop, Mt. Fuji summit orbit, polygon/circle API verification, distance measurement, QGroundControl .plan file viewer, GPX viewer (with statistics and elevation graphs), 3D model placement, avatar animation, Boids crowd simulation, flight demo, Artillery battle game using Havok physics, globe terrain, and diorama displays. The technology stack consists of TypeScript, Babylon.js, Vite (for demos), tsdown (for library building), Playwright (Visual Regression Test), and Vitest (unit tests). The development server starts with hot reloading, and a demo site distribution configuration using Docker/Nginx is also provided. URL parameters allow engine switching, map type, 2D/3D display mode, and camera position specification using a Google Maps compatible latitude/longitude path format. The license is Apache-2.0.