Contents

LookAroundPreview

A class that renders a preview of a Look Around view.

Declaration

class LookAroundPreview extends AbstractLookAround

Mentioned in

Discussion

Use a mapkit.LookAroundPreview to create preview imagery for a specific geographic location on the map.

The following example contains the two elements needed to display a Look Around view on a webpage:

[Image]

The HTML code below implements a webpage that renders a container which has both a map and a Look Around preview.

<script
  src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.core.js"
  crossorigin async
  data-callback="initMapKit"
  data-token="YOUR TOKEN HERE"
  data-libraries="map,annotations,look-around,services"></script>
<style>
#map {
  width: 100%;
  height: 100%;
}
#container {
  position: absolute;
  top: 20px;
  left: 20px;
  border-radius: 20px;
  overflow: hidden;
  width: 200px;
  height: 150px;
}
</style>

<main>
  <div id="map"></div>
  <div id="container"></div>
</main>

The JavaScript listing below implements a MapKitJS map object that the web page displays inside the <div id="map"> element of the page, with a Look Around preview displays inside the <div id="container"> element. The code centers the map on the area near the New York Public Library in New York City using a PlaceID. The Look Around preview on the map shows a view of The New York Public Library building. For more information on obtaining a PlaceID for a specific location. For more information on Place IDs, see Identifying unique locations with Place IDs.

async function initializeMapKitJS() {
  if (!window.mapkit || window.mapkit.loadedLibraries.length === 0) {
    await new Promise(res => window.initMapKit = res)
    delete window.initMapKit
  }
}

(async () => {
  await initializeMapKitJS();
  // Look Around view code

  const placeLookup = new mapkit.PlaceLookup();
  const place = await new Promise(
      resolve => placeLookup.getPlace(
        // The New York Public Library, 42nd St & 5th Ave,New York, NY
        "I88F02FEA4499C61D",
        (error, result) => resolve(result)
      )
  );

  const lookAround = new mapkit.LookAroundPreview(
      document.getElementById("container"),
      place
  );

  const map = new mapkit.Map("map", {
    center: place.coordinate,
    cameraDistance: 7000,
    showsPointsOfInterest: false,
    annotations: [
      new mapkit.PlaceAnnotation(place, {
        selected: true
      })
    ]
  });

})()

Handling Look Around loading states

LookAroundPreview object dispatches the following events:

  • load: A DOM Event. The Look Around view loaded.

  • error: A LookAroundErrorEvent. The Look Around view encountered an error, for example, in an unsupported browser, or a location with no Look Around imagery.

  • readystatechange: A DOM Event. The ready state changed.

  • open-dialog: A DOM Event. The Look Around view is about to expand.

  • leave-dialog: A DOM Event. The Look Around view is about to contract.

  • close: A DOM Event. A person interacted with the close control.

Topics

Creating a Look Around preview

Controlling the interactions with a Look Around view

Controlling additional information the Look Around view displays

Positioning a badge

Controlling the LookAround dialog

Getting information about the Look Around object and its state

Closing and releasing a Look Around view

Static properties

Instance Methods

See Also

Exploring at street level