3D Models

Mappedin SDK version 6 is currently in a beta state while Mappedin perfects new features and APIs. Open the v6 release notes to view the latest changes.

Using Mappedin JS with your own map requires a Pro license. Try a demo map for free or refer to the Pricing page for more information.

Adding 3D models to a map can be a great way to represent landmarks to help users find key locations. They could also be used to show the location of assets or represent furniture to provide a rich indoor layout.

Mappedin JS supports models in Graphics Library Transmission Format (GLTF) and GL Transmission Format Binary (GLB) format. Models with nested meshes are not supported and should not be used.

3D Models can be added to the map using the MapView.Models.add() method. The add method requires a Coordinate to place the model and a URL of the model file. Optionally, the model's interactivity, rotation, scale and more can also be set using the options parameter, which accepts a TAddModelOptions. Models can be updated by calling the MapView.updateState() method.

The following code sample demonstrates the add method.

mapView.Models.add(coordinate, 'https://6cdkx7.csb.app/kiosk.glb', {
    interactive: true,
    rotation: [0, 0, 90],
    scale: [10, 10, 10],
});

Try adding some 3D Models to the map below. Clicking on the map will add a snake plant to the map. Clicking the plant removes it.