Custom CSS

Mostly you can use maps straight out of the box with no customisation. Should you wish to apply customisation, the easiest place to do this is in the Additional CSS section of the WordPress Customizer.

These are the CSS selectors you need:

• os-datahub-map is applied to the <div> container for the map itself.
• os-datahub-elev is applied to the <div> container for an elevation profile.
• os-datahub-map-target is applied to an invisible <div> just before the map used as a jump target.
• os-datahub-map-marker-list is applied to the <ul> used for auto-generated marker lists. You may also apply your own class to make it more specific if you have maps with differing CSS requirements.
• osmap_download is applied to the <a>download links for GPX and KML files.

If you prefer to use your own stylesheet then you need to increase the CSS specificity above that of the plugin stylesheet. Most themes include a wrapper round the content, so you can use that as a prefix. e.g.

.entry-content .os-datahub-map-marker-list

Marker Popups

Marker popups are part of Leaflet and you need to override the default leaflet CSS. There are several layers generated within leaflet, and these are themselves within your map selector.

.leaflet-pane .leaflet-popup-pane .leaflet-popup .leaflet-popup-content-wrapper .leaflet-popup-content

If you are using Additional CSS then the last .leaflet-popup-content should be enough.

Font size for version 1.5.0 onwards

Leaflet 1.8.0 introduced a method of font sizing which works better for accessibility because it respects the browser font size setting. However, this can also make fonts look rather small on some sites which use what is sometimes referred to as the ‘62.5% trick’ to make the units of font size easier to cope with. If this is happening on your site you can fix this in the customizer by adding the following custom CSS:

.leaflet-container {
    font-size: 1.2rem;
}

Sticky Menus

If your site has a sticky menu (as this one does) then you may find that map jumps end up with the map at the top of the page but underneath your menu bar. Normally you can fix this by applying a negative top value to the target div.

.os-datahub-map-target {
     top: -100px;
}

To make that also work when the WordPress admin bar is displayed (logged in) you need an additional 32 pixels of offset.

.admin-bar .os-datahub-map-target {
     top: -132px;
}

Marker Lists

The auto-generated marker list will appear in 300px wide columns by default. If you want to change the column width or reduce the maximum number of columns, this is the CSS you’ll need (substituting your custom CSS class):

ul.os-datahub-map-marker-list {
    column-width: 200px;
    -moz-column-width: 200px;
    -webkit-column-width: 200px;
}

If you want to reduce the number of columns below what the browser can fit in automatically, you’ll need these values.

ul.os-datahub-map-marker-list {
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
}

For modern browsers column-width and column-count is all you need. However to support older browsers (e.g. Safari on older Apple devices) you also need the -moz- and -webkit- prefixes for maximum compatibility.

column-width specifies the minimum column width you want to use. If the browser cannot achieve this then it will reduce the number of columns.

column-count specifies the maximum number of columns to use. The plugin default is to use a high value here so that it is governed by column-width.

If you want to make the CSS specific to one particular map, to which you have added a CSS class, you can make the CSS selector more specific like this:

ul.os-datahub-map-marker-list.my-marker-class