Code snippets: Interactive map (3D)

 

Interactive map / 3D interactive map

  1. Hide the categories at the top

    1 2 3 .im__filters__categories { display: none; }

     

  2. Hide the '? - info' button

    1 2 3 .im__button.im__button--info { display: none; }

     

  3. Hide the ‘reset’-button

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

Popups interactive map (3D)

  1. Straighten the corners of a custom card

    1 2 3 4 .OcuDarcula .page.page--im .pointerPopup, .OcuLight .page.page--im .pointerPopup { border-radius: 0px }

     

  2. Remove the ‘pin - reset popup’ symbol

    1 2 3 .pointerPopup__header__button.pointerPopup__header__button--reset.button { display: none; }

     

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

    1 2 3 .divider { display: none; }

     

  4. Remove the thick line under the title

    1 2 3 .pointerPopup__content .pointerPopup__content__tabs .pointerPopup__content__tab { border: none; }

     

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

    1 2 3 .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)

    1 2 3 4 // 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

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

 

2. For a specific interactive map

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

 

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