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 install --save @maptiler/geosplats

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Global Map Events</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div id="webGpuError" class="d-none position-absolute top-50 start-50 translate-middle w-50"></div>
  <div id="map"></div>
  <div id="info">
    <div class="event-list">Last event: <span id="last-event" class="event-label">None</span></div>
    <div id="model-info" class="event-list hidden">
      <h4>Camp Lodge</h4>
      <p><b>web: </b>https://www.narvikfjellet.no/camp-lodge</p>
    </div>
  </div>
  <script type="module" src="./main.js"></script>
</body>

</html>

style.css

body {
  font-family: Inter, sans-serif;
  margin: 0;
  overflow: hidden;
}

#map {
  width: 100%;
  height: 100vh;
}

#info {
  position: absolute;
  top: 10px;
  left: 10px;
  background: white;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1;
  pointer-events: none;
  min-width: 250px;
}

.event-label {
  font-weight: bold;
  color: #007bff;
}

.event-list {
  font-size: 14px;
  color: #333;
}

.hidden {
  display: none;
}

#webGpuError {
  border-radius: 6px;
  border: 1px solid #3174ff;
  padding: 24px;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Global Map Events</title>
  <link rel="stylesheet"
    href="https://cdn.maptiler.com/maptiler-geosplats/v1.0.9/maptiler-geosplats.css">
  <style>
    body {
      font-family: Inter, sans-serif;
      margin: 0;
      overflow: hidden;
    }

    #map {
      width: 100%;
      height: 100vh;
    }

    #info {
      position: absolute;
      top: 10px;
      left: 10px;
      background: white;
      padding: 15px;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      z-index: 1;
      pointer-events: none;
      min-width: 250px;
    }

    .event-label {
      font-weight: bold;
      color: #007bff;
    }

    .event-list {
      font-size: 14px;
      color: #333;
    }

    .hidden {
      display: none;
    }

    #webGpuError {
      border-radius: 6px;
      border: 1px solid #3174ff;
      padding: 24px;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <div id="info">
    <div class="event-list">Last event: <span id="last-event" class="event-label">None</span></div>
    <div id="model-info" class="event-list hidden">
      <h4>Camp Lodge</h4>
      <p><b>web: </b>https://www.narvikfjellet.no/camp-lodge</p>
    </div>
  </div>
  <script type="module">
    import { SplatModel, Map, config } from "https://cdn.maptiler.com/maptiler-geosplats/v1.0.9/maptiler-geosplats.mjs";;

    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:mouseover",
      "splatmodel:mouseout",
      "splatmodel:click"
    ];

    map.on("click", (e) => {
      updateEventDisplay("click");
    });

    events.forEach(eventType => {
      map.on(eventType, (e) => {
        updateEventDisplay(eventType);
      });
    });
  </script>
</body>

</html>

Learn more

Global Map Events: Use map.on('click', ...) to capture geographic coordinates when a user clicks on the map.
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

Edit model in 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

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.