Base image data

The MicrioData.ImageInfo.ImageInfo JSON data object, used to pass to HTMLMicrioElement.open.

The static image information, such as original resolution, image type, title, and all non-language specific settings ([[MicrioData.Settings]]), such as initial viewport, camera behavior, and 360° settings.

The only required field is id. If only the id field is specified, Micrio attempts to download the additional image data by itself (info.json), published by the Micrio servers. This data will also include image title, and any custom viewing settings set in the image editor.

This is a minimal accepted example:

{
    "id": "dzzLm",
}

If you have manually entered the image width and height, it will not download the info.json file, assuming you have provided correct and complete data:

{
    "id": "dzzLm",
    "width": 41472,
    "height": 30219
}

Optionally, when using HTMLMicrioElement <micr-io> tag attributes, these will overwrite whatever is loaded from the server. So if in the Micrio editor you have enabled the fullscreen toggle button, you can disable it in your own HTML using <micr-io fullscreen="false">.

Index

Type aliases

ImageInfo

ImageInfo: { id: string; path: string; version: number; width: number; height: number; tileSize: number; settings: Partial<Settings>; tilesId?: string; tileExtension?: string; title?: string; slug?: string; lang?: string; cultures?: string; is360?: boolean; isWebP?: boolean; isPng?: boolean; isSingle?: boolean; format?: string; legacyTiles?: boolean }

A Micrio image's main static image data object

Type declaration

id: string

The image id

required
path: string

The image base path URI, with a trailing /

default
https://b.micr.io/
version: number

The Micrio version this image was created in

default
autoloaded
width: number

The original image width

default
autoloaded
height: number

The original image height

default
autoloaded
tileSize: number

The original tile size in px

default
autoloaded
settings: Partial<Settings>

The image settings, such as viewport/UI settings, camera and user event behavior
Optional tilesId?: string

Use an alternative image ID for the image tiles
Optional tileExtension?: string

Optional custom file extension for tiles
Optional title?: string

The image title (default: autoloaded)
Optional slug?: string

The image slug (default: autoloaded)
Optional lang?: string

The initial data language
Optional cultures?: string

The available image data languages, comma-separated (default: autoloaded)
Optional is360?: boolean

The image is 360 degrees
Optional isWebP?: boolean

The image tiles are in WebP format
Optional isPng?: boolean

The image tiles are in PNG format
Optional isSingle?: boolean

Use a custom, single source uri for the zoomable image / video
Optional format?: string

A custom format (dz for DeepZoom, iiif for IIIF)
Optional legacyTiles?: boolean

Use this for old (<1.8) versions of Micrio

Settings

Settings: { view: View; restrict?: View; focus?: number[]; infoUrl?: string; static?: boolean; thumbSrc?: string; initType?: string; limitToCoverScale?: boolean; lazyload?: boolean; noExternals?: boolean; skipMeta?: boolean; fadeBetween?: boolean; keepRendering?: boolean; noGTag?: boolean; camspeed?: number; dragElasticity?: number; zoomLimit?: number; noRetina?: boolean; zoomLimitDPRFix?: boolean; freeMove?: boolean; resetView?: boolean; hookEvents?: boolean; hookKeys?: boolean; noZoom?: boolean; hookScroll?: boolean; hookPinch?: boolean; hookDrag?: boolean; twoFingerPan?: boolean; controlZoom?: boolean; noUI?: boolean; noControls?: boolean; fullscreen?: boolean; noLogo?: boolean; noOrgLogo?: boolean; noToolbar?: boolean; showInfo?: boolean; social?: boolean; minimap?: boolean; alwaysShowMinimap?: boolean; minimapWidth?: number; minimapHeight?: number; doTourJumps?: boolean; audio?: boolean; startVolume?: number; musicVolume?: number; mutedVolume?: number; muteOnBlur?: boolean; cmPerPx?: number; cmWidth?: number; cmHeight?: number; clusterMarkers?: boolean; micrioSplitLink?: string; secondaryInteractive?: boolean; noFollow?: boolean; js?: { href: string }; css?: { href: string }; markersScale?: boolean; _markers?: MarkerSettings; _360?: { closeTop?: boolean; video?: { video?: { width: number; height: number; fileUrl: string }; autoplay?: boolean; muted?: boolean; loop?: boolean; controls?: boolean }; orientation?: number }; _meta?: { crossfadeDuration?: number; scripts?: string[]; styles?: string[] }; ui?: Partial<UserInterfaceSettings> }

