3. How to make custom JavaScript implementations
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:
- You've got your own HTML page with a Micrio image embedded, following the previous tutorial.
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
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.detail; 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
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!