Examples

Every component and composable in @geoql/v-mapkit has a live, interactive demo on the showcase site. Each example ships a copy-paste Vue snippet and runs against real Apple MapKit JS.

Tip

The examples site lets you paste your own MapKit JS token to drive the live maps, so you can verify behaviour before wiring the library into your app.

Browse the Showcase

All Examples

The full gallery — 23 interactive demos across annotations, overlays, controls, and services.

Basic Map

The smallest possible map: a token and an @map handler.

Example	Component
Marker Annotation	`VMarkerAnnotation`
Image Annotation	`VImageAnnotation`
Place Annotation	`VPlaceAnnotation`
Custom Annotation	`VCustomAnnotation`
Annotation Callout	`VAnnotationCallout`
Clustering	`VClusterAnnotation`

Overlays

Example	Component
Circle Overlay	`VCircleOverlay`
Polygon Overlay	`VPolygonOverlay`
Polyline Overlay	`VPolylineOverlay`
Tile Overlay	`VTileOverlay`

Look Around

Example	Component
Look Around	`VLookAround`
Look Around Preview	`VLookAroundPreview`

Controls

Example	Component
Fullscreen Control	`VControlFullscreen`
Geolocate Control	`VControlGeolocate`
Layer Switcher	`VControlLayerSwitcher`
Legend	`VControlLegend`

Services

Example	Composable
Search	`useSearch`
Geocoding	`useGeocoder`
Directions	`useDirections`