Micrio image settings, which is included as ImageInfo.settings.

Type declaration

view: View

The starting viewport ([x0,y0,x1,y1])
Optional restrict?: View

Restrict navigation to this viewport ([x0,y0,x1,y1])
Optional focus?: number[]

Load the image focussed on this coordinate ([x, y])
Optional infoUrl?: string

Use a custom uri for the info json file
Optional static?: boolean

Render this image as a static image
Optional thumbSrc?: string

Use a custom thumbnail image uri
Optional initType?: string

The starting viewport. Possible values cover and contain. Defaults to contain
Optional limitToCoverScale?: boolean

The user cannot zoom out more than a fully covered view
Optional lazyload?: boolean

Initialize the image when the container is scrolled into view (default: false)
Optional noExternals?: boolean

Don't load any custom JS or CSS scripts
Optional skipMeta?: boolean

Don't load this image's [[MicrioData]] (markers, tours, etc)
Optional fadeBetween?: boolean

Do a crossfade when navigating between images (default: true)
Optional keepRendering?: boolean

Don't stop drawing frames when idle
Optional noGTag?: boolean

Don't load GTM module
Optional camspeed?: number

The camera animation speed (default: 1)
Optional dragElasticity?: number

Kinetic dragging sensitivity (default: 1)
Optional zoomLimit?: number

The maximum zoom level in % of the original (default: 1)
Optional noRetina?: boolean

Turn off support for high DPI screens
Optional zoomLimitDPRFix?: boolean

Adjust the maximum zoom of high DPI screens to that of regular displays
Optional freeMove?: boolean

Allow the user to pan and zoom out of image bounds
Optional resetView?: boolean

When navigating back to this image from another image, reset the initial view
Optional hookEvents?: boolean

Hook user events (default: true)
Optional hookKeys?: boolean

Hook keyboard controls (default: false)
Optional noZoom?: boolean

Don't allow the user to zoom in or out
Optional hookScroll?: boolean

Use the mousewheel or trackpad scrolling for zooming (default: true)
Optional hookPinch?: boolean

Allow pinch to zoom on touch devices (default: true)
Optional hookDrag?: boolean

Allow panning through the image (default: true)
Optional twoFingerPan?: boolean

Force two-finger panning on touch devices (default: false)
Optional controlZoom?: boolean

Force using the CTRL/CMD-keys to zoom in using scrolling (default: false)
Optional noUI?: boolean

Don't load any UI elements
Optional noControls?: boolean

Don't show any controls in the UI
Optional fullscreen?: boolean

Show a fullscreen button if supported
Optional noLogo?: boolean

Don't show the Micrio logo on the top left
Optional noOrgLogo?: boolean

Don't show the organisation logo on the top right
Optional noToolbar?: boolean

Don't show the menu bar with tours and custom pages
Optional showInfo?: boolean

Show an info modal with the image title and description
Optional social?: boolean

Show a social sharing button
Optional minimap?: boolean

Show the minimap (default: true)
Optional alwaysShowMinimap?: boolean

Don't fade out the minimap (default: false)
Optional minimapWidth?: number

The minimap maximum width, in px (default: 200)
Optional minimapHeight?: number

The minimap maximum height, in px (default: 160)
Optional doTourJumps?: boolean

More natural camera zooming animation during transitions (default: true)
Optional audio?: boolean

Enable the audio controller (default: true)
Optional startVolume?: number

