@panoramax/web-viewer 3.0.2-develop-a8ea8e60

package/docs/02_Usage.md

@@ -0,0 +1,828 @@
+<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
+
+### Table of Contents
+
+*   [CoreView][1]
+*   [Map][2]
+*   [Photo][3]
+*   [Editor][4]
+*   [StandaloneMap][5]
+*   [getCookie][6]
+*   [getUserAccount][7]
+*   [Viewer][8]
+
+## CoreView
+
+**Extends EventTarget**
+
+Core view is an abstract class used for setting up any of the main Panoramax view components.
+
+It is used to prepare API, internationalization, options checks... for Viewer, StandaloneMap and Editor classes.
+
+### Parameters
+
+*   `container` **([string][9] | [Element][10])** The DOM element to create viewer into
+*   `endpoint` **[string][9]** URL to API to use (must be a [STAC API][11])
+*   `options` **[object][12]?** View options. (optional, default `{}`)
+
+    *   `options.selectedSequence` **[string][9]?** The ID of sequence to highlight on load (defaults to none)
+    *   `options.selectedPicture` **[string][9]?** The ID of picture to highlight on load (defaults to none)
+    *   `options.fetchOptions` **[object][12]** Set custom options for fetch calls made against API ([same syntax as fetch options parameter][13]) (optional, default `null`)
+    *   `options.users` **([string][9] | [Array][14]<[string][9]>)?** List of user IDs to default use for display. Defaults to all users.
+    *   `options.style` **([string][9] | [object][12])?** The map's MapLibre style. This can be an a JSON object conforming to the schema described in the [MapLibre Style Specification][15], or a URL string pointing to one. Defaults to OSMFR vector tiles.
+
+### Properties
+
+*   `_t` **[object][12]** The translations labels
+*   `_selectedSeqId` **[string][9]** The selected sequence ID
+*   `_selectedPicId` **[string][9]** The selected picture ID
+*   `_api` **API** The API handler
+*   `_loader` **Loader** The initial loader message
+*   `_options` **[object][12]** The stored options
+*   `container` **[Element][10]** The DOM container
+
+### destroy
+
+Ends all form of life in this object.
+
+This is useful for Single Page Applications (SPA), to remove various event listeners.
+
+### isWidthSmall
+
+Is the view running in a small container (small embed or smartphone)
+
+Returns **[boolean][16]** True if container is small
+
+### isHeightSmall
+
+Is the view running in a small-height container (small embed or smartphone)
+
+Returns **[boolean][16]** True if container height is small
+
+### select
+
+Change the currently picture and/or sequence.
+Calling the method without parameters unselects.
+
+#### Parameters
+
+*   `seqId` **[string][9]?** The sequence UUID (optional, default `null`)
+*   `picId` **[string][9]?** The picture UUID (optional, default `null`)
+*   `force` **[boolean][16]** Force select even if already selected (optional, default `false`)
+
+### select
+
+Event for sequence/picture selection
+
+Type: [object][12]
+
+#### Properties
+
+*   `detail` **[object][12]** Event information
+
+    *   `detail.seqId` **[string][9]** The selected sequence ID
+    *   `detail.picId` **[string][9]** The selected picture ID (or null if not a precise picture clicked)
+    *   `detail.prevSeqId` **[string][9]?** The previously selected sequence ID (or null if none)
+    *   `detail.prevPicId` **[string][9]?** The previously selected picture ID (or null if none)
+
+### ready
+
+Event for viewer being ready to use (API loaded)
+
+### broken
+
+Event for viewer failing to initially load
+
+Type: [object][12]
+
+#### Properties
+
+*   `detail` **[object][12]** Event information
+
+    *   `detail.error` **[string][9]** The user-friendly error message to display
+
+### map:background-changed
+
+Event for map background changes
+
+Type: [object][12]
+
+#### Properties
+
+*   `detail` **[object][12]** Event information
+
+    *   `detail.background` **[string][9]?** The new selected background (aerial, streets)
+
+### map:users-changed
+
+Event for visible users changes
+
+Type: [object][12]
+
+#### Properties
+
+*   `detail` **[object][12]** Event information
+
+    *   `detail.usersIds` **[Array][14]<[string][9]>?** The list of newly selected users
+
+### map:sequence-hover
+
+Event when a sequence on map is hovered (not selected)
+
+Type: [object][12]
+
+#### Properties
+
+*   `detail` **[object][12]** Event information
+
+    *   `detail.seqId` **[string][9]** The hovered sequence ID
+
+### map:sequence-click
+
+Event when a sequence on map is clicked
+
+Type: [object][12]
+
+#### Properties
+
+*   `detail` **[object][12]** Event information
+
+    *   `detail.seqId` **[string][9]** The clicked sequence ID
+    *   `detail.coordinates` **maplibregl.LngLat** The coordinates of user click
+
+### map:picture-click
+
+Event when a picture on map is clicked
+
+Type: [object][12]
+
+#### Properties
+
+*   `detail` **[object][12]** Event information
+
+    *   `detail.picId` **[string][9]** The clicked picture ID
+    *   `detail.seqId` **[string][9]** The clicked picture's sequence ID
+    *   `detail.feature` **[object][12]** The GeoJSON feature of the picture
+
+### psv:picture-loading
+
+Event for picture starting to load
+
+Type: [object][12]
+
+#### Properties
+
+*   `detail` **[object][12]** Event information
+
+    *   `detail.picId` **[string][9]** The picture unique identifier
+    *   `detail.lon` **[number][17]** Longitude (WGS84)
+    *   `detail.lat` **[number][17]** Latitude (WGS84)
+    *   `detail.x` **[number][17]** New x position (in degrees, 0-360), corresponds to heading (0° = North, 90° = East, 180° = South, 270° = West)
+    *   `detail.y` **[number][17]** New y position (in degrees)
+    *   `detail.z` **[number][17]** New z position (0-100)
+
+### psv:picture-preview-started
+
+Event for picture preview
+
+Type: [object][12]
+
+#### Properties
+
+*   `detail` **[object][12]** Event information
+
+    *   `detail.picId` **[string][9]** The picture ID
+    *   `detail.coordinates` **[Array][14]<[number][17]>** \[x,y] coordinates
+    *   `detail.direction` **[number][17]** The theorical picture orientation
+
+### psv:picture-preview-stopped
+
+Event for end of picture preview
+
+Type: [object][12]
+
+#### Properties
+
+*   `detail` **[object][12]** Event information
+
+    *   `detail.picId` **[string][9]** The picture ID
+
+### psv:view-rotated
+
+Event for viewer rotation
+
+Type: [object][12]
+
+#### Properties
+
+*   `detail` **[object][12]** Event information
+
+    *   `detail.x` **[number][17]** New x position (in degrees, 0-360), corresponds to heading (0° = North, 90° = East, 180° = South, 270° = West)
+    *   `detail.y` **[number][17]** New y position (in degrees)
+    *   `detail.z` **[number][17]** New Z position (between 0 and 100)
+
+### psv:picture-loaded
+
+Event for picture load (low-resolution image is loaded)
+
+Type: [object][12]
+
+#### Properties
+
+*   `detail` **[object][12]** Event information
+
+    *   `detail.picId` **[string][9]** The picture unique identifier
+    *   `detail.lon` **[number][17]** Longitude (WGS84)
+    *   `detail.lat` **[number][17]** Latitude (WGS84)
+    *   `detail.x` **[number][17]** New x position (in degrees, 0-360), corresponds to heading (0° = North, 90° = East, 180° = South, 270° = West)
+    *   `detail.y` **[number][17]** New y position (in degrees)
+    *   `detail.z` **[number][17]** New z position (0-100)
+
+### psv:picture-tiles-loaded
+
+Event launched when all visible tiles of a picture are loaded
+
+Type: [object][12]
+
+#### Properties
+
+*   `detail` **[object][12]** Event information
+
+    *   `detail.picId` **[string][9]** The picture unique identifier
+
+### psv:transition-duration-changed
+
+Event for transition duration change
+
+Type: [object][12]
+
+#### Properties
+
+*   `detail` **[object][12]** Event information
+
+    *   `detail.duration` **[string][9]** New duration (in milliseconds)
+
+## Map
+
+**Extends maplibregl.Map**
+
+Map is the component showing pictures and sequences geolocation.
+
+Note that all functions of [MapLibre GL JS class Map][18] are also available.
+
+### Parameters
+
+*   `parent` **[CoreView][1]** The parent view
+*   `container` **[Element][10]** The DOM element to create into
+*   `options` **[object][12]?** The map options (any of [MapLibre GL settings][19] or any supplementary option defined here) (optional, default `{}`)
+
+    *   `options.raster` **[object][12]?** The MapLibre raster source for aerial background. This must be a JSON object following [MapLibre raster source definition][20].
+    *   `options.background` **[string][9]?** Choose default map background to display (streets or aerial, if raster aerial background available). Defaults to street.
+    *   `options.geocoder` **[object][12]?** Optional geocoder settings
+
+        *   `options.geocoder.engine` **[string][9]?** Set the geocoder engine to use (nominatim, ban)
+
+### destroy
+
+Destroy any form of life in this component
+
+### reloadVectorTiles
+
+Force refresh of vector tiles data
+
+### hasTwoBackgrounds
+
+Check if map offers aerial imagery as well as streets rendering.
+
+Returns **[boolean][16]** True if aerial imagery is available for display
+
+### getBackground
+
+Get the currently selected map background
+
+Returns **[string][9]** aerial or streets
+
+### setBackground
+
+Change the shown background in map.
+
+#### Parameters
+
+*   `bg` **[string][9]** The new background to display (aerial or streets)
+
+### getVisibleUsers
+
+Get the currently visible users
+
+Returns **[Array][14]<[string][9]>** List of visible users
+
+### setVisibleUsers
+
+Make given user layers visible on map, and hide all others (if any)
+
+#### Parameters
+
+*   `visibleIds` **([string][9] | [Array][14]<[string][9]>)** The user layers IDs to display (optional, default `[]`)
+
+### filterUserLayersContent
+
+Filter the visible data content in all visible map layers
+
+#### Parameters
+
+*   `dataType` **[string][9]** sequences or pictures
+*   `filter` **[object][12]** The MapLibre GL filter rule to apply
+
+### displayPictureMarker
+
+Shows on map a picture position and heading.
+
+#### Parameters
+
+*   `lon` **[number][17]** The longitude
+*   `lat` **[number][17]** The latitude
+*   `heading` **[number][17]** The heading
+
+### reloadLayersStyles
+
+Forces reload of pictures/sequences layer styles.
+This is useful after a map theme change.
+
+## Photo
+
+**Extends PSViewer**
+
+Photo is the component showing a single picture.
+It uses Photo Sphere Viewer as a basis, and pre-configure dialog with STAC API.
+
+Note that all functions of [PhotoSphereViewer Viewer class][21] are available as well.
+
+### Parameters
+
+*   `parent` **[CoreView][1]** The parent view
+*   `container` **[Element][10]** The DOM element to create into
+*   `options` **[object][12]?** The viewer options. Can be any of [Photo Sphere Viewer options][22] (optional, default `{}`)
+
+    *   `options.transitionDuration` **[number][17]?** The number of milliseconds the transition animation should be.
+    *   `options.shouldGoFast` **[function][23]?** Function returning a boolean to indicate if we may skip loading HD images.
+
+### getPictureMetadata
+
+Access currently shown picture metadata
+
+Returns **[object][12]** Picture metadata
+
+### goToNextPicture
+
+Displays next picture in current sequence (if any)
+
+### goToPrevPicture
+
+Displays previous picture in current sequence (if any)
+
+### goToPosition
+
+Displays in viewer a picture near to given coordinates
+
+#### Parameters
+
+*   `lat` **[number][17]** Latitude (WGS84)
+*   `lon` **[number][17]** Longitude (WGS84)
+
+Returns **[Promise][24]** Resolves on picture ID if picture found, otherwise rejects
+
+### getXY
+
+Get 2D position of sphere currently shown to user
+
+Returns **[object][12]** Position in format { x: heading in degrees (0° = North, 90° = East, 180° = South, 270° = West), y: top/bottom position in degrees (-90° = bottom, 0° = front, 90° = top) }
+
+### getXYZ
+
+Get 3D position of sphere currently shown to user
+
+Returns **[object][12]** Position in format { x: heading in degrees (0° = North, 90° = East, 180° = South, 270° = West), y: top/bottom position in degrees (-90° = bottom, 0° = front, 90° = top), z: zoom (0 = wide, 100 = zoomed in) }
+
+### getPictureOriginalHeading
+
+Get capture orientation of current picture, based on its GPS.
+
+Returns **any** Picture original heading in degrees (0 to 360°)
+
+### getPictureRelativeHeading
+
+Computes the relative heading of currently selected picture.
+This gives the angle of capture compared to sequence path (vehicle movement).
+
+Returns **any** Relative heading in degrees (-180 to 180)
+
+### clearPictureMetadataCache
+
+Clears the Photo Sphere Viewer metadata cache.
+It is useful when current picture or sequence has changed server-side after first load.
+
+### setXYZ
+
+Change the shown position in picture
+
+#### Parameters
+
+*   `x` **[number][17]** X position (in degrees)
+*   `y` **[number][17]** Y position (in degrees)
+*   `z` **[number][17]** Z position (0-100)
+
+### setHigherContrast
+
+Enable or disable higher contrast on picture
+
+#### Parameters
+
+*   `enable` **[boolean][16]** True to enable higher contrast
+
+### getTransitionDuration
+
+Get the duration of stay on a picture during a sequence play.
+
+Returns **[number][17]** The duration (in milliseconds)
+
+### setTransitionDuration
+
+Changes the duration of stay on a picture during a sequence play.
+
+#### Parameters
+
+*   `value` **[number][17]** The new duration (in milliseconds, between 100 and 3000)
+
+## Editor
+
+**Extends CoreView**
+
+Editor allows to focus on a single sequence, and preview what you edits would look like.
+It shows both picture and map.
+
+Note that you can use any of the [CoreView][25] class functions as well.
+
+### Parameters
+
+*   `container` **([string][9] | [Element][10])** The DOM element to create viewer into
+*   `endpoint` **[string][9]** URL to API to use (must be a [STAC API][11])
+*   `options` **[object][12]?** View options. (optional, default `{}`)
+
+    *   `options.selectedSequence` **[string][9]** The ID of sequence to highlight on load. Must be always defined.
+    *   `options.selectedPicture` **[string][9]?** The ID of picture to highlight on load (defaults to none)
+    *   `options.fetchOptions` **[object][12]** Set custom options for fetch calls made against API ([same syntax as fetch options parameter][13]) (optional, default `null`)
+    *   `options.raster` **[object][12]?** The MapLibre raster source for aerial background. This must be a JSON object following [MapLibre raster source definition][20].
+    *   `options.background` **[string][9]?** Choose default map background to display (streets or aerial, if raster aerial background available). Defaults to street.
+    *   `options.style` **([string][9] | [object][12])?** The map's MapLibre style. This can be an a JSON object conforming to the schema described in the [MapLibre Style Specification][15], or a URL string pointing to one.
+
+### Properties
+
+*   `map` **[Map][2]** The map widget
+*   `psv` **[Photo][3]** The photo widget
+
+### previewSequenceHeadingChange
+
+Preview on map how the new relative heading would reflect on all pictures.
+This doesn't change anything on API-side, it's just a preview.
+
+#### Parameters
+
+*   `relHeading` **[number][17]?** The new relative heading compared to sequence path. In degrees, between -180 and 180 (0 = front, -90 = left, 90 = right). Set to null to remove preview.
+
+## StandaloneMap
+
+**Extends CoreView**
+
+The standalone map viewer allows to see STAC pictures data as a map.
+It only embeds a map (no 360° pictures viewer) with a minimal picture preview (thumbnail).
+
+Note that you can use any of the [CoreView][25] class functions as well.
+
+### Parameters
+
+*   `container` **([string][9] | [Element][10])** The DOM element to create viewer into
+*   `endpoint` **[string][9]** URL to API to use (must be a [STAC API][11])
+*   `options` **[object][12]?** Map options. Various settings can be passed, either the ones defined here, or any of [MapLibre GL settings][19]. (optional, default `{}`)
+
+    *   `options.selectedSequence` **[string][9]?** The ID of sequence to highlight on load (defaults to none)
+    *   `options.selectedPicture` **[string][9]?** The ID of picture to highlight on load (defaults to none)
+    *   `options.fetchOptions` **[object][12]** Set custom options for fetch calls made against API ([same syntax as fetch options parameter][13]) (optional, default `null`)
+    *   `options.minZoom` **[number][17]** The minimum zoom level of the map (0-24). (optional, default `0`)
+    *   `options.maxZoom` **[number][17]** The maximum zoom level of the map (0-24). (optional, default `24`)
+    *   `options.style` **([string][9] | [object][12])?** The map's MapLibre style. This can be an a JSON object conforming to the schema described in the [MapLibre Style Specification][15], or a URL string pointing to one.
+    *   `options.center` **external:maplibre-gl.LngLatLike** The initial geographical centerpoint of the map. If `center` is not specified in the constructor options, MapLibre GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `[0, 0]` Note: MapLibre GL uses longitude, latitude coordinate order (as opposed to latitude, longitude) to match GeoJSON. (optional, default `[0,0]`)
+    *   `options.zoom` **[number][17]** The initial zoom level of the map. If `zoom` is not specified in the constructor options, MapLibre GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `0`. (optional, default `0`)
+    *   `options.bounds` **external:maplibre-gl.LngLatBoundsLike?** The initial bounds of the map. If `bounds` is specified, it overrides `center` and `zoom` constructor options.
+    *   `options.users` **[Array][14]<[string][9]>?** The IDs of users whom data should appear on map (defaults to all)
+
+### Properties
+
+*   `map` **[Map][2]** The map widget
+
+### destroy
+
+Ends all form of life in this object.
+
+This is useful for Single Page Applications (SPA), to remove various event listeners.
+
+## getCookie
+
+Get a cookie value
+
+### Parameters
+
+*   `name` **str** The cookie name
+
+Returns **str** The cookie value, or null if not found
+
+## getUserAccount
+
+Checks if an user account exists
+
+Returns **[object][12]** Object like {"id", "name"} or null if no authenticated account
+
+## Viewer
+
+**Extends CoreView**
+
+Viewer is the main component of the library, showing pictures and map.
+
+Note that you can use any of the [CoreView][25] class functions as well.
+
+### Parameters
+
+*   `container` **([string][9] | [Element][10])** The DOM element to create viewer into
+*   `endpoint` **[string][9]** URL to API to use (must be a [STAC API][11])
+*   `options` **[object][12]?** Viewer options (optional, default `{}`)
+
+    *   `options.selectedPicture` **[string][9]?** Initial picture identifier to display
+    *   `options.position` **[Array][14]<[number][17]>?** Initial position to go to (in \[lat, lon] format)
+    *   `options.hash` **[boolean][16]** Enable URL hash settings (optional, default `true`)
+    *   `options.lang` **[string][9]?** Override language to use (defaults to navigator language, or English if translation not available)
+    *   `options.transition` **int** Duration of stay on a picture during sequence play (excludes loading time) (optional, default `250`)
+    *   `options.fetchOptions` **[object][12]** Set custom options for fetch calls made against API ([same syntax as fetch options parameter][13]) (optional, default `null`)
+    *   `options.users` **([string][9] | [Array][14]<[string][9]>)?** The IDs of users whom data should appear on map (defaults to all). Only works with API having a "user-xyz" or "user-xyz-style" endpoint.
+    *   `options.picturesNavigation` **[string][9]?** The allowed navigation between pictures ("any": no restriction (default), "seq": only pictures in same sequence, "pic": only selected picture)
+    *   `options.map` **([boolean][16] | [object][12])** Enable contextual map for locating pictures. Setting to true or passing an object enables the map. Various settings can be passed, either the ones defined here, or any of [MapLibre GL settings][19] (optional, default `false`)
+
+        *   `options.map.startWide` **[boolean][16]?** Show the map as main element at startup (defaults to false, viewer is wider at start)
+        *   `options.map.minZoom` **[number][17]** The minimum zoom level of the map (0-24). (optional, default `0`)
+        *   `options.map.maxZoom` **[number][17]** The maximum zoom level of the map (0-24). (optional, default `24`)
+        *   `options.map.raster` **[object][12]?** The MapLibre raster source for aerial background. This must be a JSON object following [MapLibre raster source definition][20].
+        *   `options.map.center` **external:maplibre-gl.LngLatLike** The initial geographical centerpoint of the map. If `center` is not specified in the constructor options, MapLibre GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `[0, 0]` Note: MapLibre GL uses longitude, latitude coordinate order (as opposed to latitude, longitude) to match GeoJSON. (optional, default `[0,0]`)
+        *   `options.map.zoom` **[number][17]** The initial zoom level of the map. If `zoom` is not specified in the constructor options, MapLibre GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `0`. (optional, default `0`)
+        *   `options.map.bounds` **external:maplibre-gl.LngLatBoundsLike?** The initial bounds of the map. If `bounds` is specified, it overrides `center` and `zoom` constructor options.
+        *   `options.map.geocoder` **[object][12]?** Optional geocoder settings
+
+            *   `options.map.geocoder.engine` **[string][9]?** Set the geocoder engine to use (nominatim, ban)
+        *   `options.map.background` **[string][9]?** Choose default map background to display (streets or aerial, if raster aerial background available). Defaults to street.
+        *   `options.map.theme` **[string][9]** The colouring scheme to use for pictures and sequences on map (default, age, type) (optional, default `default`)
+    *   `options.style` **([string][9] | [object][12])?** The map's MapLibre style. This can be an a JSON object conforming to the schema described in the [MapLibre Style Specification][15], or a URL string pointing to one.
+    *   `options.widgets` **[object][12]?** Settings related to viewer buttons and widgets
+
+        *   `options.widgets.editIdUrl` **[string][9]?** URL to the OpenStreetMap iD editor (defaults to OSM.org iD instance)
+        *   `options.widgets.customWidget` **([string][9] | [Element][10])?** A user-defined widget to add (will be shown over "Share" button)
+        *   `options.widgets.mapAttribution` **[string][9]?** Override the default map attribution (read from MapLibre style)
+        *   `options.widgets.iframeBaseURL` **[string][9]?** Set a custom base URL for the "Share as iframe" menu (defaults to current page)
+
+### Properties
+
+*   `map` **[Map][2]** The map widget
+*   `psv` **[Photo][3]** The photo widget
+
+### destroy
+
+Ends all form of life in this object.
+
+This is useful for Single Page Applications (SPA), to remove various event listeners.
+
+### refreshPSV
+
+Force reload of texture and tiles in Photo Sphere Viewer.
+
+### setPopup
+
+Change full-page popup visibility and content
+
+#### Parameters
+
+*   `visible` **[boolean][16]** True to make it appear
+*   `content` **([string][9] | [Array][14]<[Element][10]>)?** The new popup content (optional, default `null`)
+
+### playSequence
+
+Goes continuously to next picture in sequence as long as possible
+
+### stopSequence
+
+Stops playing current sequence
+
+### isSequencePlaying
+
+Is there any sequence being played right now ?
+
+Returns **[boolean][16]** True if sequence is playing
+
+### toggleSequencePlaying
+
+Starts/stops the reading of pictures in a sequence
+
+### moveCenter
+
+Move the view of main component to its center.
+For map, center view on selected picture.
+For picture, center view on image center.
+
+### moveLeft
+
+Moves the view of main component slightly to the left.
+
+### moveRight
+
+Moves the view of main component slightly to the right.
+
+### moveUp
+
+Moves the view of main component slightly to the top.
+
+### moveDown
+
+Moves the view of main component slightly to the bottom.
+
+### isMapWide
+
+Is the map shown as main element instead of viewer (wide map mode) ?
+
+Returns **[boolean][16]** True if map is wider than viewer
+
+### getPicturesNavigation
+
+Get current pictures navigation mode.
+
+Returns **[string][9]** The picture navigation mode ("any": no restriction, "seq": only pictures in same sequence, "pic": only selected picture)
+
+### setPicturesNavigation
+
+Switch the allowed navigation between pictures.
+
+#### Parameters
+
+*   `pn` **[string][9]** The picture navigation mode ("any": no restriction, "seq": only pictures in same sequence, "pic": only selected picture)
+
+### toggleJOSMLive
+
+Enable or disable JOSM live editing using [Remote][26]
+
+#### Parameters
+
+*   `enabled` **[boolean][16]** Set to true to enable JOSM live
+
+Returns **[Promise][24]** Resolves on JOSM live being enabled or disabled
+
+### setFocus
+
+Change the viewer focus (either on picture or map)
+
+#### Parameters
+
+*   `focus` **[string][9]** The object to focus on (map, pic)
+*   `skipEvent` **[boolean][16]** True to not send focus-changed event (optional, default `false`)
+
+### toggleFocus
+
+Toggle the viewer focus (either on picture or map)
+
+### setUnfocusedVisible
+
+Change the visibility of reduced component (picture or map)
+
+#### Parameters
+
+*   `visible` **[boolean][16]** True to make reduced component visible
+
+### toggleUnfocusedVisible
+
+Toggle the visibility of reduced component (picture or map)
+
+### setFilters
+
+Change the map filters
+
+#### Parameters
+
+*   `filters` **[object][12]** Filtering values
+
+    *   `filters.minDate` **[string][9]?** Start date for pictures (format YYYY-MM-DD)
+    *   `filters.maxDate` **[string][9]?** End date for pictures (format YYYY-MM-DD)
+    *   `filters.type` **[string][9]?** Type of picture to keep (flat, equirectangular)
+    *   `filters.camera` **[string][9]?** Camera make and model to keep
+    *   `filters.theme` **[string][9]?** Map theme to use
+*   `skipZoomIn` **[boolean][16]** If true, doesn't force zoom in to map level >= 7 (optional, default `false`)
+
+### sequence-playing
+
+Event for sequence starting to play
+
+### sequence-stopped
+
+Event for sequence stopped playing
+
+### pictures-navigation-changed
+
+Event for pictures navigation mode change
+
+Type: [object][12]
+
+#### Properties
+
+*   `detail` **[object][12]** Event information
+
+    *   `detail.value` **[string][9]** New mode (any, pic, seq)
+
+### josm-live-enabled
+
+Event for JOSM live enabled
+
+### josm-live-disabled
+
+Event for JOSM live disabled
+
+### focus-changed
+
+Event for focus change (either map or picture is shown wide)
+
+Type: [object][12]
+
+#### Properties
+
+*   `detail` **[object][12]** Event information
+
+    *   `detail.focus` **[string][9]** Component now focused on (map, pic)
+
+### filters-changed
+
+Event for filters changes
+
+Type: [object][12]
+
+#### Properties
+
+*   `detail` **[object][12]** Event information
+
+    *   `detail.minDate` **[string][9]?** The minimum date in time range (ISO format)
+    *   `detail.maxDate` **[string][9]?** The maximum date in time range (ISO format)
+    *   `detail.type` **[string][9]?** Camera type (equirectangular, flat, null/empty string for both)
+    *   `detail.camera` **[string][9]?** Camera make and model
+    *   `detail.theme` **[string][9]?** Map theme
+
+[1]: #coreview
+
+[2]: #map
+
+[3]: #photo
+
+[4]: #editor
+
+[5]: #standalonemap
+
+[6]: #getcookie
+
+[7]: #getuseraccount
+
+[8]: #viewer
+
+[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+
+[10]: https://developer.mozilla.org/docs/Web/API/Element
+
+[11]: https://github.com/radiantearth/stac-api-spec/blob/main/overview.md
+
+[12]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+
+[13]: https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters
+
+[14]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
+
+[15]: https://maplibre.org/maplibre-gl-js-docs/style-spec/
+
+[16]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+
+[17]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
+
+[18]: https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/
+
+[19]: https://maplibre.org/maplibre-gl-js-docs/api/map/#map-parameters
+
+[20]: https://maplibre.org/maplibre-style-spec/sources/#raster
+
+[21]: https://photo-sphere-viewer.js.org/api/classes/core.viewer
+
+[22]: https://photo-sphere-viewer.js.org/guide/config.html#standard-options
+
+[23]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
+
+[24]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise
+
+[25]: #CoreView
+
+[26]: https://josm.openstreetmap.de/wiki/Help/RemoteControlCommands