Embedded Map

This sample shows how to embed a smaller version of the map on your web page. This may be useful for simply providing a preview of a portion of the map. Consequently, this sample also hides all the map controls to keep the preview as clear as possible.

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.

Instantiate the SDK & Load the Map

Add the following code to your main html file, replacing the venueId and accountId fields with those applicable to you. Note the style sheet changes to show a smaller version of the map as well as the "uiHide" param added to config to hide all controls:

<!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,
				uiHide: { sidebar: true, controls: true, levelSelector: true }
			}

			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: 600px; width: 600px; position: relative;" />
	</body>

</html>

It is critical that the SDK is initialized with the correct div class or identifier so that the SDK can load the map in the appropriate place.

Try it out

See a live preview here. The map will appear similar to the following image: