CesiumJS

CesiumJS is an open-source JavaScript library for 3D globes and maps. It is mostly used in data science and aerospace to show time-dynamic, high-precision 3D geospatial data.

CesiumJS does not read Mapbox/MapLibre style sheets natively, so the Maptoolkit community vector tiles are drawn onto a Cesium imagery layer with a vector-tile imagery provider such as cesium-mvt-imagery-provider. No API key is required.

Basic Setup

The vector tile endpoint is published in the community style under sources as a TileJSON URL. Fetch the style, resolve that TileJSON, then add an imagery provider that renders the tiles and style the features yourself.

CDN

(async () => {
    // No Ion account needed: disable the default Bing/World Terrain layers.
    const viewer = new Cesium.Viewer('cesiumContainer', {
      baseLayer: false,
      baseLayerPicker: false,
      geocoder: false,
      terrainProvider: new Cesium.EllipsoidTerrainProvider(),
    });
    // The community style references its vector tiles in `sources` as a TileJSON URL.
    const style = await fetch('https://styles.maptoolkit.org/summer.json').then((r) => r.json());
    const tileJson = await fetch(style.sources.mtk.url).then((r) => r.json());
    const tileUrl = tileJson.tiles[0]; // {z}/{x}/{y}.mvt template
    const provider = new CesiumMVTImageryProvider.default({
      urlTemplate: tileUrl,
      layerName: 'water,landuse,building,road',
      maximumLevel: 15,
      style: (feature) => {
        // Return a per-feature style based on feature.properties.
        return { fillStyle: '#dcdcdc', strokeStyle: '#808080', lineWidth: 0.5 };
      },
    });
    viewer.imageryLayers.addImageryProvider(provider);
    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(16.37, 48.21, 80000),
    });
  })();

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.143/Build/Cesium/Cesium.js"></script>
  <link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.143/Build/Cesium/Widgets/widgets.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cesium-mvt-imagery-provider.umd.js"></script>
  <style>
    body {
      margin: 0;
    }
    #cesiumContainer {
      height: 100vh;
    }
    #maptoolkit-attribution {
      position: absolute;
      height: 24px;
      bottom: 8px;
      left: 8px;
      z-index: 1000;
    }
    #maptoolkit-copyright {
      position: absolute;
      right: 8px;
      bottom: 8px;
      z-index: 1000;
      font: 11px/1.4 system-ui, sans-serif;
      background: rgba(255, 255, 255, 0.7);
      padding: 2px 6px;
    }
  </style>
  <title>CesiumJS</title>
</head>

<body>
<div id="cesiumContainer"></div>
<img id="maptoolkit-attribution" src="https://www.maptoolkit.org/assets/maptoolkit-attribution.png" alt="Maptoolkit">
<div id="maptoolkit-copyright">
  © <a href="https://www.maptoolkit.com/copyright/">Maptoolkit</a>
  © <a href="https://www.openstreetmap.org/copyright">OSM</a>
</div>
<script>
  (async () => {
    // No Ion account needed: disable the default Bing/World Terrain layers.
    const viewer = new Cesium.Viewer('cesiumContainer', {
      baseLayer: false,
      baseLayerPicker: false,
      geocoder: false,
      terrainProvider: new Cesium.EllipsoidTerrainProvider(),
    });
    // The community style references its vector tiles in `sources` as a TileJSON URL.
    const style = await fetch('https://styles.maptoolkit.org/summer.json').then((r) => r.json());
    const tileJson = await fetch(style.sources.mtk.url).then((r) => r.json());
    const tileUrl = tileJson.tiles[0]; // {z}/{x}/{y}.mvt template
    const provider = new CesiumMVTImageryProvider.default({
      urlTemplate: tileUrl,
      layerName: 'water,landuse,building,road',
      maximumLevel: 15,
      style: (feature) => {
        // Return a per-feature style based on feature.properties.
        return { fillStyle: '#dcdcdc', strokeStyle: '#808080', lineWidth: 0.5 };
      },
    });
    viewer.imageryLayers.addImageryProvider(provider);
    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(16.37, 48.21, 80000),
    });
  })();
</script>
</body>

</html>

npm

npm install cesium cesium-mvt-imagery-provider

CesiumJS also needs window.CESIUM_BASE_URL set and its static assets (Workers, Assets, Widgets, ThirdParty) copied into your build - this part is bundler-specific (Vite, Webpack, …). See the official cesium-webpack-example for a working setup. Everything else is the same as the CDN example.

CesiumJS draws the vector features as imagery; it does not apply the Maptoolkit cartography. If you only need a flat, fully-styled basemap, MapLibre GL JS renders the style directly and also supports a 3D globe projection.

Attribution

Keep the Maptoolkit logo and the © Maptoolkit © Openstreetmap copyright line visible. CesiumJS has no attribution control wired up for community vector tiles here, so the example above overlays the official logo image and copyright text directly. See Quick Start - Add attribution for the full requirements.