23 examples

Examples

Every v-mapkit component and composable, demonstrated with live maps and copy-paste source. Set your MapKit token once and explore.

Basic Map

Get a map on screen and configure its core appearance.

Basic Map

A minimal map with sensible defaults.

Map Types

Switch between Standard, Satellite, Hybrid, and Muted.

Map Configuration

Color scheme, distances, padding, and tint color.

Annotations

Place points of interest on the map.

Marker Annotation

Classic teardrop markers with titles and colors.

Image Annotation

Custom image-backed markers at any DPR.

Place Annotation

Annotations built from a MapKit Place.

Custom Annotation

Render arbitrary DOM as a map annotation.

Annotation Callout

Custom callout bubbles with rich content.

Overlays

Draw shapes and custom layers on the map.

Circle Overlay

Radius circles for ranges and geofences.

Polygon Overlay

Filled regions and area boundaries.

Polyline Overlay

Routes, paths, and connected lines.

Tile Overlay

Custom raster tile layers over the base map.

Controls

Interactive map chrome and UI controls.

Fullscreen Control

Expand the map to fill the viewport.

Geolocate Control

Center the map on the user's location.

Layer Switcher

A dropdown to switch map types.

Legend

A positioned legend with custom content.

Advanced

Search, geocoding, routing, and clustering.

Clustering

Group nearby markers into clusters.

Search

Place search with live autocomplete.

Geocoding

Forward and reverse address lookup.

Directions

Route between two points with a polyline.

Special

Look Around immersion and property toggles.

Look Around

Interactive street-level 360° imagery.

Look Around Preview

A static Look Around thumbnail.

Property Toggles

Toggle compass, zoom, scale, and more.