@panoramax/web-viewer/docs/tutorials/synced_coverage.md

Panoramax web viewer for geolocated pictures

# Coverage map synced with external component

Let's say you want to list all sequences of an user. You can display a standalone map which can be synced with your custom list. Create your _Coverage Map_ web component:

```html
<pnx-coverage-map
  id="coverage"
  class="fullpage"
  endpoint="https://api.panoramax.xyz/api"
/>
```

Then, access it through JavaScript for further interaction:

```js
// Retrieve component from DOM
var coverage = document.getElementById("coverage");

// Wait for map initial load
coverage.addEventListener("ready", () => {
	// Change visible map area
	coverage.map.fitBounds([0, 0, 180, 90]);

	// Listen to sequence hovered on map
	// You can alternatively use: coverage.addEventListener("map:sequence-hover", ...)
	coverage.map.on("sequence-hover", e => {
		console.log("Hovered sequence", e.seqId);
	});

	// Listen to user clicks on map
	coverage.addEventListener("select", e => {
		console.log("Selected sequence", e.detail.seqId, "picture", e.detail.picId);
	});

	// You can also programmatically change selection on map
	coverage.select(
		"c463d190-06b0-47fb-98a8-b4a775a39ad6", // A sequence ID
		"bdea1eb4-4496-46da-a4d5-b22b16e75fa8"  // A picture ID (can be null if unknown)
	);
}, {once: true});
```

All available interaction are listed in [Coverage Map reference](../reference/components/core/CoverageMap.md).