LookAround
A view that allows someone to see a street level view of a place.
Declaration
class LookAround extends AbstractLookAroundMentioned in
Discussion
Use a Look Around view to create street-level imagery for a specific geographic location on the map. You can, optionally, allow someone to navigate inside this view so they can explore the place at street level or zoom the view for a larger-screen experience.
The following example contains the two elements needed to display a Look Around View on a web page:
[Image]
The HTML code below implements a web page that renders a container which has a label that provides a description of the place the Look Around view displays.
<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="look-around,services"></script>
<style>
#container { width: 735px; height: 552px }
</style>
<div id="container"></div>The JavaScript listing below implements a MapKitJS Look Around object that the web page displays inside the <div id="container"> element of the page. The Look Around view shows a navigable view of Cherry Hill Fountain in Central Park in New York City that Look Around renders using a PlaceID. 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 PlaceID that represents Cherry Hill Fountain, Central Park, New York, NY
"IEA18943388D2216C",
(error, result) => resolve(result)
)
);
// Create an interactive Look Around view.
const lookAround = new mapkit.LookAround(
document.getElementById("container"),
place,
{
// Allow users to expand the view.
showsDialogControl: true
}
);
})()Handling Look Around loading states
Look Around view dispatches the following events:
load: A DOMEvent. 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 DOMEvent. The ready state changed.open-dialog: A DOMEvent. The Look Around view is about to expand.leave-dialog: A DOMEvent. The Look Around view is about to contract.close: A DOMEvent. Someone has interacted with the close control.