---
title: "Capture map and splats events | Geosplats sdk"
description: "Learn how to capture both global map events and specific splats events like load, update, mouseover, and click."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs-qmgv.pages.dev/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# Capture map and splats events
This example demonstrates how to interact with the base map and capture events for photorealistic **splats** objects. You’ll learn how listen for specific splats or maps events like **load**, **update**, **mouseover**, and **click**.
### 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: [17.444223964112837, 68.4293706855771],
zoom: 18.33
});
//Show a error message
map.on('error', (e) => {
const message = e.message.toLowerCase();
console.log(message);
if (message.includes('gpu') || message.includes('apple device')) {
const errorEl = document.getElementById('webGpuError');
if (errorEl) {
errorEl.classList.remove('d-none');
if (message.includes('gpu')) {
errorEl.textContent =
'Your browser does not support WebGPU. It is necessary to use a modern browser that supports it. Also make sure to enable hardware acceleration in your browser settings.';
} else {
errorEl.textContent = e.message;
}
}
}
});
let splatModel;
map.on("load", () => {
splatModel = new SplatModel({
model: "YOUR_MAPTILER_SPLAT_MODEL_ID_HERE",
});
map.addSplatModel(splatModel);
});
const lastEventSpan = document.getElementById("last-event");
const modelInfo = document.getElementById("model-info");
function updateEventDisplay(eventType) {
lastEventSpan.textContent = eventType;
console.log("Event triggered:", eventType);
if (eventType === "splatmodel:mouseover" ||
eventType === "splatmodel:click"
) {
modelInfo.classList.remove("hidden");
} else {
modelInfo.classList.add("hidden");
}
}
// Capture SplatModel events on the map
const events = [
"splatmodel:load",
"splatmodel:update",
"splatmodel:l:mouseover",
"splatmodel:mouseout",
"splatmodel:click"
];
map.on("click", (e) => {
updateEventDisplay("click");
});
events.forEach(eventType => {
map.on(eventType, (e) => {
updateEventDisplay(eventType);
});
});
```
#### index.html
```html
Global Map Events
```
## Learn more
1. **Global Map Events**: Use `map.on('click', ...)` to capture geographic coordinates when a user clicks on the map.
2. **Splats Specific Events**: The map emits events prefixed with `splatmodel:` when interacting with these 3D objects:
- `splatmodel:load`: Triggered when the model is fully loaded.
- `splatmodel:update`: Triggered during model updates or LOD changes.
- `splatmodel:mouseover` / `splatmodel:mouseout`: Capture when the mouse enters or leaves the object’s area.
- `splatmodel:click`: Detect direct user interaction with the 3D model.
Check out the [MapTiler GeoSplats SDK JS reference](https://docs-qmgv.pages.dev/geosplats-sdk/api)
## Related examples
### [Edit model in custom editor](https://docs-qmgv.pages.dev/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.
### [Add splat model](https://docs-qmgv.pages.dev/geosplats-sdk/examples/add-geosplats/)
Examples
Learn how to load a map using the GeoSplats SDK and add a photorealistic splat model. A splat model offer a modern alternative to 3D meshes, perfect for complex scenes.
### [Change basemap](https://docs-qmgv.pages.dev/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-qmgv.pages.dev/geosplats-sdk/examples/opacity-visibility/)
Examples
Learn how to dynamically control the transparency and visibility of photorealistic splats objects using the MapTiler GeoSplats SDK.