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. Many of the examples in this document will also work in headless mode.

Getting Started

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(nul, config)
				.then(m => { 
        console.log("ready"); })
				.catch(e => console.error('Error initializing map: ', e))

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

Commands available in headless mode