---
title: "Synchronize annotations with a sidebar list | Geosplats sdk"
description: "Connect 3D model annotations bidirectionally with an external sidebar list."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# Synchronize annotations with a sidebar list
This example demonstrates how to build a bidirectional interface connecting 3D model annotations with an external HTML sidebar list using the Roman Colosseum model.
### 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: [12.4925, 41.89018],
zoom: 17.2,
pitch: 55,
bearing: -25,
});
let splatModel;
map.on("load", () => {
splatModel = new SplatModel({
model: "YOUR_MAPTILER_SPLAT_MODEL_ID_HERE",
revealParams: { enabled: true },
});
map.addSplatModel(splatModel);
});
const colosseumPois = [
{
id: "arena",
pos: { x: 0.0, z: 0.0 },
icon: "🏛️",
label: "Arena & Hypogeum",
popup:
"
Arena & Hypogeum
The central combat stage and subterranean maze of chambers, animal cages, and elevator lifts.
```
## Storing annotation references
Populate the sidebar DOM elements upon page initialization and link each entry to its `SplatAnnotation` instance once the 3D model finishes loading:
```js
const listEl = document.getElementById("poiList");
colosseumPois.forEach((item) => {
const li = document.createElement("li");
li.innerHTML = `${item.icon}${item.label}`;
listEl.appendChild(li);
item.liElement = li;
});
map.on("splatmodel:load", () => {
colosseumPois.forEach((item) => {
item.annotation = splatModel.addAnnotation({
pos: item.pos,
icon: item.icon,
label: item.label,
popup: item.popup,
data: { id: item.id },
});
});
});
```
## Highlighting 3D pins from sidebar hovers
Attach mouse event listeners to the HTML list elements to highlight the corresponding 3D pin dynamically:
```js
const HIGHLIGHT_COLOR = "#ffcc00";
li.addEventListener("mouseenter", () => {
if (item.annotation) item.annotation.setColor(HIGHLIGHT_COLOR);
});
li.addEventListener("mouseleave", () => {
if (item.annotation) item.annotation.setColor(undefined);
});
li.addEventListener("click", () => {
if (item.annotation) item.annotation.openPopup();
});
```
Calling `annotation.setColor(undefined)` reverts the pin back to its default color.
## Updating external UI on active popup changes
Listen for the `"splatmodel:annotation:active"` and `"splatmodel:annotation:inactive"` events on the map to detect when a popup opens or closes (whether from clicking the 3D pin directly or programmatically via the sidebar):
```js
map.on("splatmodel:annotation:active", ({ annotation }) => {
colosseumPois.forEach((item) => {
if (item.liElement) item.liElement.classList.remove("active");
if (item.annotation === annotation && item.liElement) {
item.liElement.classList.add("active");
item.liElement.scrollIntoView({ behavior: "smooth", block: "nearest" });
}
});
});
map.on("splatmodel:annotation:inactive", () => {
colosseumPois.forEach((item) => {
if (item.liElement) item.liElement.classList.remove("active");
});
});
```
## Learn more
Check out the [MapTiler GeoSplats SDK reference](https://docs.maptiler.com/geosplats-sdk/api) to explore map and model event handlers.
## Related examples
### [Add annotations](https://docs.maptiler.com/geosplats-sdk/examples/add-annotations/)
Examples
Add interactive labelled pins and popups to a splat model.
### [Pin styles and categories](https://docs.maptiler.com/geosplats-sdk/examples/annotation-styles/)
Examples
Style annotations with colors, icons, numbers, and custom popup placement.
### [Guided tour with annotations](https://docs.maptiler.com/geosplats-sdk/examples/annotation-guided-tour/)
Examples
Guide users through model annotations with next and previous buttons.
### [Filter annotations by category](https://docs.maptiler.com/geosplats-sdk/examples/filter-annotations/)
Examples
Filter annotations by category using visibility toggle or color dimming.