Menu

3. How to make custom JavaScript implementations

In this tutorial we'll learn how to make custom interactions with the Micrio image, and image markers separately.

This is a step by step tutorial. For more in-depth documentation on the JS API, visit the relevant documentation.

Note: the full example for this tutorial can be found HERE.

Before starting this tutorial, we're assuming you've already completed the following step:

3.1. Access the image in JavaScript

To access a Micrio image using JavaScript, either create it in Javascript put this in a <script> tag below where the <micr-io> element is in your HTML: 

// The Micrio HTML element
let _micrioElement = document.getElementById('your-micrio-id');

This _micrioElement object will be the main reference HTML Element throughout this tutorial.

3.2. Custom behavior on image events

This section covers some examples for when you're working with your own HTML controls to control the image from inside your own webpage.

3.2.1. A custom action when the image is loaded

If you have a custom UI element that you want to show or hide based on whether the user is zoomed in or not, you can use the load event. 

_micrioElement.addEventListener('load', (e) => {
	console.info('The image is done loading!');

	// You can do whatever you want here
});

3.2.2. Find out when the user is zoomed in

If you have site behaviour based on whether the user is zoomed in or not, you can use the zoom event. 

_micrioElement.addEventListener('zoom', (evt) => {
	// The current camera coordinates and scale are evt.detail
	let currentCoords = evt.details;
	console.info('Current camera coords :', currentCoords);

	// Let's check if the user is fully zoomed out

	// We need a reference to the Micrio JS object here.
	// From there we can access the virtual camera methods:

	if(_micrioElement.micrio.camera.isZoomedOut()) {
		console.info('The user is totally zoomed out!');
	}
	else {
		// If you have any scale-based custom actions, run them here:
		console.info('The user has zoomed in to scale: ', currentCoords[2]);
	}
});

3.3. Custom marker behavior

Markers are very powerful objects within an image. They can trigger a popup, jump to another image, or have a custom action defined within your website. This section gives some examples for marker interaction.

Refer to the marker events documentation for more context.

3.3.1. A custom action when a marker is opened

When you want to have a custom action executed once a user has opened a marker and you want to wait for the camera to have flown to the marker's viewport, do this: 

_micrioElement.addEventListener('marker-opened', (evt) => {
	// The current camera coordinates and scale are evt.detail
	let marker = evt.detail;

	console.info('Opened marker and the camera has flown there :', marker);

	// Do something cool!
});

3.3.2. No popup on marker open

To prevent a marker popup from being opened, you can use the marker-open event, which is fired when the user has clicked a marker, but before any animation or popup rendering is done. 

_micrioElement.addEventListener('marker-open', (evt) => {
	// The current camera coordinates and scale are evt.detail
	let marker = evt.detail;

	// Immediately close the popup
	marker.popup.close();

	console.info('Marker is clicked and prevented popup to open :', marker);

	// Do something cool!
});

Conclusion

In this tutorial, you've gone through some examples to handle custom Micrio events. From here on, you can implement these with your own functions and wishes.

The full working HTML of this tutorial can be found HERE.

If you have any more questions, please drop us a line and we'll try to help you further!