Micrio Knowledge Base

Appearance

Markers ​

Markers are a powerful way to tell the story behind your images. A marker (or hotspot) can represent different data about an area or detail of the image.

A marker manifests itself as a clickable, button on top of the image. What happens when you click, can be several things:

  • A popup can open with text, audio, images
  • A full-window popover can open showing a full size video
  • A custom page can be opened
  • Or, using JavaScript, you can let it trigger any custom action inside your own website.

Opening the marker editor ​

To enter the marker editor, follow these steps:

  1. Open the image that you want to enrich in the dashboard:

    marker-adding-0

  2. Open the marker editor by clicking "MARKERS" at the top

    marker-adding-1

Adding a marker ​

By using the "Create New Marker" button on the bottom right, and then click the position in the image where you want to create it.

Preview & Publish ​

Click the Preview button on the top right to check out your image with the markers. And Publish to share it with the world.

How to edit a marker ​

To edit a marker, first select the marker on your image, and the editable details will appear on the right.

After creating a new marker or selecting an existing one, the marker will light up and there will be a dark rectangle behind it in the image.

marker-adding-2

Changing the view Rectangle ​

The dark view rectangle is the viewport the camera will fly to when the user has opened this marker. This should contain the part of the image that has the detail that the marker is about.

To change this rectangle, simply click to select it, after which you can move and resize it to your needs.

Hint: Make sure the marker main icon is inside this rectangle, otherwise users won't see the (full) popup window when they have opened the marker. It's always a good idea to place the marker itself in the top left of the rectangle, ensuring the popups are displayed fully on many possible different screen sizes.

Marker setting panels ​

The panel on the right shows the selected marker settings and has 3 tabs:

  • "Popup content" Marker popup content settings. You can add text, photos, videos, and even embeds from YouTube or Vimeo.

  • Under "Marker" you can set a custom icon for your marker and select additional settings such as the camera behavior when clicking the marker.

  • Under "Advanced" you can set a custom CSS classname to style the marker and popup, create a video tour that starts playing when the marker is opened, and add custom JSON that will be published with the individual marker.

Styling Markers ​

Markers are incredibly versatile objects. By default, they simply show a popup that has information. But you can do much more with them -- they can also be used as internal links to other Micrio images, or to activate custom behavior inside your own implementation.

See this tutorial for a guide to use CSS to style your markers.