Add a 3D model on a map

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

  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 own API key. Make sure to protect the key before publishing your map app!

  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 own API key. Make sure to protect the key before publishing your map app!

  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

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

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.
Getting started with AR maps: Display an AR control on your maps

Start with AR maps

Example

Getting started with AR maps: The Augmented reality (AR) control adds a button on your map to create a 3D model of the viewport, including 3D terrain and any layer you have put on top. Compatible with WebXR or Apple Quick Look.
Display a 3D terrain map

3D terrain map

Example

This tutorial demonstrates how to create a 3D terrain map and display it on a web page using MapTiler.
An extension of MapLibre GL JS