@geoql/v-mapkit 🌎

⚠️ Note ⚠️ This project is still under heavy development and is missing features. Contributions are welcome!

Power of Vue 3 with awesomeness of Mapkit!

Features

• 💪 Built with TypeScript.
• 🌠 Built with the all new Vue 3

Table of Contents

• @geoql/v-mapkit 🌎
  • Features
  • Table of Contents
    • Installation
    • Usage
    • API
    • Build Setup
  • Built with
  • Contributing
  • License

Installation

pnpm add @geoql/v-mapkit @vueuse/core vue

Usage

Drop a <VMap> into your template and nest annotations or overlays as child components. You need an Apple MapKit JS JWT token; see Apple's MapKit JS docs for generating one.

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

<template>
  <VMap :access-token="token">
    <VMarkerAnnotation
      :coordinates="[37.3349, -122.009]"
      :annotation="{ title: 'Apple Park' }"
    />
  </VMap>
</template>

Prefer global registration? Install the default plugin:

import { createApp } from 'vue';
import VMapkit from '@geoql/v-mapkit';

createApp(App).use(VMapkit).mount('#app');

API

Components

• VMap — the map container. Props: access-token (required), version, language, init-options, map-options. Emits: map, map-loaded, map-initialized, map-destroyed, plus MapKit map events (region, rotation, scroll, zoom, select, drag, user-location, tap, etc.).
• VMarkerAnnotation, VImageAnnotation — annotations. Take coordinates plus their MapKit options.
• VCircleOverlay, VPolygonOverlay, VPolylineOverlay, VTileOverlay — overlays. Take coordinates plus their MapKit options.

Composables

• loadMapKit / initMapKit — load and initialize the MapKit JS runtime.
• useMapChild — register an annotation or overlay with its parent VMap.

Build Setup

# install dependencies
$ pnpm install

# start the Vite playground (local dev sandbox)
$ pnpm run dev

# package the library
$ pnpm run build

# run the docs site locally
$ pnpm run docs:dev

Built with

• TypeScript
• Vue 3

Contributing

1. Fork it ( https://github.com/geoql/v-mapkit/fork )
2. Create your feature branch (git checkout -b feat/new-feature)
3. Commit your changes (git commit -Sam 'feat: add feature')
4. Push to the branch (git push origin feat/new-feature)
5. Create a new Pull Request

Note:

1. Please contribute using GitHub Flow
2. Commits & PRs will be allowed only if the commit messages & PR titles follow the conventional commit standard, read more about it here
3. PS. Ensure your commits are signed. Read why

License

MIT © Vinayak Kulkarni