## Panoramax.components.ui.MapMore ⇐ [Map](Map.md/#Panoramax.components.ui.Map) **Kind**: static class of Panoramax.components.ui **Extends**: [Map](Map.md/#Panoramax.components.ui.Map) **Emits**: [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), [filters-changed](#Panoramax.components.ui.MapMore+event_filters-changed) * [.MapMore](#Panoramax.components.ui.MapMore) ⇐ [Map](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) ⇒ Promise * [.reloadVectorTiles()](Map.md/#Panoramax.components.ui.Map+reloadVectorTiles) * [.hasTwoBackgrounds()](Map.md/#Panoramax.components.ui.Map+hasTwoBackgrounds) ⇒ boolean * [.getBackground()](Map.md/#Panoramax.components.ui.Map+getBackground) ⇒ string * [.setBackground(bg)](Map.md/#Panoramax.components.ui.Map+setBackground) * [.getVisibleUsers()](Map.md/#Panoramax.components.ui.Map+getVisibleUsers) ⇒ Array.<string> * [.onceLayerReady(layerId)](Map.md/#Panoramax.components.ui.Map+onceLayerReady) ⇒ Promise * [.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) ### 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 | [Basic](../core/Basic.md/#Panoramax.components.core.Basic) | | The parent view | | container | Element | | The DOM element to create into | | [options] | object | | 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] | object | | 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] | string | "streets" | Choose default map background to display (streets or aerial, if raster aerial background available). Defaults to streets. | | [options.attributionControl.customAttribution] | string | | To override default map attribution. | | [options.picMarkerDraggable] | boolean | | To make the picture marker draggable, default to false. | | [options.indoor] | object | | The indoor= MapLibre plugin options. This must be a JSON object following [IndoorEqual parameters](https://indoorequal.com/doc/maplibre-gl-indoorequal/api#parameters). Note that this is only available if [maplibre-gl-indoorequal](https://indoorequal.com/doc/maplibre-gl-indoorequal) plugin is loaded in your web page. | | [options.indoor.level] | string | | (only if indoor= plugin is enabled) The initial indoor level to display. Defaults to ground or disabled depending on indoor map availability. | | [options.theme] | string | "default" | 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}}); ``` ### mapMore.destroy() Destroy any form of life in this component **Kind**: instance method of [MapMore](#Panoramax.components.ui.MapMore) ### mapMore.waitForEnoughMapLoaded() ⇒ Promise Helper to know when enough map background and Panoramax tiles are loaded for a proper display. **Kind**: instance method of [MapMore](#Panoramax.components.ui.MapMore) **Returns**: Promise - Resolves when enough is loaded ### mapMore.reloadVectorTiles() Force refresh of vector tiles data **Kind**: instance method of [MapMore](#Panoramax.components.ui.MapMore) ### mapMore.hasTwoBackgrounds() ⇒ boolean Check if map offers aerial imagery as well as streets rendering. **Kind**: instance method of [MapMore](#Panoramax.components.ui.MapMore) **Returns**: boolean - True if aerial imagery is available for display ### mapMore.getBackground() ⇒ string Get the currently selected map background **Kind**: instance method of [MapMore](#Panoramax.components.ui.MapMore) **Returns**: string - aerial or streets ### mapMore.setBackground(bg) Change the shown background in map. **Kind**: instance method of [MapMore](#Panoramax.components.ui.MapMore) **Throws**: - Error If not aerial imagery is available | Param | Type | Description | | --- | --- | --- | | bg | string | The new background to display (aerial or streets) | ### mapMore.getVisibleUsers() ⇒ Array.<string> Get the currently visible users **Kind**: instance method of [MapMore](#Panoramax.components.ui.MapMore) **Returns**: Array.<string> - List of visible users ### mapMore.onceLayerReady(layerId) ⇒ Promise Wait for a given map layer to be really available. **Kind**: instance method of [MapMore](#Panoramax.components.ui.MapMore) **Fulfil**: null When layer is ready. | Param | Type | Description | | --- | --- | --- | | layerId | string | the layer ID | ### mapMore.setVisibleUsers(visibleIds) Make given user layers visible on map, and hide all others (if any) **Kind**: instance method of [MapMore](#Panoramax.components.ui.MapMore) **Overrides**: [setVisibleUsers](Map.md/#Panoramax.components.ui.Map+setVisibleUsers) | Param | Type | Description | | --- | --- | --- | | visibleIds | string \| Array.<string> | The user layers IDs to display | ### mapMore.filterUserLayersContent(dataType, filter) Filter the visible data content in all visible map layers **Kind**: instance method of [MapMore](#Panoramax.components.ui.MapMore) | Param | Type | Description | | --- | --- | --- | | dataType | string | sequences or pictures | | filter | object | The MapLibre GL filter rule to apply | ### 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 [MapMore](#Panoramax.components.ui.MapMore) | Param | Type | Default | Description | | --- | --- | --- | --- | | lon | number | | The longitude | | lat | number | | The latitude | | heading | number | | The heading | | [skipCenter] | boolean | false | Set to true to avoid map centering on marker | | [picId] | string | null | The picture Id | ### mapMore.reloadLayersStyles() Forces reload of pictures/sequences layer styles. This is useful after a map theme change. **Kind**: instance method of [MapMore](#Panoramax.components.ui.MapMore) ### 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 [MapMore](#Panoramax.components.ui.MapMore) | Param | Type | Default | Description | | --- | --- | --- | --- | | type | string | | The event type to listen for | | listener | function | | The event handler | | [options.once] | boolean | false | Set to true to only listen to first event. | ### "filters-changed" Event for filters changes **Kind**: event emitted by [MapMore](#Panoramax.components.ui.MapMore) **Properties** | Name | Type | Description | | --- | --- | --- | | [minDate] | string | The minimum date in time range (ISO format) | | [maxDate] | string | The maximum date in time range (ISO format) | | [pic_type] | string | Camera type (equirectangular, flat, null/empty string for both) | | [camera] | string | Camera make and model | | [theme] | string | Map theme | | [qualityscore] | Array.<number> | QualityScore values, as a list of 1 to 5 grades | | [gps] | Array.<number> | GPS precision grades, as a list of 1 to 5 grades | ### "ready" Event when map is ready to display. This includes Maplibre initial load, enough map data display and styling. **Kind**: event emitted by [MapMore](#Panoramax.components.ui.MapMore) ### "background-changed" Event for map background changes **Kind**: event emitted by [MapMore](#Panoramax.components.ui.MapMore) **Properties** | Name | Type | Description | | --- | --- | --- | | [background] | string | The new selected background (aerial, streets) | ### "users-changed" Event for visible users changes **Kind**: event emitted by [MapMore](#Panoramax.components.ui.MapMore) **Properties** | Name | Type | Description | | --- | --- | --- | | [usersIds] | Array.<string> | The list of newly selected users | ### "sequence-hover" Event when a sequence on map is hovered (not selected) **Kind**: event emitted by [MapMore](#Panoramax.components.ui.MapMore) **Properties** | Name | Type | Description | | --- | --- | --- | | seqId | string | The hovered sequence ID | ### "sequence-click" Event when a sequence on map is clicked **Kind**: event emitted by [MapMore](#Panoramax.components.ui.MapMore) **Properties** | Name | Type | Description | | --- | --- | --- | | seqId | string | The clicked sequence ID | | coordinates | maplibregl.LngLat | The coordinates of user click | ### "picture-click" Event when a picture on map is clicked **Kind**: event emitted by [MapMore](#Panoramax.components.ui.MapMore) **Properties** | Name | Type | Description | | --- | --- | --- | | picId | string | The clicked picture ID | | seqId | string | The clicked picture's sequence ID | | feature | object | The GeoJSON feature of the picture |