3D objects on MapTiler maps

With the MapTiler SDK 3D JS module, you can add 3D objects to your basemap with plenty of customizations from glTF/glb files! These can be meshes, groups of meshes, point clouds, or a mix of all these.

Get started

  1. Since the 3D model is going to be added to a Map, let’s instantiate a map first. Copy the following code, paste it into your favorite text editor, and save it as a .html file.

  2. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

  3. Waiting for the map to be ready to add the 3D layer. An instance of Layer3D is a custom type of layer that contain a 3D scene, where multiple 3D meshes and lights can be added. Like any other layer in MapTiler SDK JS, it must have an ID and then be added to a Map instance.

  1. Install the npm package.

  2. Include the CSS file.

    If you have a bundler that can handle CSS, you can import the CSS or include it with a <link> in the head of the document via the CDN

  3. Include the following code in your JavaScript file (Example: app.js).

  4. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

  5. Waiting for the map to be ready to add the 3D layer. An instance of Layer3D is a custom type of layer that contain a 3D scene, where multiple 3D meshes and lights can be added. Like any other layer in MapTiler SDK JS, it must have an ID and then be added to a Map instance.

  1. Once created and added, a mesh can be added. In this version any glTF and their binary counterpart glb files can be added. Add a mesh to the layer. In this example we will use the model The COLLADA duck. One texture. Credit: © 2006, Sony. SCEA Shared Source License, Version 1.0

API Reference

This reference documents every object and method available. Each section describes classes or objects as well as their properties, parameters, methods, and associated events. Many sections also include inline code examples and related resources.

COLLADA duck One texture Credit: © 2006, Sony. SCEA Shared Source License, Version 1.0 ↩

Related examples

Add a airplane 3D model

Add a plane 3D model

Example

Use the MapTiler 3D JS module to add a airplane model to the map.
Add multiple 3D models to the map

Add multiple 3D models

Example

Use the MapTiler 3D JS module to add multiple 3D models to the map.
Animate a 3D plane flight

Animate a 3D plane flight

Example

Use the MapTiler 3D JS module to simulate and animate a plane flight between two cities.
Display a 3D building model generated with photogrammetry software

Display a 3D photogrammetry building model

Example

Use the MapTiler 3D JS module to display a 3D building model generated with photogrammetry software processing thousands images on a map.
Display a LIDAR data 3D city model

Display a LIDAR data 3D city model

Example

Use the MapTiler 3D JS module to display a LIDAR data 3D city model on a map.
Display a building model based on point cloud data on a map.

Display a building model

Example

Use the MapTiler 3D JS module to display the wireframe of a building 3D model based on point cloud data on a map.
Display a point cloud 3D building model on a map.

Display a point cloud 3D building model

Example

Use the MapTiler 3D JS module to display a point cloud 3D building model on a map.
MapTiler SDK JS 3D objects/models module.
On this page

    Was this helpful?