React wrapper for Apple's mapkit.js.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
scripts adding new deploy script for storybook Jun 8, 2018
src fixing up flow errors Jul 22, 2018
.flowconfig project skeleton Jun 7, 2018
.gitignore adding new deploy script for storybook Jun 8, 2018
yarn.lock update to 0.5.0 Jul 15, 2018

React Mapkit 🗺️

npm version Dependency Status

⚠️ Note ⚠️

This project is still in development and is missing features (including being able to place anything other than markers on a map). Contributions are welcome!

See the demo storybook!


yarn add react-mapkit

Key generation (optional)

This package includes a script you can use to generate a JWT key. To use add your private key from Apple to the keygen folder as key.p8 then run:

yarn keygen

follow the prompts. The generated key can then be used for your app. If you want to generate short keys you can refer to the script in keygen to get an idea of how to do this in node.


This project contains a storybook that shows examples of how the component can be used. To use this storybook follow these steps:

  1. copy devToken.js.rename to devToken.js
  2. add a valid token from apple to devToken.js
  3. run yarn then yarn storybook
  4. visit the URL storybook gives you
  5. play with maps!

MapKit Component

This is the component that will render a map. You'll need to provide either a callbackUrl or a token to the tokenOrCallback prop for this component to work.

Default Props

You can set the initial view of the map using the props prefaced with default. Note that once the component has rendered changing these props (or tokenOrCallback) will not have any effect on the component.

If you want to programmatically change the rotation or viewport of the map after rendering this component can work with a function as children. For example, the following code will let you update the rotation of the map:

  {({ setRotation }) => {
    setRotation(<pass in a number here to set rotation>)

There is an example of this in the projects storybook.