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


<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.



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.


<aside> ▶️ Run this example



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]