---
title: "MapTiler GeoSplats SDK | Geosplats sdk"
description: "Get started with MapTiler GeoSplats SDK. This is the easiest and fastest way to use your MapTiler SplatModels in JavaScript & TypeScript."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs-qmgv.pages.dev/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# MapTiler GeoSplats SDK
 [Get it from npm registry](https://www.npmjs.com/package/@maptiler/geosplats)
MapTiler GeoSplats SDK is your complete toolkit for building photorealistic 3D web maps using **[GeoSplats](https://docs-qmgv.pages.dev/guides/geosplats/)** (georeferenced Gaussian splats). The SDK bundles everything needed to build an entirely new type of web map applications, integrating your splat models with 3D terrain and any basemap you choose.
The splat models are visualized using the **WebGPU** technology, a modern standard for rendering graphics in a web browser. Unlike older WebGL, it provides direct access to graphics hardware, enabling efficient rendering of millions of splats.
Warning
Due to WebGPU’s new technology, it requires modern hardware, an up-to-date operating system, and the latest browser version **with hardware acceleration enabled**. We recommend using the latest Chrome or Safari version on Windows 10/11, iOS 26+, or Android 12+.
## In-built maps
MapTiler GeoSplats SDK comes with built-in [map styles](https://www.maptiler.com/maps/) to pick from, so you can select one of our maps with detailed street-level information, 3D terrain, and satellite imagery for the entire world. Optionally, you can also use your own custom map style.
### Examples
Browse code examples
[Go to examples](./examples)
### Reference
Read full SDK reference
[Go to reference](./api)
## Get started
To get started with a basic integration, first you need to **georeference** your splat model in our [3D Editor](https://docs-qmgv.pages.dev/guides/geosplats/3d-editor/). Then you can integrate it into a map with GeoSplats SDK: Just copy and use the code below the map.
### NPM module setup
```bash
npm install --save @maptiler/geosplats
```
#### main.js
```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
```html
Basic SplatModel Load
```
#### style.css
```css
body {
font-family: Inter, sans-serif;
margin: 0;
overflow: hidden;
}
#map {
width: 100%;
height: 100vh;
}
```
### Basic JavaScript setup
```html
Basic SplatModel Load
```