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.
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.
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)
#mapid .leaflet-container
.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
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.
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)
All Map CSS modifications need to be placed under the line /** LINE REQUIRED - CSS BELOW **/
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.
.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.
 |  |
.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.
.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.
.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.
/* -- 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;
}
Dark theme
In this example, you’ll be shown how to modify the Maps Stylesheet to achieve a Dark mode, these images also include the custom marker icon modification (found above).
 Default Maps style |  Custom Dark mode style |
The map image used will need to be either suitable for a light/dark background or modified for use in a dark mode.
The full CSS for this customisation can be found at the bottom of this section without comments.
Background & Text Colours
For this customisation, we can group all the elements that we want to have the same background and text colour, this saves some time and allows the Stylesheet to be a little smaller.
#mapid,
#banner-menu,
#menu,
#panel, #panel .handle, #panel .action-buttons,
.book-panel, .book-panel .bookaction,
#timepicker,
.no-bookings-msg {
background: #292D3E; /* set background colour for all elements */
color: #c1c1c1; /* set text colour for all elements */
}
This change on its own gets us almost to the stage we want.
However, looking closely some of the elements don’t work well with the darker backgrounds, such as the selected bookings button on the right side, also, the booking popup UI still has black text.
The next step is to remove the light grey bar that is running down the right side panel.
#panel {
border-left: 0;
}
Now we will adjust the dark colour for the selected button.
 Default selected button colour |  Custom selected button colour |
#panel #content .panel-button.selected,
.book-panel .bookit,
#timepicker .buttons .button.confirm {
background: #435abc; /* button background colour */
}
Finally, we will adjust the booking popup input fields to have a white border and text.
 Default booking UI |  Custom booking UI |
.book-panel input[type=text],
.book-panel input[type=button],
.book-panel .time-picker {
border: 1px solid #fff;
color: #fff;
}
Full CSS for Dark Mode
/* custom booking panel - dark theme */
#mapid,
#banner-menu,
#menu,
#panel, #panel .handle, #panel .action-buttons,
.book-panel, .book-panel .bookaction,
#timepicker,
.no-bookings-msg {
background: #292D3E;
color: #c1c1c1;
}
#panel {
border-left: 0;
}
#panel #content .panel-button.selected,
.book-panel .bookit,
#timepicker .buttons .button.confirm {
background: #435abc; /* button background colour */
}
.book-panel input[type=text],
.book-panel input[type=button],
.book-panel .time-picker {
border: 1px solid #fff;
color: #fff;
}