https://github.com/geoql/v-mapkit
18 Vue 3 components for Apple MapKit JS — annotations, overlays, Look Around, search & geocoding, and more
https://github.com/geoql/v-mapkit
mapkit mapkit-js typescript vue vue3 vuejs
Last synced: 5 days ago
JSON representation
18 Vue 3 components for Apple MapKit JS — annotations, overlays, Look Around, search & geocoding, and more
- Host: GitHub
- URL: https://github.com/geoql/v-mapkit
- Owner: geoql
- Created: 2021-06-22T07:57:07.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2026-06-12T21:10:04.000Z (16 days ago)
- Last Synced: 2026-06-12T22:15:51.782Z (16 days ago)
- Topics: mapkit, mapkit-js, typescript, vue, vue3, vuejs
- Language: Vue
- Homepage: https://v-mapkit.geoql.in/
- Size: 6.31 MB
- Stars: 12
- Watchers: 2
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
# v-mapkit
> Vue 3 components for Apple MapKit JS - Monorepo for v-mapkit and mapkit-cn
[](https://www.npmjs.com/package/@geoql/v-mapkit)
[](https://jsr.io/@geoql/v-mapkit)
[](https://opensource.org/licenses/MIT)
## Packages
| Package | Description |
| ------------------------------- | ------------------------------------ |
| [v-mapkit](./packages/v-mapkit) | Vue 3 components for Apple MapKit JS |
## Apps
| App | Description |
| ----------------------------- | --------------------------------------------- |
| [mapkit-cn](./apps/mapkit-cn) | Showcase site with 23 live examples (Nuxt 4) |
| [docs](./apps/docs) | Documentation site (Nuxt 4 + `@nuxt/content`) |
## Quick Start
### Install the library
```bash
pnpm add @geoql/v-mapkit
```
```vue
import { VMap, VMarkerAnnotation } from "@geoql/v-mapkit";
import "@geoql/v-mapkit/style.css";
const token = "YOUR_MAPKIT_TOKEN";
// Coordinates aren't props — MapKit owns the live map, so set the
// initial region once the instance is ready via the @map event.
function onMap(map: mapkit.Map) {
map.setRegionAnimated(
new mapkit.CoordinateRegion(
new mapkit.Coordinate(37.7749, -122.4194),
new mapkit.CoordinateSpan(0.1, 0.1),
),
);
}
```
### Use mapkit-cn (shadcn-vue style)
```bash
npx shadcn-vue@latest add https://mapkit-cn.geoql.in/r/v-map
```
## Development
This monorepo uses [pnpm v11](https://pnpm.io) workspaces.
```bash
# Install all dependencies
pnpm install
# Development
pnpm run dev:lib # Watch mode for library
pnpm run dev:app # Showcase site
# Build
pnpm run build # Build all packages
pnpm run build:app # Build showcase site
# Test
pnpm run test
# Lint & Format
pnpm run lint
pnpm run format
```
## Monorepo Structure
```
v-mapkit/
├── packages/
│ └── v-mapkit/ # Core library (npm + jsr: @geoql/v-mapkit)
├── apps/
│ ├── mapkit-cn/ # Nuxt 4 showcase site (23 live examples + registry)
│ └── docs/ # Nuxt 4 documentation site (@nuxt/content)
├── package.json # pnpm workspaces root
├── pnpm-workspace.yaml # Workspace config
└── pnpm-lock.yaml
```
## License
MIT License - see [LICENSE](./packages/v-mapkit/LICENSE) for details
---
Made with ❤️ by [GeoQL](https://github.com/geoql)