Show Alternate Venue

This sample shows how to launch the map showing a specific POI. There are 2 ways to do so:

Specify the POI ID in the launch config
Include the POI ID directly in the URL

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.

Specify the POI ID in the launch config

Update the base code to include the "deepLinksParms" key in the launch config. Specifically, we will ask the SDK to show the Earthbar POI by passing in its id as shown 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,
				deepLinkParms: {poiId: 1007} 
			}

			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 or visit the fiddle (note - the fiddle may only display the mobile version due to size constraints).

After loading, the map will show the SEA venue and appear similar to the image below:

Specify the Venue ID in the URL

You can also show the venue at launch simply by adding the venue ID to the map URL as follows:
<your_map_url>?vid=<venue_id>

For the above to work, you need to specify in your launch config that url deep links are accepted by adding the "supportURLDeepLinks" key as shown below:

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

	<head>
		<script type="module">

			import LMInit from 'https://apps.locuslabs.com/sdk/dist/current/LocusMapsSDK.js'

			const config = {
				venueId: 'lax',
				accountId: 'A11F4Y6SZRXH4X',
				headless: false,
				supportURLDeepLinks: true 
			}

			window.LMInit = LMInit
			LMInit.setLogging(true)
			LMInit.newMap('.mymap', config, "https://apps.locuslabs.com/sdk/dist/current/")
				.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

Click here to see the map open at the specified venue using only a URL param.