https://github.com/nicolapps/mapkit-react

🗺⚛️ A React wrapper for MapKit JS
https://github.com/nicolapps/mapkit-react

mapkit mapkit-js maps react

Last synced: 5 days ago
JSON representation

🗺⚛️ A React wrapper for MapKit JS

• Host: GitHub
• URL: https://github.com/nicolapps/mapkit-react
• Owner: Nicolapps
• License: mit
• Created: 2022-11-27T04:08:44.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-12-09T13:01:28.000Z (17 days ago)
• Last Synced: 2024-12-15T01:09:28.382Z (12 days ago)
• Topics: mapkit, mapkit-js, maps, react
• Language: TypeScript
• Homepage: https://nicolapps.github.io/mapkit-react/
• Size: 19.5 MB
• Stars: 66
• Watchers: 2
• Forks: 14
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Support: support.md

Awesome Lists containing this project

README

        
# mapkit-react

Use Apple Maps in your React apps!

This library wraps [MapKit JS](https://developer.apple.com/documentation/mapkitjs) in React components. Its declarative, straightforward, and React-idiomatic API allows you to quickly add maps to your project, from prototype to production.

## Demo

Check out [**the Storybook examples**](https://nicolapps.github.io/mapkit-react/) 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:

```sh

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](https://developer.apple.com/documentation/mapkitjs/creating_and_using_tokens_with_mapkit_js)).

You can also see the library used in production on [CMUEats](https://cmueats.com/map) and [CMU Map](https://cmumap.com).

## Usage

First, add the library to your project like this:

```sh

npm install mapkit-react

```

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

```tsx

import React from 'react';

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

function MyComponent() {

  return (

    

      

    

  );

}

```

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

## Features

A complete list of MapKit JS features supported by this library is available on the [Supported MapKit JS features](support.md) page.

## Contributing

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](https://eslint.org/) and [EditorConfig](https://editorconfig.org/) 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.

## Contributors

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    

      
Nicolas Ettlin
💻 📖 💡 👀

      
Derek Reynolds
💻 📖 💡

      
Vladyslav Parashchenko
💻

      
Gabriel Hall
💻

      
Tim Nikischin
💻

      
Jesse Klotz
💻

    

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

## License

mapkit-react is released under the MIT license, see the [LICENSE](https://github.com/Nicolapps/mapkit-react/blob/main/LICENSE) file for details.