Interactive map / 3D interactive map
Hide the categories at the top
.im__filters__categories {
display: none;
} |
Hide the '? - info' button
.im__button.im__button--info {
display: none;
} |
Hide the ‘reset’-button
.im__button.im__button--info, .im__button.im__button--reset {
display: none;
} |
Popups interactive map (3D)
Straighten the corners of a custom card
.OcuDarcula .page.page--im .pointerPopup,
.OcuLight .page.page--im .pointerPopup {
border-radius: 0px
} |
Remove the ‘pin - reset popup’ symbol
.pointerPopup__header__button.pointerPopup__header__button--reset.button {
display: none;
} |
Remove the line (divider) under the text and above the image
.divider {
display: none;
} |
Remove the thick line under the title
.pointerPopup__content .pointerPopup__content__tabs .pointerPopup__content__tab {
border: none;
} |
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;
} |
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
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
} |