--- title: "Cesium JS with MapTiler maps | Cesium" description: "Display MapTiler maps on websites using the Cesium library." --- > For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL. # Cesium JS with MapTiler maps [Cesium JS](https://cesium.com/platform/cesiumjs/) is an open-source JavaScript library for creating high-quality 3D globes and maps with the best possible performance, precision, visual quality, user-friendly interface, and ease of use. You can use your MapTiler maps in Cesium as a [Terrain 3D quantized mesh](https://cloud.maptiler.com/tiles/terrain-quantized-mesh) format. ## Get started This is the easiest and fastest way to use your MapTiler maps in Cesium JS. By using the code provided below the map, you can effortlessly generate a [3D map](https://www.maptiler.com/maps/3d/). 1. Copy the following code, paste it into your favorite text editor, and save it as a `.html` file. ```html Display a map in Cesium JS
MapTiler logo
``` 1. Install the npm package. ```bash npm install --save cesium ``` 2. Include the CSS file. If you have a bundler that can handle CSS, you can [`import`](#) the CSS or include it with a [``](#) in the head of the document via the CDN ```js import "cesium/Build/Cesium/Widgets/widgets.css"; ``` ```html ``` 3. Include the following code in your JavaScript file (Example: main.js). ```js import { Viewer, Terrain, Credit, ImageryLayer, UrlTemplateImageryProvider, Cartesian3, CesiumTerrainProvider, Math as CesiumMath } from 'cesium'; import 'cesium/Build/Cesium/Widgets/widgets.css'; const key = 'YOUR_MAPTILER_API_KEY_HERE'; const viewer = new Viewer('cesiumContainer', { animation: false, baseLayerPicker: false, navigationHelpButton: false, sceneModePicker: false, homeButton: false, geocoder: false, fullscreenButton: false, timeline: false, terrain: new Terrain(CesiumTerrainProvider.fromUrl(`https://api.maptiler.com/tiles/terrain-quantized-mesh-v2/?key=${key}`, { requestVertexNormals: true })), baseLayer: new ImageryLayer( new UrlTemplateImageryProvider({ url: `https://api.maptiler.com/maps/satellite-v4/{z}/{x}/{y}.jpg?key=${key}`, minimumLevel: 0, maximumLevel: 20, tileWidth: 512, tileHeight: 512, })), }); const credit = new Cesium.Credit(`© MapTiler © OpenStreetMap contributors`, true) viewer.creditDisplay.addStaticCredit(credit); viewer.camera.setView({ destination: Cartesian3.fromDegrees(8.67, 46.72, 4500), orientation: { pitch: CesiumMath.toRadians(-20) } }); ``` 1. Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/credentials/api-key/#secure-key) before you publish it. 2. The next is up to you. You can center your map wherever you desire (modifying the `starting position`) and set an appropriate zoom level (modifying the `starting zoom`) to match your users’ needs. Additionally, you can change the map’s look (by updating the `source URL`); choose from a range of visually appealing map styles from our extensive [MapTiler standard maps](https://cloud.maptiler.com/maps/), or create your own to truly differentiate your application. ## Learn more To learn more about 3D terrain data modeling, read the [3D vector tiles with Cesium](https://docs.maptiler.com/guides/self-hosting/self-hosted-maps/3d-vector-tiles-with-cesium) article. ## Related examples ### [Learn the basics](https://docs.maptiler.com/cesium/examples/how-to-use-cesium/) Tutorials Step-by-step tutorial for creating 3D maps using Cesium JS.