Look Around

Look Around is Apple's interactive, street-level 360° imagery — MapKit JS's equivalent of Street View, and exclusive to the Apple ecosystem. Both components are standalone: they take a MapKit Place (from search or geocoding) and are not children of <VMap>.

VLookAround

Embeds a fully interactive Look Around scene — users can pan, zoom, and move through the imagery.

<script setup lang="ts">
  import { VLookAround, useGeocoder } from '@geoql/v-mapkit';

  const { geocode } = useGeocoder();
  const place = shallowRef<mapkit.Place | null>(null);

  const { results } = await geocode('Ferry Building, San Francisco');
  place.value = results[0];
</script>

<template>
  <ClientOnly>
    <VLookAround
      v-if="place"
      :place="place"
      :options="{ showsRoadLabels: true }"
    />
  </ClientOnly>
</template>

Prop	Type	Description
`place`	`mapkit.Place`	The place to show imagery for (required)
`options`	`mapkit.LookAroundConstructorOptions`	Road labels, badge position, navigation, etc.

Warning

Look Around imagery is only available in regions Apple has captured. When a place has no coverage, the scene renders empty — fall back gracefully.

VLookAroundPreview

A static, non-interactive preview thumbnail. Clicking it opens the full interactive experience. Use it as a compact entry point inside cards or lists.

<template>
  <ClientOnly>
    <VLookAroundPreview
      v-if="place"
      :place="place"
      :options="{ showsDismissButton: false }"
    />
  </ClientOnly>
</template>

Prop	Type	Description
`place`	`mapkit.Place`	The place to preview (required)
`options`	`mapkit.LookAroundPreviewConstructorOptions`	Preview appearance and behaviour

Pairing with a Map

Look Around is commonly shown alongside a map: render a <VMap> with a marker, and a <VLookAround> beside it for the same coordinate.

<template>
  <div class="grid gap-4 lg:grid-cols-2">
    <VMap :access-token="token">
      <VMarkerAnnotation :coordinates="[37.7956, -122.3934]" />
    </VMap>
    <ClientOnly>
      <VLookAround v-if="place" :place="place" />
    </ClientOnly>
  </div>
</template>

See the live Look Around and Look Around Preview examples.