---
title: "Configuring Cesium map application using webpack | Guides | Self hosting | Self hosted maps"
description: "Configure a 3D Cesium map application using Webpack tool."
---

# Configuring Cesium map application using webpack

When building web applications, you have several options and you probably know already, which libraries and build-stack you are going to use. You can find a lot of useful examples at the [Sandcastle](https://sandcastle.cesium.com/) of the Cesium project. We will demonstrate, how to create a 3D web mapping application based on the [cesium-webpack-example](https://github.com/CesiumGS/cesium-webpack-example)

## Step 1: Install and run a minimal Cesium application using webpack

[Webpack](https://webpack.js.org/) is the static module builder for JavaScript applications. It helps you with the development of the new application as well as with the creation of the distribution package.

Download and unzip the [cesium-webpack-example](https://github.com/CesiumGS/cesium-webpack-example) package (either using the [direct download link](https://github.com/maptiler/cesium-webpack-example/archive/refs/heads/main.zip) or using Git commands).

```bash
git clone https://github.com/maptiler/cesium-webpack-example.git
cd cesium-webpack-example
```

Then run the command, which should install all necessary dependencies.

```bash
npm install
```

And after all necessary packages are successfully downloaded, you can start the development server, which will make it easy to develop a custom 3D mapping application.

```bash
npm start
```

And open the link `http://localhost:8080/` in your browser.

![](./file_7b89d7b12a.webp)

A basic example with Cesium data sources will pop up. Now let’s start hacking around this example. The sources are located in the `src/` folder, the file `src/index.js` is of main interest:

```js
import { Cesium3DTileset, createWorldTerrain, IonResource, Viewer } from 'cesium';
import "cesium/Build/Cesium/Widgets/widgets.css";
import "./css/main.css";

const viewer = new Viewer('cesiumContainer', {
    terrainProvider: createWorldTerrain()
});

const tileset = new Cesium3DTileset({
    url: IonResource.fromAssetId(40866)
});

viewer.scene.primitives.add(tileset);
viewer.zoomTo(tileset);
```

We will restructure the code, so it uses sources directed to MapTiler cloud services. Let’s start from scratch, and delete all the code, maybe except for the imports.

```js
import { Cesium3DTileset, createWorldTerrain, IonResource, Viewer } from 'cesium';
import "cesium/Build/Cesium/Widgets/widgets.css";
import "./css/main.css";
```

First, we need to define the [TerrainProvider](https://cesium.com/learn/cesiumjs/ref-doc/CesiumTerrainProvider.html) instance.

```js
const terrain = new CesiumTerrainProvider({
  url: `https://api.maptiler.com/tiles/terrain-quantized-mesh/?key=${MAPTILER_API_KEY}`
});
```

As the second step, we need to define the [ImageProvider](https://cesium.com/learn/cesiumjs/ref-doc/UrlTemplateImageryProvider.html) - and we will use the URL reference to one of the Maptiler services, in this case, it will be the Outdoor map.

```js
const outdoor = new UrlTemplateImageryProvider({
  url: `https://api.maptiler.com/maps/outdoor/{z}/{x}/{y}.png?key=${MAPTILER_API_KEY}`,
  minimumLevel: 0,
  maximumLevel: 20
});
```

We now have two important data sources: the terrain and the imagery overlay. This can be now plugged into the application. This can be done, using very complex [Cesium.Viewer](https://cesium.com/learn/cesiumjs/ref-doc/Viewer.html) class or much simpler [Cesium.Widget](https://cesium.com/learn/cesiumjs/ref-doc/CesiumWidget.html) class.

```js
const cesiumWidget = new CesiumWidget('cesiumContainer', 
  {
    imageryProvider: outdoor,
    terrainProvider: terrain
  }
);
```

Don’t forget to add used classes, which is `CesiumTerrainProvider, UrlTemplateImageryProvider` and the `CesiumWidget` to the import statement. The node server will reload automatically every time you change the code.

![](./file_550078058f.webp)

Now we just have to zoom to the desired location (e.g. Alps region), this is done with the help of the [Camera object](https://cesium.com/learn/cesiumjs/ref-doc/Camera.html)

```js
viewer.camera.flyTo({
   destination: Cartesian3.fromDegrees(8.67, 46.72, 4300),
   orientation: { pitch: Math.toRadians(-20) }
});
```

![](./file_813a654a82.webp)

The full example now looks like this:

```js
import { Cesium3DTileset, createWorldTerrain, IonResource, CesiumTerrainProvider,
         UrlTemplateImageryProvider, Viewer, CesiumWidget, Cartesian3,
         Math } from 'cesium';
import "cesium/Build/Cesium/Widgets/widgets.css";
import "./css/main.css";

const MAPTILER_API_KEY="XFXXXXXXXXXXXXXeeg";

const terrain = new CesiumTerrainProvider({
  url: `https://api.maptiler.com/tiles/terrain-quantized-mesh/?key=${MAPTILER_API_KEY}`
});

const outdoor = new UrlTemplateImageryProvider({
  url: `https://api.maptiler.com/maps/outdoor/{z}/{x}/{y}.png?key=${MAPTILER_API_KEY}`,
  minimumLevel: 0,
  maximumLevel: 20
});

const widget = new CesiumWidget('cesiumContainer', 
  {
    imageryProvider: outdoor,
    terrainProvider: terrain
  }
);

widget.camera.flyTo({
   destination: Cartesian3.fromDegrees(8.67, 46.72, 4300),
   orientation: { pitch: Math.toRadians(-20) }
});
```