@panoramax/web-viewer/docs/reference/components/ui/widgets/Legend.md

Panoramax web viewer for geolocated pictures

<a name="Panoramax.components.ui.widgets.Legend"></a>

## Panoramax.components.ui.widgets.Legend ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
**Kind**: static class of <code>Panoramax.components.ui.widgets</code>  
**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
**Element**: pnx-widget-legend  
**Slot**: `editors` External links to map editors, or any tool that may be helpful. Defaults to OSM tools (iD & JOSM).  

* [.Legend](#Panoramax.components.ui.widgets.Legend) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
    * [new Legend()](#new_Panoramax.components.ui.widgets.Legend_new)
    * [.properties](#Panoramax.components.ui.widgets.Legend+properties) : <code>Object</code>

<a name="new_Panoramax.components.ui.widgets.Legend_new"></a>

### new Legend()
Legend widget, handling switch between map and photo components.
Also displays a default "About Panoramax" message.

**Example**  
```html
<!-- Default legend -->
<pnx-widget-legend
  _parent=${viewer}
  focus="map"
  picture="PICTURE-ID-IF-ANY"
></pnx-widget-legend>

<!-- With custom editor links -->
<pnx-widget-legend
  _parent=${viewer}
  focus="map"
  picture="PICTURE-ID-IF-ANY"
>
  <div slot="editors"><a href="http://my.own.tool">Edit in my own tool</a></div>
</pnx-widget-legend>

<!-- Lighter version -->
<pnx-widget-legend
  _parent=${viewer}
  focus="pic"
  picture="PICTURE-ID-IF-ANY"
  light
></pnx-widget-legend>
```
<a name="Panoramax.components.ui.widgets.Legend+properties"></a>

### legend.properties : <code>Object</code>
Component properties.

**Kind**: instance property of [<code>Legend</code>](#Panoramax.components.ui.widgets.Legend)  
**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| [focus] | <code>string</code> |  | The focused main component (map, pic) |
| [picture] | <code>string</code> |  | The picture ID |
| [light] | <code>boolean</code> | <code>false</code> | Lighter version (for iframes) |