How to add a splat model to your map

This example shows how to initialize a map using the MapTiler GeoSplats SDK and add a splat model at a specific position. Unlike traditional 3D meshes, splats are based on Gaussian splatting technology, using a collection of tiny ellipsoids with varying opacity.

^{Click the SD/HD button to change the model definition}


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: [-80.27822, 25.74077],
  zoom: 17.26
});

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

index.html

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

<head>
  <meta charset="UTF-8">
  <title>Basic SplatModel Load</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div id="map"></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;
}

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

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

<body>
  <div id="map"></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: [7.86040, 46.686488],
      zoom: 17.26
    });

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

  </script>
</body>

</html>

High-performance rendering

By using the GeoSplats SDK, you can efficiently render millions of splats. Splats are ideal for representing complex scenes that are traditionally difficult to model, such as:

Dense vegetation and trees
Thin wires and structures
Semi-transparent surfaces

The WebGPU API enables efficient rendering of massive 3D datasets. Modern devices (typically 2020 or newer) with hardware acceleration enabled will provide the best high-fidelity experience for your users.

What are GeoSplats?

GeoSplats are the result of an optimized pipeline that converts raw standard splats (.ply files) into a location-aware format. This format supports precise geographic coordinates, fast loading via specialized spatial chunks, and smooth terrain blending.

Learn more

Check out the MapTiler GeoSplats SDK JS reference

How to add a splat model to your map

main.js

index.html

style.css

High-performance rendering

What are GeoSplats?

Learn more

Edit model in custom editor

Capture events

Change basemap

Opacity and visibility

How to add a splat model to your map

NPM module setup

main.js

index.html

style.css

Basic JavaScript setup

High-performance rendering

What are GeoSplats?

Learn more

Related examples

Edit model in custom editor

Capture events

Change basemap

Opacity and visibility