How to add annotations to a splat model

Basic JavaScript setup

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>How to add annotations to a splat model</title>
    <link
      rel="stylesheet"
      href="https://cdn.maptiler.com/maptiler-geosplats/v1.2.1/maptiler-geosplats.css"
    />
    <style>
      body {
        font-family: Inter, sans-serif;
        margin: 0;
        overflow: hidden;
      }

      #map {
        width: 100%;
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script type="module">
      import {
        SplatModel,
        Map,
        config,
      } from "https://cdn.maptiler.com/maptiler-geosplats/v1.2.1/maptiler-geosplats.mjs";

      config.apiKey = "YOUR_MAPTILER_API_KEY_HERE";
      const map = new Map({
        apiKey: config.apiKey,
        container: "map",
        center: [-80.27822, 25.74077],
        zoom: 17.5,
        pitch: 50,
        bearing: -15,
      });

      let splatModel;
      map.on("load", () => {
        splatModel = new SplatModel({
          model: "YOUR_MAPTILER_SPLAT_MODEL_ID_HERE",
          revealParams: { enabled: true },
        });
        map.addSplatModel(splatModel);
      });

      map.on("splatmodel:load", () => {
        splatModel.addAnnotation({
          pos: { x: -0.4, z: -0.2 },
          icon: "🏖️",
          label: "Sun Pool",
          popup: "<h3>🏖️ Sun Pool</h3><p>Outdoor pool with a 24h bar.</p>",
        });

        splatModel.addAnnotation({
          pos: { x: -0.06, z: -0.26, y: 0.001 },
          icon: "🏢",
          label: "Main Entrance",
          color: "#2bb673",
          popup: "<h3>🏢 Main Entrance</h3><p>Main hotel lobby, reception, and guest check-in.</p>",
        });

        splatModel.addAnnotation({
          pos: { x: 0.6, z: 0.46 },
          icon: "🎾",
          label: "Tennis Courts",
          popup: "<h3>🎾 Tennis Courts</h3><p>10 championship courts with floodlighting.</p>",
        });
      });
    </script>
  </body>
</html>