The starting audio volume [0-1] (default: 1)
Optional musicVolume?: number

The music audio volume [0-1] (default: 1)
Optional mutedVolume?: number

The audio volume when other media is playing [0-1] (default: 0)
Optional muteOnBlur?: boolean

Mute the audio when the current browser tab loses focus
Optional cmPerPx?: number

The physical resolution of the object in cm per px
Optional cmWidth?: number

The physical width of the object in cm
Optional cmHeight?: number

The physical height of the object in cm
Optional clusterMarkers?: boolean

Overlapping markers are clustered
Optional micrioSplitLink?: string

A static split-screen Micrio Image ID
Optional secondaryInteractive?: boolean

When this is a secondary image in split screen, allow independent navigating
Optional noFollow?: boolean

When this is a secondary image, don't follow the main image's navigation
Optional js?: { href: string }

Load a custom JS file with this image
- href: string
  
  The asset href
Optional css?: { href: string }

Load a custom CSS file with this image
- href: string
  
  The asset href
Optional markersScale?: boolean

All markers are scaled with the image
Optional _markers?: MarkerSettings

Optional marker settings
Optional _360?: { closeTop?: boolean; video?: { video?: { width: number; height: number; fileUrl: string }; autoplay?: boolean; muted?: boolean; loop?: boolean; controls?: boolean }; orientation?: number }

Optional settings for 360 images/video
- Optional closeTop?: boolean
  
  Vertically stretch the image to a full sphere if the image is not 2:1 ratio
- Optional video?: { video?: { width: number; height: number; fileUrl: string }; autoplay?: boolean; muted?: boolean; loop?: boolean; controls?: boolean }
  
  A 360 video object
  - Optional video?: { width: number; height: number; fileUrl: string }
    
    Optional video asset object
    - width: number
    - height: number
    - fileUrl: string
      
      The video asset url
  - Optional autoplay?: boolean
    
    Try to autoplay the video
  - Optional muted?: boolean
    
    The video is muted
  - Optional loop?: boolean
    
    Loop the video
  - Optional controls?: boolean
    
    Show video player controls
- Optional orientation?: number
  
  The Y-orientation in degrees of how the picture was taken
Optional _meta?: { crossfadeDuration?: number; scripts?: string[]; styles?: string[] }

Freeform custom settings, this is the "Custom JSON" field in the image editor
- Optional crossfadeDuration?: number
  
  Optional image crossfade duration, in seconds
- Optional scripts?: string[]
  
  An array of JavaScript uris to load for this Micrio instance
- Optional styles?: string[]
  
  An array of CSS uris to load for this Micrio instance
Optional ui?: Partial<UserInterfaceSettings>

UI customizations

MarkerSettings

MarkerSettings: { markerIcon?: string; markerColor?: string; markerSize?: string; zoomOutAfterClose?: boolean; zoomOutAfterCloseSpeed?: number; showTitles?: boolean; titlesNoScale?: boolean; staticPopups?: boolean; staticMobilePopups?: boolean; viewportIsMarker?: boolean; embedsInHtml?: boolean; autoStartTour?: boolean; tourControlsInPopup?: boolean; canMinimizePopup?: boolean }

Image-wide marker settings

Type declaration

Optional markerIcon?: string

The uri of the default marker icon
Optional markerColor?: string

The default marker color
Optional markerSize?: string

The default marker size in px
Optional zoomOutAfterClose?: boolean

Zoom out when closing a marker
Optional zoomOutAfterCloseSpeed?: number

Relative speed factor when zooming out after close
Optional showTitles?: boolean

Show the titles for all markers on hover
Optional titlesNoScale?: boolean

Don't scale titles if marker is scaling
Optional staticPopups?: boolean

All marker popups are static
Optional staticMobilePopups?: boolean

All marker popups are static on mobile
Optional viewportIsMarker?: boolean

All markers are sized to their viewports
Optional embedsInHtml?: boolean

All marker embeds are printed in HTML, not WebGL
Optional autoStartTour?: boolean

