UI Customization

There are various options for customizing the SDK, including changing the:

• General UI including the text, background colors and language
• Map icons, fill and stroke colors (performed in conjunction with our integration team)

This example shows how to customize some of the text colors on the map and how to change the UI language.

Organizing your code

The Getting Started section details various SDK installation options depending on your requirements. The sample code below is based on a base use case of a plain html page and the ES6 module format.

Update theme settings in the launch config

To change the text and other colors of certain elements, they have to be defined in the launch config. This can be done by adding the "theme" key along with the keys and hex color values for all items to be changed. In the code below, we are changing the widget/overlay text to red and the general text color to orange:

<!DOCTYPE html>
<html lang="en">

	<head>
		<script type="module">

			import LMInit from 'https://maps.locuslabs.com/sdk/LocusMapsSDK.js'

			const config = {
				venueId: 'lax',
				accountId: 'A11F4Y6SZRXH4X',
				headless: false,
				theme: {colors: 
						{widgetText: "#FF0000",    // red 
						 primaryText: "#FFA500"}}  // orange 
			}

			window.LMInit = LMInit
			LMInit.setLogging(true)
			LMInit.newMap('.mymap', config)
				.then(m => { window.map = m; })
				.catch(e => console.error('Error initializing map: ', e))

		</script>
		<style>
			html, body, .mymap {
				height: 100%; margin: 0; padding: 0;
			}
		</style>
	</head>

	<body>
		<div class="mymap" style="height: 100%;"></div>
	</body>

</html>

Try it out

See a live preview here. After the map loads it will show a red search bar and text and all other text will be in orange as shown in the following image:

List of all keys available for customization

theme: {
  colors: {
    primary: '#522981',
    primaryButton: '#8559a6',
    primaryButtonText: '#FFFFFF',
    primaryButtonHover: '#722fa5',
    secondary: '#999999',
    secondaryButton: '#EEEEEE',
    secondaryButtonText: '#8559a6',
    secondaryButtonHover: '#D9D9D9',
    errorState: '#E52727',
    primaryText: '#333333',
    secondaryText: '#666666',
    background: '#FFFFFF',
    toolTipBackground: '#000',
    toolTipText: '#FFFFFF',
    mapNavBackground: '#522981',
    mapNavText: '#FFFFFF',
    mapNavSearchResults: '#9f147b',
    mapNavSearchResultsText: '#FFFFFF',
    widgetBackground: '#F9f9f9',
    widgetIconFill: '#522981',
    widgetText: '#522981',
    statusOpenBackground: '#219653',
    statusOpenText: '#FFFFFF',
    statusClosedBackground: '#ebebeb',
    statusClosedText: '#333333',
    statusEarlyBackground: '#0088DD',
    statusEarlyText: '#FFFFFF',
    statusDelayedBackground: '#CA4800',
    statusDelayedText: '#FFFFFF',
    statusCancelledBackground: '#E52727',
    statusCancelledText: '#FFFFFF'
  }
}

Changing the UI language

Note that the UI and the map are distinct from each other when presenting a language. To show a map with a specific language, a special venue id is needed which incorporates the language id. Speak to your account manager should you require a map in a specific language or contact support.

To change the UI language, simply call "setLanguage" after the loading the map as shown in the code sample below:

<!DOCTYPE html>
<html lang="en">

	<head>
		<script type="module">

			import LMInit from 'https://maps.locuslabs.com/sdk/LocusMapsSDK.js'

			const config = {
				venueId: 'lax',
				accountId: 'A11F4Y6SZRXH4X',
				headless: false,
				theme: {colors: 
						{widgetText: "#FF0000",    // red 
						 primaryText: "#FFA500"}}  // orange 
			}

			window.LMInit = LMInit
			LMInit.setLogging(true)
			LMInit.newMap('.mymap', config)
				.then(m => { 

					window.map = m;
					window.map.setLanguage("es"); })
				.catch(e => console.error('Error initializing map: ', e))

		</script>
		<style>
			html, body, .mymap {
				height: 100%; margin: 0; padding: 0;
			}
		</style>
	</head>

	<body>
		<div class="mymap" style="height: 100%;"></div>
	</body>

</html>