Interactive map / 3D interactive map

  1. Hide the categories at the top

    .im__filters__categories {
      display: none;
    }

  2. Hide the '? - info' button

    .im__button.im__button--info {
        display: none;
    }

  3. Hide the ‘reset’-button

    .im__button.im__button--info, .im__button.im__button--reset {
        display: none;
    }

Popups interactive map (3D)

  1. Straighten the corners of a custom card

    .OcuDarcula .page.page--im .pointerPopup,
    .OcuLight .page.page--im .pointerPopup {
      border-radius: 0px
    }

  2. Remove the ‘pin - reset popup’ symbol

    .pointerPopup__header__button.pointerPopup__header__button--reset.button {
        display: none;
    }

  3. Remove the line (divider) under the text and above the image

    .divider {
      display: none;
    }

  4. Remove the thick line under the title

    .pointerPopup__content .pointerPopup__content__tabs .pointerPopup__content__tab {
        border: none;
    }

  5. Change the color of the thick line under the title

    .pointerPopup__content .pointerPopup__content__tabs .pointerPopup__content__tab.pointerPopup__content__tab--active {
        border-color: green;
    }

  6. Change the color of the icons in the header (reset, close)

    // in this case we specifically change it for the close button
    .OcuLight .page.page--im .pointerPopup .pointerPopup__header__button--close {
      fill: red;
    }

Scrollable map

  1. For all interactive maps in a scenario

:root {--scrollbar-top: 100px;--scrollbar-left: 100px;}

2. For a specific interactive map

.im__wrapper--mapName1 {--scrollbar-top: 200px;}

.im__wrapper--mapName2 {--scrollbar-left: 2000px;}
.im__wrapper--mapName3 {--scrollbar-top: 300px;--scrollbar-left: 300px;}

Disable loop for Maps

You can disable the default loop for Maps with a css variable.

:root {
  --imap-loop-video: 1; // loop on
  --imap-loop-video: 0; // loop off
}
// for a specfic map
.im__wrapper--mapName1 {
  --imap-loop-video: 0; // loop off
}

Select the previous/next map button

If you need previous next buttons for your maps you could hide all buttons except the previous and next button

//hide all map buttons
.im__navigation__container__item{
  display:none;
}
//show previous map button
.im__navigation__container__item:has( + .im__navigation__container__item--active){
  display: block;
  //position previous button correctly
}
//show next map button
.im__navigation__container__item--active + .im__navigation__container__item{
  display:block;
  //position next button correctly
}