3D objects on MapTiler maps

maptiler/maptiler-3d-js

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

^{Duck 3D model Credit: © 2006, Sony. SCEA Shared Source License, Version 1.0}

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/Maplibre GL JS, it must have an ID and then be added to a Map instance.

4. Install the npm package.

5. 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

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

7. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

8. 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/Maplibre GL JS, it must have an ID and then be added to a Map instance.

9. 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.

Related examples

Add a plane 3D model

Example

Use the MapTiler 3D JS module to add a airplane model 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

Example

Use the MapTiler 3D JS module to simulate and animate a plane flight between two cities.

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

Example

Use the MapTiler 3D JS module to display a LIDAR data 3D city model on a map.

Display a LOD2-3 building model

Example

Use the MapTiler 3D JS module to display the wireframe of a LOD2-3 building 3D model based on point cloud data 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.