Markers & Legend

This sample shows how to perform the following:

Load a map
Search for Currency Exchange points
Add a marker on the map for each point
Add a legend to the map

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.

HTML & Javascript

The code below shows how to instantiate the map, perform a search for "Currency", add markers for each search result and finally a legend at the bottom left of the map:

<!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
			}

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

					window.map = m;
					map.search("currency", true).then(results => {

						console.log("*** Search Results ***");
						var result;
						var count = 0;
						for (result of results) {

							count++;
							map.drawMarker("Marker" +count, {lat:result.position.latitude, lng:result.position.longitude, ord:result.position.floorOrdinal}, "https://locuslabs-documentation-samples.s3.us-east-2.amazonaws.com/marker_circle_green.svg");
						}
					});
				})
				.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%; position:relative;"></div>
		<div style="background: rgb(255,255,255); width:200px; height: 38px; position:absolute; bottom: 30px; left: 30px;z-index: 100; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
			<img style="vertical-align:middle; margin-top: 4px; margin-left: 4px" src="https://locuslabs-documentation-samples.s3.us-east-2.amazonaws.com/marker_circle_green.svg">
			<span style="vertical-align:middle;margin-top: 4px;">Currency Exchange</span>
		</div>
	</body>

</html>

Try it out

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