Versions Compared

Version Old Version 23 New Version Current
Changes made by

Elliot Dooleysmith

Elliot Dooleysmith

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

This guide will cover the basic for customising aspects of the Maps UI.

...

The style rules for maps are similar to the Kiosk in that they work slightly differently to the room screen, with the room screen the assigned Stylesheet is the only design rules applied to the UI.

For Maps, however, the Stylesheet is used to modify the default style, this means that the stylesheet can have no properties and the Map will display its default style, this allows new rules to be added that will overwrite the default.

Info

This guide is written with the expectation the reader has a basic knowledge of CSS

Framework & Structure

...

This section will cover the general components that make up the Maps UI, also, providing a deeper understanding of the IDs and classes that make up each of these sections allowing for fine control of UI via Stylesheets.

...

titleMap

Map

The maps section is the largest view, this is where the floor plan graphic will be rendered, this section allows for users to pan up, down, left and right, as well as zoom in and out.

...

Select the image to view a larger version.
Below is a list of the IDs and classes that can be used to modify this section

#map .today/.future_day (contains map & view controls, class dependant on day selected)

...

  • .leaflet-map-pane

    • .leaflet-pane .leaflet-overlay-pane

      • img .leaflet-image-layer (this is the map image)

    • .leaflet-pane .leaflet-marker-pane

      • .leaflet-marker-icon marker

        • .today_marker/.future_marker .pin .custom-space .free/.busy/.CheckIn/.CheckOut (Marker icon, use status class to customise colour for different states)

...

.leaflet-control-container

  • .leaflet-top .leaflet-left

    • .leaflet-control-zoom .leaflet-bar .leaflet-control

      • .leaflet-control-zoom-in (zoom in button)

      • .leaflet-control-zoom-out (zoom out button)

...

.floor-button-layer .closed/.open (class depends if #panel is open or closed)

  • .floor-buttons

    • .button .selected (each floor navigation button, selected indicates selected floor)

...

#panel .closed/.open (class depends if #panel is open or closed)

  • see Panel section below for more information

Expand
titleBanner

Banner

The banner is found across the top of the map, this displays information such as the location displayed, the current time and date as well as any filters that are being applied.

Image Removed

Select the image to view a larger version.
Below is a list of the IDs and classes that can be used to modify this section

  • #banner-menu .filterbar (filterbar class indicates if the filter bar is showing)

    • #bannerTopRow

      • .banner-left

        • #menuButton

        • .header

          • .banner-text .building (displays the selected building name)

          • .banner-text .floor (displays the selected floor name)

      • .banner-right

        • .banner-text .current-time

          • .hour

          • .minute

          • .ampm

        • .banner-text .current-date

    • .filtertags

      • .tag (the tag icon element, used to shape and position)

        • .icon-close (the x icon shown to remove the filter)

        • .tag-icon .icon-desk/.icon-room (if relevant will display an icon for the filter tag)

        • .text (text value of the filter tag)

Expand
titleMenu

Menu

The menu is the leftside slide-out element, this contains the location navigation options as well as filter options.

  • #menu .open/.closed

    • #container-country .location-list

      • #country .list-item (dropdown header section)

        • .arrow .icon-right_arrow .open/.closed (open down-arrow, closed right-arrow)

        • .menu-item (displayed text value)

        • .dot-box

          • .dot .country .dot-active (dot-active used when location selected)

      • .droplist .open/.closed (list of available locations)

        • .list-item

          • .checkbox .icon-chcek/.icon-uncheck (tickbox for each item listed)

          • .menu-item (displayed text value)

    • #container-city .location-list

      • matches country structure (replace country with city)

    • #container-site .location-list

      • matches country structure (replace country with site)

    • #container-building .location-list

      • matches country structure (replace country with building)

    • .spacer (separater line for menu sections)

    • #date .list-item (date header section)

    • .selected-date (date display & picker button)

      • .list-item .adv-list-action

        • .icon .icon-events (icon displayed to the left)

        • .menu-item .datepicker (displayed text for date)

    • #filter .list-item (filter header section)

    • .filter

      • #free .list-item .adv-list-action

        • .checkbox .icon-chcek/.icon-uncheck (tickbox for each item listed)

        • .menu-item (displayed text value)

      • #In_progress .list-item .adv-list-action

        • .checkbox .icon-chcek/.icon-uncheck (tickbox for each item listed)

        • .menu-item (displayed text value)

      • #checkin .list-item .adv-list-action

        • .checkbox .icon-chcek/.icon-uncheck (tickbox for each item listed)

        • .menu-item (displayed text value)

      • #checkout .list-item .adv-list-action

        • .checkbox .icon-chcek/.icon-uncheck (tickbox for each item listed)

        • .menu-item (displayed text value)

      • #rooms .list-item .adv-list-action

        • .checkbox .icon-chcek/.icon-uncheck (tickbox for each item listed)

        • .menu-item (displayed text value)

      • #desks .list-item .adv-list-action

        • .checkbox .icon-chcek/.icon-uncheck (tickbox for each item listed)

        • .menu-item (displayed text value)

      • #parking .list-item .adv-list-action

        • .checkbox .icon-chcek/.icon-uncheck (tickbox for each item listed)

        • .menu-item (displayed text value)

    • #container-tags .tags-list

      • #tags .list-item (dropdown header section)

        • .arrow .icon-right_arrow .open/.closed (open down-arrow, closed right-arrow)

        • .menu-item (displayed text value)

        • .dot-box

          • .dot .dot-active (dot-active used when a tag is selected)

      • .droplist .open/.closed (list of available locations)

        • .list-item

          • .checkbox .icon-chcek/.icon-uncheck (tickbox for each item listed)

          • .menu-item (displayed text value)

    • #container-equipment .equipment-list

      • .list-item (dropdown header section)

        • .arrow .icon-right_arrow .open/.closed (open down-arrow, closed right-arrow)

        • .menu-item (displayed text value)

        • .dot-box

          • .dot .dot-active (dot-active used when equipment is selected)

      • .droplist .open/.closed (list of available locations)

        • .list-item

          • .checkbox .icon-chcek/.icon-uncheck (tickbox for each item listed)

          • .menu-item (displayed text value)

...

This guide will cover the basics for customising aspects of the Maps UI.

...

The style rules for maps are similar to the Kiosk in that they work slightly differently to the room screen, with the room screen the assigned Stylesheet is the only design rules applied to the UI.

For Maps, however, the Stylesheet is used to modify the default style, this means that the stylesheet can have no properties and the Map will display its default style, this allows new rules to be added that will overwrite the default.

Info

This guide is written with the expectation the reader has a basic knowledge of CSS or JSON

Note

Maps Stylesheet uses a mix of CSS and JSON, the line
/** LINE REQUIRED - CSS BELOW **/
is required, any JSON must be written above this line and any CSS below.

...

Expand
titleCustom Marker Icons

Custom Marker icons

In this example, you’ll be shown how to modify the Maps Stylesheet to achieve customised marker icon.
The full CSS can be found at the bottom of this section if you would rather copy and paste this full customisation.

Default markers

Custom markers

Firstly, we will modify the .marker .pin element, this is controlling the drop shape of the marker.

Code Block
languagecss
.marker .pin {
  border-radius: 50% 50% 50% 50%; /* sets border to complete circle */
}

Next, we will need to adjust the position of the marker, as we no longer have the point, we’ll move the marker down slightly, this will need to be adjusted for both the current day view as well as future if being used.

Code Block
languagecss
.today .marker { /* markers displayed on current day view */
  margin-left: -13px !important; /* adjusts position along the x axis */
  margin-top: -24px !important; /* adjusts position along the y axis */
}
.future_day .marker { /* markers displayed on future day view */
  margin-left: -19px !important; /* adjusts position along the x axis */
  margin-top: -30px !important; /* adjusts position along the y axis */
}

The next step is to remove the white background in the centre and to change the icon colour to allow it to be seen against the colour background.

Code Block
languagecss
.marker .pin .dot { /* white inner section of marker */
  color: #fff !important; /* sets font/icon colour to white */
  background: none !important; /* removes the background white colour */
}

The final step is to adjust the position of the text popup that appears above the marker icon.

Code Block
languagecss
.today .leaflet-popup {
  margin-bottom: 0 !important; /* removes additional spacers */
  bottom: 38px !important; /* sets position of popup from bottom of marker */
  left: -33px !important; /* sets position on the x axis relative to marker */
}

Below is the full CSS for customising the marker icons, this can be copied into the existing Maps Stylesheet.

Code Block
languagecss
/* -- custom marker drops -- */
.marker .pin {
  border-radius: 50% 50% 50% 50%;
}
.today .marker {
  margin-left: -13px !important;
  margin-top: -24px !important;
}
.future_day .marker {
  margin-left: -22.5px !important;
  margin-top: -22.5px !important;
}
.marker .pin .dot {
  color: #fff !important;
  background: none !important;
}
.today .leaflet-popup {
  margin-bottom: 0 !important;
  bottom: 38px !important;
  left: -33px !important;
}

...