---
title: "How to add a reveal effect splat model to your map | Geosplats sdk"
description: "Learn how to enable/disble a reveal effect to show a splat model."
---
# How to add a reveal effect splat model to your map
This example shows how to enable/disble a reveal effect to show a splat model. You can use this reveal effect when loading models to make the user experience smoother and more visually appealing.
Click the SD/HD button to change the model definition
### NPM module setup
```bash
npm install --save @maptiler/geosplats
```
#### main.js
```js
import { SplatModel, Map, config } from "@maptiler/geosplats";
import '@maptiler/geosplats/dist/maptiler-geosplats.css';
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
apiKey: config.apiKey,
container: "map",
center: [3.166894380782878, 39.76162292749267]
});
map.on("load", () => {
const splatModel = new SplatModel({
model: "YOUR_MAPTILER_SPLAT_MODEL_ID_HERE",
revealParams: {
enabled: true,
},
});
map.addSplatModel(splatModel);
});
```
#### index.html
```html
Enable/Disable splat reveal effect
```
#### style.css
```css
body {
font-family: Inter, sans-serif;
margin: 0;
overflow: hidden;
}
#map {
width: 100%;
height: 100vh;
}
```
### Basic JavaScript setup
```html
Enable/Disable splat reveal effect
```
## High-performance rendering
By using the GeoSplats SDK, you can efficiently render millions of **splats**. Splats are ideal for representing complex scenes that are traditionally difficult to model, such as:
- Dense vegetation and trees
- Thin wires and structures
- Semi-transparent surfaces
The WebGPU API enables efficient rendering of massive 3D datasets. Modern devices (typically 2020 or newer) with hardware acceleration enabled will provide the best high-fidelity experience for your users.
## What are GeoSplats?
GeoSplats are the result of an optimized pipeline that converts raw standard splats (`.ply` files) into a location-aware format. This format supports precise geographic coordinates, fast loading via specialized spatial chunks, and smooth terrain blending.
## Learn more
Check out the [MapTiler GeoSplats SDK JS reference](https://docs.maptiler.com/geosplats-sdk/api)
## Related examples
### [Edit model in custom editor](https://docs.maptiler.com/geosplats-sdk/examples/custom-editor/)
Examples
Build a custom 3D editor to adjust the position, rotation, and scale of splat models and save their properties to a database.
### [Capture events](https://docs.maptiler.com/geosplats-sdk/examples/events/)
Examples
Learn how to capture both global map events and specific splats events like load, update, mouseover, and click.
### [Change basemap](https://docs.maptiler.com/geosplats-sdk/examples/change-basemap/)
Examples
Learn how to dynamically switch between different MapTiler basemaps while maintaining photorealistic 3D splat models in your scene.
### [Opacity and visibility](https://docs.maptiler.com/geosplats-sdk/examples/opacity-visibility/)
Examples
Learn how to dynamically control the transparency and visibility of photorealistic splats objects using the MapTiler GeoSplats SDK.