Micrio Knowledge Base

Appearance

Marker element settings ​

The "Marker" tab in the marker editor has all relevant settings for your in-image marker-element, ie. the clickable button that will open / activate this marker.

There are several sections in this panel:

Position ​

Marker position

If you want to move the marker, you can just drag it inside the image to place it where you wish. However, for more fine-grained placement, you can adjust the individual X and Y positions here.

TIP

If you are working in a 360° object, please refer to this page for marker placement

Icon and display ​

Marker icon and display

By default, markers are displayed as a simple circle element. In this panel, you can change this:

  • Invisible marker: if you select this option, the marker will not be displayed at all in the Micrio viewer. It will have no relatable HTML element. Useful cases for this are:

    • This marker is part of a marker tour, and you don't want your visitors to open this tour step by themselves
    • This marker is used as positional audio element (see below), and it does not have any other relevant content.

  • Marker icon: Here, you can select a pre-defined icon that will be used to display this marker. You can also upload a custom icon using the "+"-button.

    TIP

    Any uploaded custom icons can be re-used within this image, so you won't have to re-upload the icon for each marker

    Additionally, you can also select "No icon". This differs from the Invisible marker option, that the marker will still be placed in the viewer HTML, just without any default styling. This allows you to apply your own CSS to the marker, for instance.

Tags ​

Marker tags

If you have a lot of markers, or you want to group them for custom styling or behaviour if you have embedded this image in your own website, you can add Tags to individual markers.

Tags by themselves have no effect on the default Micrio UI. However, it allows you to easily customize tagged markers in the <micr-io> embedded viewer:

Tags are CSS class names ​

Each tag you give to a marker, will be added to the clickable marker's HTML-element in the Micrio viewer, allowing you to directly target it using CSS.

For instance, a marker with a tag "culture", will have this HTML element in the viewer:

html
<div class="micrio-marker culture default" id="..." style="...">
	<!-- the inner object -->
</div>

Meaning, if you want to give each marker with tag "culture" a different color using CSS:

css
.micrio-marker.culture {
	/* All "culture" markers are blue */
	--micrio-marker-color: #0f0;
}

Marker tags can be accessed by JavaScript ​

Additionally, if you want to attach specific behavior to markers, you can find these elements by searching/filtering the Marker elements in the MicrioImage.$data.markers[] array:

ts
// Get all image markers with "culture" tag
const cultureMarkers = YourHTMLMicrioElement.$current.$data.markers
	.filter((m:Micrio.Models.ImageData.Marker) => m.tags.includes('culture'));

Label ​

Marker label

By default, when the visitors hover the marker element, the marker's title will be printed next to it as a label.

Using the "Custom marker label" setting, you can set your own label that will appear next to the marker element. This is useful if your main marker title is very long, for instance.

Positional audio ​

Marker positional audio

INFO

In the previous dashboard, this was a separate content item "positional audio". In this dashboard version, that functionality has migrated to be a property of a marker

If you want to enrich your image with positional audio, ie. have audio effects play at a certain location in your image, you can use this function.

It allows you to physically place audio elements in the image, that will move together with how the visitor is viewing your image. If they zoom in, the audio will get louder, and if they pan through the image, the audio will move along with this marker's position.

This is great for very immersive storytelling projects, and allows you to create a dynamic soundscape through your images.

TIP

This is not to be confused with the marker popup audio property of this marker

By using this panel, you can upload an audio file from your computer (MP3 format), which will be connected to this marker's position. So if you move the marker, the audio will move together with it.

The panel settings are:

  • Playing mode: By default, the audio file will automatically play when the image is opened, meaning that the visitor will hear the audio all the time. Alternatively, you can set this to only play when the marker is opened.

  • Don't play on mobile devices: In order to have a more minimal viewing experience, or to save mobile bandwidth, to not play this audio sample on mobile devices.

  • Silence between loops: If you have an audio sample that you only want to play sporadically (for instance, the sound of a door opening), you can set a pause between loops in seconds. Set this to 60, if you only want the sample to play once a minute.

  • Volume: The relative volume that this audio sample will be played at.

    TIP

    This does not influence "how far away" you will hear the sample in the image! Use "Speaker size" for that.

  • Speaker size: This corresponds to the orange circle you see around the marker element in the editor. This is the cone size of the speaker-- it is not the limit where the visitors will hear it, but rather how powerful the audio file will be. Make this very small, and the user will have to zoom in fully to hear it. Make this very small, and the user will hear the audio no matter where in the image they are viewing.

Marker settings ​

The "Marker settings" panel has a direct link to the main image's Marker Settings, where you can set image-wide settings such as default label display, automatic marker clustering, and more.