---
title: "Change map basemap | Geosplats sdk"
description: "Learn how to dynamically switch between different MapTiler basemaps while maintaining photorealistic 3D splat models in your scene."
---
> 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.
# Change map basemap
This example demonstrates how to dynamically change the underlying basemap using the `setBasemap()` method while ensuring that your **splats** models remain correctly positioned and visible in the 3D scene.
One of the key strengths of the **MapTiler GeoSplats SDK** is its ability to handle complex 3D assets, such as splats, regardless of the base map style. Whether you switch from a satellite view to a minimalist base style, your high-fidelity 3D models stay in place, perfectly aligned with the geographic coordinates.
### 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: [-74.42420, 40.77946],
zoom: 17.94,
basemap: "hybrid-v4"
});
map.on("load", () => {
const splatModel = new SplatModel({
model: "YOUR_MAPTILER_SPLAT_MODEL_ID_HERE",
});
map.addSplatModel(splatModel);
const styleSelect = document.getElementById("style-select");
styleSelect.addEventListener("change", (e) => {
const selectedStyle = e.target.value;
map.setBasemap(selectedStyle);
});
});
```
#### index.html
```html
Change Map Basemap
```
## Learn more
Check out the [MapTiler GeoSplats SDK JS reference](https://docs-qmgv.pages.dev/geosplats-sdk/api)
## Related examples
### [Add splat model](https://docs-qmgv.pages.dev/geosplats-sdk/examples/add-geosplats/)
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.
### [Edit model in custom editor](https://docs-qmgv.pages.dev/geosplats-sdk/examples/custom-editor/)
Examples
Build a custom 3D editor to adjust the position, rotation, and scale of splat models and save their properties to a database.
### [Capture events](https://docs-qmgv.pages.dev/geosplats-sdk/examples/events/)
Examples
Learn how to capture both global map events and specific splats events like load, update, mouseover, and click.
### [Opacity and visibility](https://docs-qmgv.pages.dev/geosplats-sdk/examples/opacity-visibility/)
Examples
Learn how to dynamically control the transparency and visibility of photorealistic splats objects using the MapTiler GeoSplats SDK.