Module Micrio

The Micrio client API

Using Micrio inside your own website

You can fully implement Micrio in your website in just 2 steps:

Include Micrio into your project:
1. If you are using NodeJS, you can install the Micrio viewer using npm i @micrio/client. After that, on the page or within the component you need it, include import @micrio/client at the top of the file. This auto-binds Micrio to any <micr-io> elements you create.
2. If you want to use plain HTML, insert the following statement into your document <head>:
```
 <script src="https://r2.micr.io/micrio-5.1.0.min.js" defer></script>
```
Use the special Micrio <micr-io> HTML tag inside your document:
```
 <micr-io id="{your image ID}"></micr-io>
```

This will place the image element and will auto-load all required data and any markers and tours you have created in the Micrio Dashboard.

You can style and place this element using basic CSS.

For any custom behavior, you can use this client API.

A simple example

<micr-io id="dzzLm" data-ui="false"></micr-io>

yields in a zoomable Micrio image without any HTML controls:

To access this Micrio instance using JS, you can simply query the HTML element:

const micrio = document.querySelector('micr-io');

This yields a HTMLMicrioElement element, which can be immediately accessed.

For instance, to animate the camera to a certain viewport, let's add this button:

<button onclick="() => micrio.camera.flyToView([.25,.25,.30,.30])">Animate the camera</button>

Using the API inside your own application

Using Javascript, you can simply follow this documentation and examples when creating any custom behavior with Micrio.

If you use TypeScript in your project, you can use the Micrio Declarations file micrio-5.1.min.d.ts!

Simply include the d.ts file in your project in a directory included in your project, and implement it:

import type { HTMLMicrioElement } from 'Micrio';

// This gives you full type checking and any editor autocompletion
const micrio = document.querySelector('micr-io') as HTMLMicrioElement;

// VS Code will fully know what you're doing here
micrio.camera.flyToView([.2,.2,.3,.3]).then(() => console.log('done!'));

Author

Marcel Duin marcel@micr.io

Index

Namespaces

Enums Models State

Classes

Camera Canvas Events GallerySwiper Grid HTMLMicrioElement MicrioImage VideoTourInstance Wasm