New: Set a Pinned Location

Set a "pinned location" to give your users additional context when using your map!

Using our JavaScript SDK to power a kiosk or other stationary experience? Set that as the "pinned" location to give your users additional context into where they are!

This pinned location will also serve as the reference point for searches, with results being prioritized by proximity to the pinned location.

Prominent 'You Are Here' Marker

When a pinned location is set during map initialization, then a 'blue dot' will display giving your users additional visual context. Simply set the map's floor, zoom and position to see the 'blue dot' directly after map load!

Contextualized Search Results

Previously, search results were prioritized by where the map is centered on the screen visually. This is great for showing users a wide range of results across your entire space, but can be optimized when we know your user is in a specific location!

Pre-populated "From" Endpoint

Now when requesting directions point of interest, directions automatically begin at the location that has been pinned via the config giving your users a quicker way to find out where they need to head next.

Sample

See all configurable parameters in the SDK Configuration documentation.

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="module">
      import LMInit from 'https://maps.locuslabs.com/sdk/LocusMapsSDK.js'

      const config = {
      venueId: '<YOUR VENUE ID>',
      accountId: '<YOUR ACCOUNT ID>',
      pinnedLocation: {
        pinTitle: 'Your pinned location',
        lat: 53.36279303,
        lng: -2.27315968,
        ordinal: 0,
        structureId: '<YOUR STRUCTURE ID>',
        floorId: '<YOUR FLOOR ID>'
      },
      pinnedLocationZoom: 16,
      pinnedLocationFocusAtStart: true
    }

    LMInit.setLogging(true)
    LMInit.newMap('#mapRenderDiv', config)
      .then(m => {
        window.map = m
        m.showPOI(4001322) // zoom the map to a location, here done by POI id
      })
      .catch(e => console.error('Error initializing map: ', e))
  </script>
    <style>
      #mapRenderDiv {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="mapRenderDiv"></div>
  </body>
</html>