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.

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

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.

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;
}

Custom Text Changes

With Maps some of the text values can be changed using the Stylesheet.
These changes will require modifying the default values in the Stylesheet found above this line.

/** LINE REQUIRED - CSS BELOW **/

Below is an example of the default value found in the Stylesheet.

{
  "nobookings" : "There are currently no bookings",
  "allow_future": true,
  "buttons" : {
    "bookings" : "Bookings",
    "info" : "Info",
    "book" : "Book",
    "extend" : "Extend",
    "checkin" : "Check-in",
    "checkout" : "Check-out"
  },
  "book" : {
    "where": "Where",
    "title" : "Title",
    "date": "Date",
    "quickbook": "Quickbook",
    "start": "Start",
    "end": "End"
  },
  "alerts" : {
    "book" : {
      "title" : "Creating booking",
      "fail_title" : "Booking failed!",
      "success_title" : "Booking created"
    },
    "extend" : {
      "title" : "Extending booking",
      "fail_title" : "Extend failed!",
      "success_title" : "Extend successful"
    }
  }
}
/** LINE REQUIRED - CSS BELOW **/

This section is written in JSON, this requires the correct syntaxing to work correctly.

Ensure text values are written in quotes and each line ends with a common, except for the last in a section.

In this example we will modify the Booking screen text values, as shown below.

Default Text Values

Custom Text Values

The section that we’ll need to modify is “book” this controls the values for the booking popup screen.

  "book" : {
    "where": "Where",
    "title" : "Title",
    "date": "Date",
    "quickbook": "Quickbook",
    "start": "Start",
    "end": "End"
  },

Below is the modified JSON, this section can be copied and pasted in replacement of the existing “book” values, if this section does not currently exist in the Stylesheet it can be added.

  "book" : {
    "where": "Location",
    "title" : "Subject",
    "date": "Booking Date",
    "quickbook": "Book Now",
    "start": "Booking start time",
    "end": "Booking end time"
  },

If adding as a new section ensure that the correct JSON syntax rules are followed, this section needs to be nested only one level down, this means it needs to be placed between the very first ‘{' and the very last '}’, also, if placed at the end of the nexted section remove the final comma ' , '.