---
title: LookAroundPreview
framework: mapkitjs
role: symbol
role_heading: Class
path: mapkitjs/lookaroundpreview
---

# LookAroundPreview

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

## Declaration

```data
class LookAroundPreview extends AbstractLookAround
```

## Mentioned in

Loading the latest version of MapKit JS MapKit JS 5

## Discussion

Discussion note: The full bundle of MapKit JS doesn’t implement this class. Use a mapkit.LookAroundPreview to create preview imagery for a specific geographic location on the map. note: Not all places support Look Around. The following example contains the two elements needed to display a Look Around view on a webpage:

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/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

- [new LookAroundPreview(parent, location, options)](mapkitjs/lookaroundpreview/lookaroundpreviewconstructor.md)

### Controlling the interactions with a Look Around view

- [isNavigationEnabled](mapkitjs/abstractlookaround/isnavigationenabled.md)
- [isScrollEnabled](mapkitjs/abstractlookaround/isscrollenabled.md)
- [isZoomEnabled](mapkitjs/abstractlookaround/iszoomenabled.md)

### Controlling additional information the Look Around view displays

- [showsPointsOfInterest](mapkitjs/abstractlookaround/showspointsofinterest.md)
- [showsRoadLabels](mapkitjs/abstractlookaround/showsroadlabels.md)

### Positioning a badge

- [badgePosition](mapkitjs/lookaroundpreview/badgeposition.md)
- [LookAroundBadgePosition](mapkitjs/lookaroundbadgeposition.md)

### Controlling the LookAround dialog

- [openDialog](mapkitjs/abstractlookaround/opendialog.md)

### Getting information about the Look Around object and its state

- [element](mapkitjs/abstractlookaround/element.md)
- [scene](mapkitjs/abstractlookaround/scene.md)
- [padding](mapkitjs/abstractlookaround/padding.md)
- [readyState](mapkitjs/abstractlookaround/readystate.md)
- [LookAroundReadyState](mapkitjs/lookaroundreadystate.md)

### Closing and releasing a Look Around view

- [destroy()](mapkitjs/abstractlookaround/destroy.md)

### Static properties

- [BadgePositions](mapkitjs/lookaroundpreview/badgepositions.md)
- [ReadyStates](mapkitjs/lookaroundpreview/readystates.md)

### Instance Methods

- [destroy()](mapkitjs/lookaroundpreview/destroy.md)

## Relationships

### Inherits From

- [AbstractLookAround](mapkitjs/abstractlookaround.md)

## See Also

### Exploring at street level

- [LookAround](mapkitjs/lookaround.md)
- [LookAroundOptions](mapkitjs/lookaroundoptions.md)
- [LookAroundPreviewOptions](mapkitjs/lookaroundpreviewoptions.md)
- [LookAroundScene](mapkitjs/lookaroundscene.md)
- [CommonLookAroundOptions](mapkitjs/commonlookaroundoptions.md)
- [AbstractLookAround](mapkitjs/abstractlookaround.md)
- [lookAroundViews](mapkitjs/mapkit/lookaroundviews.md)