An npm module for Apple's Mapkit JS for use with Vue. This implementation uses the latest version of Mapkit JS and places its contents inside of a types folder. Based on Harvey Conner's repo, but with extra types from mapkit-typescript.

See Package Page

import mapkit from "@glacier-peak-studios/mapkitjs";

To init MapKitJS:

mapkit.init({
      authorizationCallback: function(done: (jwt: string) => void) {
        // callback functionality goes here
        done(jwt);
      },
      language: "en"
    });

Then, create a new map for the component:

// As a getter:
get map_id(): string {
    return `map-${this._uid}`;
}
// Assuming your component has a map object:
this.map = new mapkit.Map(this.map_id);

See Apple's documentation on additional options on map creation.

From here, mapkit and this.map can be accessed and modified as documented.

In order to update, simply replace the contents of the types folder, submit an issue, or make a pull request to update to the latest version.

The latest contents are pulled from:

https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js