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

Panoramax web viewer for geolocated pictures

# Manage custom widgets

The viewer allows you to manage finely its widgets, you can either add or replace all widgets offered by the viewer.

We use internally [slots](https://developer.mozilla.org/docs/Web/HTML/Element/slot) to make this possible. Each corner of the viewer is identified uniquely, so you can add in the exact place you'd like. This is in a similar fashion to MapLibre GL or Leaflet widgets management.

!!! note

	This is only available for __Viewer__ & __Photo Viewer__ components, not for _Coverage Map_ or _Editor_.


## Add a new widget

Let's say you want to add a custom widget without removing existing viewer ones. You can insert your element inside of the viewer markup:

```html
<pnx-viewer
  endpoint="https://panoramax.openstreetmap.fr/"
>
  <p slot="top-right">My custom text</p>
</pnx-viewer>
```

The magic happens here thanks to the `slop="top-right"` attribute on your element. You can use any corner you like (`top-left`, `top`, `top-right`, `bottom-left`, `bottom`, `bottom-right`), and add several elements on a same corner (they will stack depending of existing CSS styles).

## Replace all widgets

For finer control, you may want to get rid of all existing widgets before adding your own ones. This is also possible by setting `widgets="false"` attribute on the viewer:

```html
<pnx-viewer
  endpoint="https://panoramax.openstreetmap.fr/"
  widgets="false"
>
  <p slot="top-right">My custom text</p>
</pnx-viewer>
```

Note that this keeps only the _Mini_ map/picture display (in bottom-left corner).

!!! note

	If you don't need map at all, you can also use the [Photo Viewer](../reference/components/core/PhotoViewer.md) component, which is a picture display without any map.


## Reuse default widgets

You may also want to reuse differently existing widgets. Note that all of them are listed in the [API reference](../reference.md). Just insert them as slotted components inside the viewer:

```html
<pnx-viewer
  endpoint="https://panoramax.openstreetmap.fr/"
  widgets="false"
>
  <pnx-widget-zoom slot="top-right" />
</pnx-viewer>
```

Note that parent variables (`_parent` and `_t`) are automatically passed through by the viewer, no need to add it manually.