@panoramax/web-viewer

<a name="Panoramax.components.ui.MapMore"></a> ## Panoramax.components.ui.MapMore ⇐ [<code>Map</code>](Map.md/#Panoramax.components.ui.Map) **Kind**: static class of <code>Panoramax.components.ui</code> **Extends**: [<code>Map</code>](Map.md/#Panoramax.components.ui.Map) **Emits**: [<code>background-changed</code>](Map.md/#Panoramax.components.ui.Map+event_background-changed), [<code>users-changed</code>](Map.md/#Panoramax.components.ui.Map+event_users-changed), [<code>sequence-hover</code>](Map.md/#Panoramax.components.ui.Map+event_sequence-hover), [<code>sequence-click</code>](Map.md/#Panoramax.components.ui.Map+event_sequence-click), [<code>picture-click</code>](Map.md/#Panoramax.components.ui.Map+event_picture-click), [<code>filters-changed</code>](#Panoramax.components.ui.MapMore+event_filters-changed) * [.MapMore](#Panoramax.components.ui.MapMore) ⇐ [<code>Map</code>](Map.md/#Panoramax.components.ui.Map) * [new MapMore(parent, container, [options])](#new_Panoramax.components.ui.MapMore_new) * [.destroy()](Map.md/#Panoramax.components.ui.Map+destroy) * [.waitForEnoughMapLoaded()](Map.md/#Panoramax.components.ui.Map+waitForEnoughMapLoaded) ⇒ <code>Promise</code> * [.reloadVectorTiles()](Map.md/#Panoramax.components.ui.Map+reloadVectorTiles) * [.hasTwoBackgrounds()](Map.md/#Panoramax.components.ui.Map+hasTwoBackgrounds) ⇒ <code>boolean</code> * [.getBackground()](Map.md/#Panoramax.components.ui.Map+getBackground) ⇒ <code>string</code> * [.setBackground(bg)](Map.md/#Panoramax.components.ui.Map+setBackground) * [.getVisibleUsers()](Map.md/#Panoramax.components.ui.Map+getVisibleUsers) ⇒ <code>Array.<string></code> * [.onceLayerReady(layerId)](Map.md/#Panoramax.components.ui.Map+onceLayerReady) ⇒ <code>Promise</code> * [.setVisibleUsers(visibleIds)](Map.md/#Panoramax.components.ui.Map+setVisibleUsers) * [.filterUserLayersContent(dataType, filter)](Map.md/#Panoramax.components.ui.Map+filterUserLayersContent) * [.displayPictureMarker(lon, lat, heading, [skipCenter], [picId])](#Panoramax.components.ui.Map+displayPictureMarker) * [.reloadLayersStyles()](Map.md/#Panoramax.components.ui.Map+reloadLayersStyles) * [.addEventListener(type, listener)](Map.md/#Panoramax.components.ui.Map+addEventListener) * ["filters-changed"](#Panoramax.components.ui.MapMore+event_filters-changed) * ["ready"](Map.md/#Panoramax.components.ui.Map+event_ready) * ["background-changed"](Map.md/#Panoramax.components.ui.Map+event_background-changed) * ["users-changed"](Map.md/#Panoramax.components.ui.Map+event_users-changed) * ["sequence-hover"](Map.md/#Panoramax.components.ui.Map+event_sequence-hover) * ["sequence-click"](Map.md/#Panoramax.components.ui.Map+event_sequence-click) * ["picture-click"](Map.md/#Panoramax.components.ui.Map+event_picture-click) <a name="new_Panoramax.components.ui.MapMore_new"></a> ### new MapMore(parent, container, [options]) MapMore is a more complete version of [Map UI component](Map.md/#Panoramax.components.ui.Map). It offers advanced features like themes, filters and more. Note that all functions of [MapLibre GL JS class Map](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/) are also available. ⚠️ 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. | 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 streets. | | [options.theme] | <code>string</code> | <code>"default"</code> | The map theme (default, age, score, type) | **Example** ```js const map = new Panoramax.components.ui.MapMore(viewer, mapNode, {center: {lat: 48.7, lng: -1.7}}); ``` <a name="Panoramax.components.ui.Map+destroy"></a> ### mapMore.destroy() Destroy any form of life in this component **Kind**: instance method of [<code>MapMore</code>](#Panoramax.components.ui.MapMore) <a name="Panoramax.components.ui.Map+waitForEnoughMapLoaded"></a> ### mapMore.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>MapMore</code>](#Panoramax.components.ui.MapMore) **Returns**: <code>Promise</code> - Resolves when enough is loaded <a name="Panoramax.components.ui.Map+reloadVectorTiles"></a> ### mapMore.reloadVectorTiles() Force refresh of vector tiles data **Kind**: instance method of [<code>MapMore</code>](#Panoramax.components.ui.MapMore) <a name="Panoramax.components.ui.Map+hasTwoBackgrounds"></a> ### mapMore.hasTwoBackgrounds() ⇒ <code>boolean</code> Check if map offers aerial imagery as well as streets rendering. **Kind**: instance method of [<code>MapMore</code>](#Panoramax.components.ui.MapMore) **Returns**: <code>boolean</code> - True if aerial imagery is available for display <a name="Panoramax.components.ui.Map+getBackground"></a> ### mapMore.getBackground() ⇒ <code>string</code> Get the currently selected map background **Kind**: instance method of [<code>MapMore</code>](#Panoramax.components.ui.MapMore) **Returns**: <code>string</code> - aerial or streets <a name="Panoramax.components.ui.Map+setBackground"></a> ### mapMore.setBackground(bg) Change the shown background in map. **Kind**: instance method of [<code>MapMore</code>](#Panoramax.components.ui.MapMore) **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> ### mapMore.getVisibleUsers() ⇒ <code>Array.<string></code> Get the currently visible users **Kind**: instance method of [<code>MapMore</code>](#Panoramax.components.ui.MapMore) **Returns**: <code>Array.<string></code> - List of visible users <a name="Panoramax.components.ui.Map+onceLayerReady"></a> ### mapMore.onceLayerReady(layerId) ⇒ <code>Promise</code> Wait for a given map layer to be really available. **Kind**: instance method of [<code>MapMore</code>](#Panoramax.components.ui.MapMore) **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> ### mapMore.setVisibleUsers(visibleIds) Make given user layers visible on map, and hide all others (if any) **Kind**: instance method of [<code>MapMore</code>](#Panoramax.components.ui.MapMore) **Overrides**: [<code>setVisibleUsers</code>](Map.md/#Panoramax.components.ui.Map+setVisibleUsers) | 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> ### mapMore.filterUserLayersContent(dataType, filter) Filter the visible data content in all visible map layers **Kind**: instance method of [<code>MapMore</code>](#Panoramax.components.ui.MapMore) | 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> ### mapMore.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>MapMore</code>](#Panoramax.components.ui.MapMore) | 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> ### mapMore.reloadLayersStyles() Forces reload of pictures/sequences layer styles. This is useful after a map theme change. **Kind**: instance method of [<code>MapMore</code>](#Panoramax.components.ui.MapMore) <a name="Panoramax.components.ui.Map+addEventListener"></a> ### mapMore.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>MapMore</code>](#Panoramax.components.ui.MapMore) | 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.MapMore+event_filters-changed"></a> ### "filters-changed" Event for filters changes **Kind**: event emitted by [<code>MapMore</code>](#Panoramax.components.ui.MapMore) **Properties** | Name | Type | Description | | --- | --- | --- | | [minDate] | <code>string</code> | The minimum date in time range (ISO format) | | [maxDate] | <code>string</code> | The maximum date in time range (ISO format) | | [pic_type] | <code>string</code> | Camera type (equirectangular, flat, null/empty string for both) | | [camera] | <code>string</code> | Camera make and model | | [theme] | <code>string</code> | Map theme | | [qualityscore] | <code>Array.<number></code> | QualityScore values, as a list of 1 to 5 grades | <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>MapMore</code>](#Panoramax.components.ui.MapMore) <a name="Panoramax.components.ui.Map+event_background-changed"></a> ### "background-changed" Event for map background changes **Kind**: event emitted by [<code>MapMore</code>](#Panoramax.components.ui.MapMore) **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>MapMore</code>](#Panoramax.components.ui.MapMore) **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>MapMore</code>](#Panoramax.components.ui.MapMore) **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>MapMore</code>](#Panoramax.components.ui.MapMore) **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>MapMore</code>](#Panoramax.components.ui.MapMore) **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 |