Headless Mode

Occasionally you want to use our SDK without displaying a map e.g. to get venue info, directions, search for POIs etc. In such cases, the SDK offers a headless mode which allows all that without showing a map.

You can use headless mode regardless of your implementation platform. This page uses generic javascript as an example. You can also refer to our Node Integration documentation for more details as well as a sample showing a Node integration.

The last section of this document lists the commands available in headless mode, with links to samples.

Organizing your code

Please follow the steps in Getting Started before proceeding, which should include starting the Yarn server for local development. The sample code provided in that section already includes an "index.html" file which you can modify as needed or you can create your own as shown in this document.

Set headless mode in the config

To work in headless mode, make the necessary adjustment to the fullscreen map sample as shown in the code below:

  • Set the "headless" key to true in the config
  • Replace the first param in the "newMap" command with "null"
  • Remove the map div and style elements
<!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: true
			}

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

		</script>
	</head>
</html>

Commands available in headless mode