Use Apple Maps in your React apps!

This library wraps MapKit JS in React components. Its declarative, straightforward, and React-idiomatic API allows you to quickly add maps to your project, from prototype to production.

Check out the Storybook examples to see the available components, experiment with their parameters, and read some code samples.

You can run the examples locally by cloning the project and running the following command:

STORYBOOK_MAPKIT_JS_TOKEN="…" npm run storybook

Replace … by your MapKit JS token (you can learn how to generate one on the MapKit JS documentation).

You can also see the library used in production on CMUEats and CMU Map.

First, add the library to your project like this:

npm install mapkit-react

You can then use the library in your project like this:

import React from 'react';
import { Map, Marker } from 'mapkit-react';

function MyComponent() {
  return (
    <Map token="…">
      <Marker latitude={46.52} longitude={6.57} />
    </Map>
  );
}

You can see all the supported parameters in Storybook (see above).

A complete list of MapKit JS features supported by this library is available on the Supported MapKit JS features page.

If you have a question or an idea, you can create an issue. Pull requests are welcome! If you want to contribute, don’t hesitate to look into the unassigned issues.

If you want to expand the provided API or make breaking changes, please open an issue first to discuss it.

The project uses ESLint and EditorConfig to ensure code quality and consistency. Checks are run automatically when a commit is pushed to the repository, but it is convenient to install the relevant plugins in your editor to see the errors and warnings in real time.

Thanks goes to these wonderful people (emoji key):

Nicolas Ettlin 💻 📖 💡 👀

Derek Reynolds 💻 📖 💡

Vladyslav Parashchenko 💻

Gabriel Hall 💻

Tim Nikischin 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

mapkit-react is released under the MIT license, see the LICENSE file for details.