Versions Compared

Version Old Version 24 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 basics for customising aspects of the Maps UI.

...

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

...