Change the opacity and visibility of splats

This example shows how to change the opacity of splats and how to dynamically hide or show it. This is particularly useful for visualizing layers of information, highlighting specific objects, or creating smooth transitions in your 3D scenes.


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: [9.59401, 59.22317],
  zoom: 17.23
});

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

  document.getElementById("opacity").oninput = (e) => {
    splatModel.setOpacity(parseFloat(e.target.value));
  };

  let visible = true;
  document.getElementById("toggle-vis").onclick = () => {
    visible = !visible;
    if (visible) splatModel.show();
    else splatModel.hide();
  };
});

index.html

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

<head>
  <meta charset="UTF-8">
  <title>Opacity and Visibility of SplatModel</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div id="map"></div>
  <div id="ui">
    <label>Opacity: <input type="range" id="opacity" min="0" max="1" step="0.1" value="1"></label>
    <button id="toggle-vis">Hide/Show</button>
  </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;
}

#ui {
  position: absolute;
  top: 10px;
  right: 10px;
  background: white;
  padding: 10px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Opacity and Visibility of SplatModel</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;
    }

    #ui {
      position: absolute;
      top: 10px;
      right: 10px;
      background: white;
      padding: 10px;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <div id="ui">
    <label>Opacity: <input type="range" id="opacity" min="0" max="1" step="0.1" value="1"></label>
    <button id="toggle-vis">Hide/Show</button>
  </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: [9.59401, 59.22317],
      zoom: 17.23
    });

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

      document.getElementById("opacity").oninput = (e) => {
        splatModel.setOpacity(parseFloat(e.target.value));
      };

      let visible = true;
      document.getElementById("toggle-vis").onclick = () => {
        visible = !visible;
        if (visible) splatModel.show();
        else splatModel.hide();
      };
    });
  </script>
</body>

</html>

Learn more

Check out the MapTiler GeoSplats SDK JS reference

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.