Skip to content

Branding for users developing solutions using OS data supplied via our APIs.

Notifications You must be signed in to change notification settings

OrdnanceSurvey/os-api-branding

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

OS API Branding

Branding for users developing solutions using OS data supplied via our APIs.

screenshot default branding

Installation

Include the following tags in the header section of your HTML document to add the official OS logo and attribution to your map <div>:

<link rel="stylesheet" href="os-api-branding.css" />
<script src="os-api-branding.js"></script>

The latest CDN versions can be accessed via:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/OrdnanceSurvey/[email protected]/os-api-branding.css" />
<script src="https://cdn.jsdelivr.net/gh/OrdnanceSurvey/[email protected]/os-api-branding.js"></script>

Hosted versions can also be found at:

<link rel="stylesheet" href="https://labs.os.uk/public/os-api-branding/v0.3.1/os-api-branding.css" />
<script src="https://labs.os.uk/public/os-api-branding/v0.3.1/os-api-branding.js"></script>

Usage

In the majority of cases [assuming a map <div> element with id="map" is used] the branding can be shown using the basic installation as listed above.

For more advanced cases, the branding can be customised through the use of data-* attributes on the <script> import tag.

The table below lists the available options:

Attribute Description Default
data-div DOM ID of the map container <div> element. 'map'
data-logo Logo to render [can be os-logo-maps or os-logo-maps-white]. 'os-logo-maps'
data-statement Copyright statement (with current year defined using "YYYY"). 'Contains OS data &copy; Crown copyright and database rights YYYY'
data-prefix Text to prepended to copyright statement. ''
data-suffix Text to be appended to copyright statement. ''

For example, to show the branding with the white API logo (as opposed to the full colour version):

<script src="os-api-branding.js" data-logo="os-logo-maps-white"></script>

screenshot custom branding

The branding can also be initialised manually in your JavaScript using:

os.Branding.init();

... or (alternatively) if you wish to provide options:

os.Branding.init({ div: 'map', logo: 'os-logo-maps-white' });

The function can be called multiple times, making it particularly useful if you have more than one map on a single page.

For further reading on the OS API Branding, refer to the guidelines document.

Change Log

Version 0.1.0 (March 2020)

  • Initial release.

Version 0.2.0 (August 2020)

  • Allows branding to be initialised manually.

Version 0.3.0 (August 2021)

  • Removed DOMContentLoaded event for initialisation.

Version 0.3.1 (June 2023)

  • Minor bug fixes.
  • Added CDN support.

Licence

The contents of this repository are licensed under the Open Government Licence 3.0.

Logo

About

Branding for users developing solutions using OS data supplied via our APIs.

Resources

Stars

Watchers

Forks

Packages

No packages published