Custom loading animation effect

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>Loading splat objects in an Empty Map</title>
  <link rel="stylesheet"
    href="https://cdn.maptiler.com/maptiler-geosplats/v1.1.0/maptiler-geosplats.css" />
  <style>
    body {
      font-family: Inter, sans-serif;
      margin: 0;
      overflow: hidden;
    }

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

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

    #loader {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      transition: opacity 0.5s ease-out;
    }

    #loader.hidden {
      opacity: 0;
      pointer-events: none;
    }

    .maptiler-logo {
      width: 200px;
      margin-bottom: 24px;
    }

    .spinner {
      width: 40px;
      height: 40px;
      border: 3px solid rgba(49, 116, 255, 0.1);
      border-top-color: #3174ff;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }
  </style>
</head>

<body>
  <div id="webGpuError" class="d-none position-absolute top-50 start-50 translate-middle w-50"></div>
  <div id="loader">
    <img src="https://docs.maptiler.com/styles/style/logo/maptiler-logo-adaptive.svg" alt="MapTiler Logo"
      class="maptiler-logo" />
    <div class="spinner"></div>
  </div>
  <div id="map"></div>
  <script type="module">
    import {
      SplatModel,
      Map,
      ReferenceMapStyleDefaults,
      config,
    } from "https://cdn.maptiler.com/maptiler-geosplats/v1.1.0/maptiler-geosplats.mjs";

    config.apiKey = "YOUR_MAPTILER_API_KEY_HERE";
    const map = new Map({
      apiKey: config.apiKey,
      container: "map",
      basemap: ReferenceMapStyleDefaults.VOID,
    });

    //Show a error message
    map.on("error", (e) => {
      const message = e.message.toLowerCase();
      console.log(message);

      // Hide the loader so any error message is visible
      const loader = document.getElementById("loader");
      if (loader) {
        loader.classList.add("hidden");
      }

      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);

      // Capture splat model load event
      map.on("splatmodel:load", () => {
        // Hide the custom loading screen or perform any other desired action after the model has loaded.
        const loader = document.getElementById("loader");
        if (loader) {
          loader.classList.add("hidden");
          setTimeout(() => {
            loader.remove();
          }, 500);
        }

        map.setBasemap('satellite-v4'); //Add a basemap

        setTimeout(() => {
          map.zoomIn(); //Zoom in 
        }, 300);
      });
    });
  </script>
</body>

</html>