Auto-start a marker tour when just opening marker
Optional tourControlsInPopup?: boolean

Tour controls in popup
Optional canMinimizePopup?: boolean

Allow marker popups to be minimized

UserInterfaceSettings

UserInterfaceSettings: { icons?: { zoomIn?: string; zoomOut?: string; fullscreenEnter?: string; fullscreenLeave?: string; close?: string; next?: string; prev?: string; play?: string; pause?: string; subtitles?: string; subtitlesOff?: string; muted?: string; unmuted?: string } }

Custom interface settings

Type declaration

Optional icons?: { zoomIn?: string; zoomOut?: string; fullscreenEnter?: string; fullscreenLeave?: string; close?: string; next?: string; prev?: string; play?: string; pause?: string; subtitles?: string; subtitlesOff?: string; muted?: string; unmuted?: string }
- Optional zoomIn?: string
  
  The raw SVG string for zoom-in
- Optional zoomOut?: string
  
  The raw SVG string for zoom-out
- Optional fullscreenEnter?: string
  
  The raw SVG string for fullscreen-start
- Optional fullscreenLeave?: string
  
  The raw SVG string for fullscreen-stop
- Optional close?: string
  
  The raw SVG string for close
- Optional next?: string
  
  Next step button
- Optional prev?: string
  
  Previous step button
- Optional play?: string
  
  Play button
- Optional pause?: string
  
  Pause button
- Optional subtitles?: string
  
  Subtitles icon
- Optional subtitlesOff?: string
  
  Subtitles turned off icon
- Optional muted?: string
  
  Muted icon
- Optional unmuted?: string
  
  Unmuted icon

Base image data

Index

Type aliases

Type aliases

ImageInfo

Type declaration

id: string

path: string

version: number

width: number

height: number

tileSize: number

settings: Partial<Settings>

Optional tilesId?: string

Optional tileExtension?: string

Optional title?: string

Optional slug?: string

Optional lang?: string

Optional cultures?: string

Optional is360?: boolean

Optional isWebP?: boolean

Optional isPng?: boolean

Optional isSingle?: boolean

Optional format?: string

Optional legacyTiles?: boolean

Settings

Type declaration

view: View

Optional restrict?: View

Optional focus?: number[]

Optional infoUrl?: string

Optional static?: boolean

Optional thumbSrc?: string

Optional initType?: string

Optional limitToCoverScale?: boolean

Optional lazyload?: boolean

Optional noExternals?: boolean

Optional skipMeta?: boolean

Optional fadeBetween?: boolean

Optional keepRendering?: boolean

Optional noGTag?: boolean

Optional camspeed?: number

Optional dragElasticity?: number

Optional zoomLimit?: number

Optional noRetina?: boolean

Optional zoomLimitDPRFix?: boolean

Optional freeMove?: boolean

Optional resetView?: boolean

Optional hookEvents?: boolean

Optional hookKeys?: boolean

Optional noZoom?: boolean

Optional hookScroll?: boolean

Optional hookPinch?: boolean

Optional hookDrag?: boolean

Optional twoFingerPan?: boolean

Optional controlZoom?: boolean

Optional noUI?: boolean

Optional noControls?: boolean

Optional fullscreen?: boolean

Optional noLogo?: boolean

Optional noOrgLogo?: boolean

Optional noToolbar?: boolean

Optional showInfo?: boolean

Optional social?: boolean

Optional minimap?: boolean

Optional alwaysShowMinimap?: boolean

Optional minimapWidth?: number

Optional minimapHeight?: number

Optional doTourJumps?: boolean

Optional audio?: boolean

Optional startVolume?: number

Optional musicVolume?: number

Optional mutedVolume?: number

Optional muteOnBlur?: boolean

Optional cmPerPx?: number

Optional cmWidth?: number

Optional cmHeight?: number

Optional clusterMarkers?: boolean

Optional micrioSplitLink?: string

Optional secondaryInteractive?: boolean