CesiumJS

CesiumJS is an open-source JavaScript library for creating world-class 3D globes and maps, primarily utilized in data science and aerospace for high-performance, time-dynamic, and precision-driven 3D geospatial visualization.

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.

Installation

npm install cesium cesium-mvt-imagery-provider

Add the vector basemap

The vector tile endpoint is published in the community style under sources. Read it from the style, then add an imagery provider that renders those tiles and style the features yourself.

import { Viewer } from 'cesium';
import { MVTImageryProvider } from 'cesium-mvt-imagery-provider';

const style = await fetch('https://styles.maptoolkit.org/summer.json').then((r) => r.json());
const tileUrl = style.sources.maptoolkit.tiles?.[0]; // {z}/{x}/{y}.pbf template

const viewer = new Viewer('cesiumContainer');

const provider = new MVTImageryProvider({
  urlTemplate: tileUrl,
  maximumLevel: 18,
  style: (feature, tileCoords) => {
    // Return a per-feature style based on feature.properties.
    return { fillStyle: '#dcdcdc', strokeStyle: '#808080', lineWidth: 0.5 };
  },
});

viewer.imageryLayers.addImageryProvider(provider);

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

Every map must show the Maptoolkit logo and the © Maptoolkit © OSM copyright line, both as clickable links. See Quick Start - Add attribution.