@panoramax/web-viewer

<a name="Panoramax.components.ui.Map"></a> ## Panoramax.components.ui.Map ⇐ <code>[maplibregl.Map](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/)</code> **Kind**: static class of <code>Panoramax.components.ui</code> **Extends**: <code>[maplibregl.Map](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/)</code> **Emits**: [<code>background-changed</code>](#Panoramax.components.ui.Map+event_background-changed), [<code>users-changed</code>](#Panoramax.components.ui.Map+event_users-changed), [<code>sequence-hover</code>](#Panoramax.components.ui.Map+event_sequence-hover), [<code>sequence-click</code>](#Panoramax.components.ui.Map+event_sequence-click), [<code>picture-click</code>](#Panoramax.components.ui.Map+event_picture-click), [<code>ready</code>](#Panoramax.components.ui.Map+event_ready) * [.Map](#Panoramax.components.ui.Map) ⇐ <code>[maplibregl.Map](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/)</code> * [new Map(parent, container, [options])](#new_Panoramax.components.ui.Map_new) * [.destroy()](#Panoramax.components.ui.Map+destroy) * [.waitForEnoughMapLoaded()](#Panoramax.components.ui.Map+waitForEnoughMapLoaded) ⇒ <code>Promise</code> * [.reloadVectorTiles()](#Panoramax.components.ui.Map+reloadVectorTiles) * [.hasTwoBackgrounds()](#Panoramax.components.ui.Map+hasTwoBackgrounds) ⇒ <code>boolean</code> * [.getBackground()](#Panoramax.components.ui.Map+getBackground) ⇒ <code>string</code> * [.setBackground(bg)](#Panoramax.components.ui.Map+setBackground) * [.getVisibleUsers()](#Panoramax.components.ui.Map+getVisibleUsers) ⇒ <code>Array.<string></code> * [.onceLayerReady(layerId)](#Panoramax.components.ui.Map+onceLayerReady) ⇒ <code>Promise</code> * [.setVisibleUsers(visibleIds)](#Panoramax.components.ui.Map+setVisibleUsers) * [.filterUserLayersContent(dataType, filter)](#Panoramax.components.ui.Map+filterUserLayersContent) * [.displayPictureMarker(lon, lat, heading, [skipCenter], [picId])](#Panoramax.components.ui.Map+displayPictureMarker) * [.reloadLayersStyles()](#Panoramax.components.ui.Map+reloadLayersStyles) * [.addEventListener(type, listener)](#Panoramax.components.ui.Map+addEventListener) * [.setVisibleUsers(visibleIds)](#Panoramax.components.ui.Map+setVisibleUsers) * ["ready"](#Panoramax.components.ui.Map+event_ready) * ["background-changed"](#Panoramax.components.ui.Map+event_background-changed) * ["users-changed"](#Panoramax.components.ui.Map+event_users-changed) * ["sequence-hover"](#Panoramax.components.ui.Map+event_sequence-hover) * ["sequence-click"](#Panoramax.components.ui.Map+event_sequence-click) * ["picture-click"](#Panoramax.components.ui.Map+event_picture-click) <a name="new_Panoramax.components.ui.Map_new"></a> ### new Map(parent, container, [options]) Map is the component showing pictures and sequences geolocation. Note that all functions of [MapLibre GL JS class Map](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/) are also available. A more complete version of Map (with filters & themes) is available through [MapMore class](MapMore.md/#Panoramax.components.ui.MapMore) ⚠️ This class doesn't inherit from [EventTarget](https://developer.mozilla.org/fr/docs/Web/API/EventTarget), so it doesn't have `addEventListener` and `dispatchEvent` functions. It uses instead [`on`](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#on) and `fire` functions from MapLibre Map class. `fire` function doesn't take directly [`Event`](https://developer.mozilla.org/fr/docs/Web/API/Event) objects, but a string and object data. A shorthand `addEventListener` function is added for simpler usage. | Param | Type | Default | Description | | --- | --- | --- | --- | | parent | [<code>Basic</code>](../core/Basic.md/#Panoramax.components.core.Basic) | | The parent view | | container | <code>Element</code> | | The DOM element to create into | | [options] | <code>object</code> | | The map options (any of [MapLibre GL settings](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapOptions/) or any supplementary option defined here) | | [options.raster] | <code>object</code> | | The MapLibre raster source for aerial background. This must be a JSON object following [MapLibre raster source definition](https://maplibre.org/maplibre-style-spec/sources/#raster). | | [options.background] | <code>string</code> | <code>"streets"</code> | Choose default map background to display (streets or aerial, if raster aerial background available). Defaults to street. | | [options.attributionControl.customAttribution] | <code>string</code> | | To override default map attribution. | | [options.picMarkerDraggable] | <code>boolean</code> | | To make the picture marker draggable, default to false. | **Example** ```js const map = new Panoramax.components.ui.Map(viewer, mapNode, {center: {lat: 48.7, lng: -1.7}}); ``` <a name="Panoramax.components.ui.Map+destroy"></a> ### map.destroy() Destroy any form of life in this component **Kind**: instance method of [<code>Map</code>](#Panoramax.components.ui.Map) <a name="Panoramax.components.ui.Map+waitForEnoughMapLoaded"></a> ### map.waitForEnoughMapLoaded() ⇒ <code>Promise</code> Helper to know when enough map background and Panoramax tiles are loaded for a proper display. **Kind**: instance method of [<code>Map</code>](#Panoramax.components.ui.Map) **Returns**: <code>Promise</code> - Resolves when enough is loaded <a name="Panoramax.components.ui.Map+reloadVectorTiles"></a> ### map.reloadVectorTiles() Force refresh of vector tiles data **Kind**: instance method of [<code>Map</code>](#Panoramax.components.ui.Map) <a name="Panoramax.components.ui.Map+hasTwoBackgrounds"></a> ### map.hasTwoBackgrounds() ⇒ <code>boolean</code> Check if map offers aerial imagery as well as streets rendering. **Kind**: instance method of [<code>Map</code>](#Panoramax.components.ui.Map) **Returns**: <code>boolean</code> - True if aerial imagery is available for display <a name="Panoramax.components.ui.Map+getBackground"></a> ### map.getBackground() ⇒ <code>string</code> Get the currently selected map background **Kind**: instance method of [<code>Map</code>](#Panoramax.components.ui.Map) **Returns**: <code>string</code> - aerial or streets <a name="Panoramax.components.ui.Map+setBackground"></a> ### map.setBackground(bg) Change the shown background in map. **Kind**: instance method of [<code>Map</code>](#Panoramax.components.ui.Map) **Throws**: - <code>Error</code> If not aerial imagery is available | Param | Type | Description | | --- | --- | --- | | bg | <code>string</code> | The new background to display (aerial or streets) | <a name="Panoramax.components.ui.Map+getVisibleUsers"></a> ### map.getVisibleUsers() ⇒ <code>Array.<string></code> Get the currently visible users **Kind**: instance method of [<code>Map</code>](#Panoramax.components.ui.Map) **Returns**: <code>Array.<string></code> - List of visible users <a name="Panoramax.components.ui.Map+onceLayerReady"></a> ### map.onceLayerReady(layerId) ⇒ <code>Promise</code> Wait for a given map layer to be really available. **Kind**: instance method of [<code>Map</code>](#Panoramax.components.ui.Map) **Fulfil**: <code>null</code> When layer is ready. | Param | Type | Description | | --- | --- | --- | | layerId | <code>string</code> | the layer ID | <a name="Panoramax.components.ui.Map+setVisibleUsers"></a> ### map.setVisibleUsers(visibleIds) Make given user layers visible on map, and hide all others (if any) **Kind**: instance method of [<code>Map</code>](#Panoramax.components.ui.Map) | Param | Type | Description | | --- | --- | --- | | visibleIds | <code>string</code> \| <code>Array.<string></code> | The user layers IDs to display | <a name="Panoramax.components.ui.Map+filterUserLayersContent"></a> ### map.filterUserLayersContent(dataType, filter) Filter the visible data content in all visible map layers **Kind**: instance method of [<code>Map</code>](#Panoramax.components.ui.Map) | Param | Type | Description | | --- | --- | --- | | dataType | <code>string</code> | sequences or pictures | | filter | <code>object</code> | The MapLibre GL filter rule to apply | <a name="Panoramax.components.ui.Map+displayPictureMarker"></a> ### map.displayPictureMarker(lon, lat, heading, [skipCenter], [picId]) Shows on map a picture position and heading. If no longitude & latitude are set, marker is removed from map. **Kind**: instance method of [<code>Map</code>](#Panoramax.components.ui.Map) | Param | Type | Default | Description | | --- | --- | --- | --- | | lon | <code>number</code> | | The longitude | | lat | <code>number</code> | | The latitude | | heading | <code>number</code> | | The heading | | [skipCenter] | <code>boolean</code> | <code>false</code> | Set to true to avoid map centering on marker | | [picId] | <code>string</code> | <code>null</code> | The picture Id | <a name="Panoramax.components.ui.Map+reloadLayersStyles"></a> ### map.reloadLayersStyles() Forces reload of pictures/sequences layer styles. This is useful after a map theme change. **Kind**: instance method of [<code>Map</code>](#Panoramax.components.ui.Map) <a name="Panoramax.components.ui.Map+addEventListener"></a> ### map.addEventListener(type, listener) Listen to map events. This is a binder to [`on`](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#on) and [`once`](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#once) MapLibre GL functions. **Kind**: instance method of [<code>Map</code>](#Panoramax.components.ui.Map) | Param | Type | Default | Description | | --- | --- | --- | --- | | type | <code>string</code> | | The event type to listen for | | listener | <code>function</code> | | The event handler | | [options.once] | <code>boolean</code> | <code>false</code> | Set to true to only listen to first event. | <a name="Panoramax.components.ui.Map+setVisibleUsers"></a> ### map.setVisibleUsers(visibleIds) Make given user layers visible on map, and hide all others (if any) **Kind**: instance method of [<code>Map</code>](#Panoramax.components.ui.Map) | Param | Type | Description | | --- | --- | --- | | visibleIds | <code>string</code> \| <code>Array.<string></code> | The user layers IDs to display | <a name="Panoramax.components.ui.Map+event_ready"></a> ### "ready" Event when map is ready to display. This includes Maplibre initial load, enough map data display and styling. **Kind**: event emitted by [<code>Map</code>](#Panoramax.components.ui.Map) <a name="Panoramax.components.ui.Map+event_background-changed"></a> ### "background-changed" Event for map background changes **Kind**: event emitted by [<code>Map</code>](#Panoramax.components.ui.Map) **Properties** | Name | Type | Description | | --- | --- | --- | | [background] | <code>string</code> | The new selected background (aerial, streets) | <a name="Panoramax.components.ui.Map+event_users-changed"></a> ### "users-changed" Event for visible users changes **Kind**: event emitted by [<code>Map</code>](#Panoramax.components.ui.Map) **Properties** | Name | Type | Description | | --- | --- | --- | | [usersIds] | <code>Array.<string></code> | The list of newly selected users | <a name="Panoramax.components.ui.Map+event_sequence-hover"></a> ### "sequence-hover" Event when a sequence on map is hovered (not selected) **Kind**: event emitted by [<code>Map</code>](#Panoramax.components.ui.Map) **Properties** | Name | Type | Description | | --- | --- | --- | | seqId | <code>string</code> | The hovered sequence ID | <a name="Panoramax.components.ui.Map+event_sequence-click"></a> ### "sequence-click" Event when a sequence on map is clicked **Kind**: event emitted by [<code>Map</code>](#Panoramax.components.ui.Map) **Properties** | Name | Type | Description | | --- | --- | --- | | seqId | <code>string</code> | The clicked sequence ID | | coordinates | <code>maplibregl.LngLat</code> | The coordinates of user click | <a name="Panoramax.components.ui.Map+event_picture-click"></a> ### "picture-click" Event when a picture on map is clicked **Kind**: event emitted by [<code>Map</code>](#Panoramax.components.ui.Map) **Properties** | Name | Type | Description | | --- | --- | --- | | picId | <code>string</code> | The clicked picture ID | | seqId | <code>string</code> | The clicked picture's sequence ID | | feature | <code>object</code> | The GeoJSON feature of the picture |