<aside> 🆕 This feature was introduced in xeokit-sdk v2.2

</aside>

<aside> ⚠️ Although CityJSONLoaderPlugin is the most convenient way to view CityJSON with xeokit, we recommend using XKTLoaderPlugin for viewing large CityJSON models in production. Once you've converted your CityJSON model to xeokit's native XKT format, XKTLoaderPlugin can load it much more rapidly. For more info, see Viewing a CityJSON Model with XKTLoaderPlugin.

</aside>

Introduction

CityJSON is a JSON-based encoding for a subset of the OGC CityGML data model (version 2.0.0), and is now published as an OGC community standard.

In this mini-tutorial, we'll use a xeokit Viewer with a CityJSONLoaderPlugin to view a CityJSON 1.0 file in the browser.

For our CityJSON file, we'll use a LoD-3 model of a railway line, which is one of the sample datasets provided at here. When that's loaded, it will look like the example below.

Example

<aside> ▶️ Run this example

</aside>

import {Viewer, CityJSONLoaderPlugin} from "<https://cdn.jsdelivr.net/npm/@xeokit/xeokit-sdk@1/dist/xeokit-sdk.es.min.js>";

const viewer = new Viewer({
    canvasId: "myCanvas",
    transparent: true
});

viewer.camera.eye = [-2.56, 8.38, 8.27];
viewer.camera.look = [13.44, 3.31, -14.83];
viewer.camera.up = [0.10, 0.98, -0.14];

const cityJSONLoader = new CityJSONLoaderPlugin(viewer);

const model = cityJSONLoader.load({ 
    src: "./LoD3_Railway.json",
    rotation: [-90, 0, 0]
});