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 the Micrio JS script tag in your HTML <head>:

 <script src="https://b.micr.io/micrio-5.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.0.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

Copyright

Q42 Internet BV, Micrio, 2015 - 2024

Link

https://micr.io/ , https://q42.nl/en/

Index

Namespaces

Enums Models State

Classes

Camera Canvas Events GallerySwiper Grid HTMLMicrioElement MicrioImage VideoTourInstance Wasm