{"id":18474664,"url":"https://github.com/chrisdrackett/react-mapkit","last_synced_at":"2025-04-24T00:22:24.291Z","repository":{"id":32534241,"uuid":"136406583","full_name":"chrisdrackett/react-mapkit","owner":"chrisdrackett","description":"React wrapper for Apple's mapkit.js.","archived":false,"fork":false,"pushed_at":"2023-01-07T04:08:52.000Z","size":5691,"stargazers_count":76,"open_issues_count":29,"forks_count":25,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-13T23:54:04.881Z","etag":null,"topics":["apple","mapkit","maps","react"],"latest_commit_sha":null,"homepage":"https://chrisdrackett.github.io/react-mapkit/?selectedStory=all%20props\u0026full=0\u0026addons=1\u0026stories=1\u0026panelRight=1\u0026addonPanel=storybooks%2Fstorybook-addon-knobs","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chrisdrackett.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-07T01:44:51.000Z","updated_at":"2024-09-19T14:17:29.000Z","dependencies_parsed_at":"2023-01-14T21:45:51.838Z","dependency_job_id":null,"html_url":"https://github.com/chrisdrackett/react-mapkit","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisdrackett%2Freact-mapkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisdrackett%2Freact-mapkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisdrackett%2Freact-mapkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisdrackett%2Freact-mapkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chrisdrackett","download_url":"https://codeload.github.com/chrisdrackett/react-mapkit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250536239,"owners_count":21446698,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apple","mapkit","maps","react"],"created_at":"2024-11-06T10:30:14.894Z","updated_at":"2025-04-24T00:22:24.245Z","avatar_url":"https://github.com/chrisdrackett.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Mapkit 🗺️\n\n[![npm version](https://badge.fury.io/js/react-mapkit.svg)](https://badge.fury.io/js/react-mapkit)\n[![Dependency Status](https://david-dm.org/chrisdrackett/react-mapkit.svg)](https://david-dm.org/chrisdrackett/react-mapkit)\n\n### ⚠️ Note ⚠️\n\nThis project is still in development and is missing features (including being able to place anything other than markers on a map). Contributions are welcome!\n\nSee the [demo storybook](https://chrisdrackett.github.io/react-mapkit/)!\n\n## Install\n\n`yarn add react-mapkit`\n\n### Token generation (optional)\n\nThis package includes a script you can use to generate a JWT token.\n\nAt the moment this only work if you've run `yarn` within the package folder and run the script from within `react-mapkit`. This should be fixed (https://github.com/chrisdrackett/react-mapkit/issues/14)\n\nFirst add your private key from Apple to the tokengen folder with the name `key.p8` then run:\n\n`node tokengen`\n\nFollow the prompts. The generated token can then be used for your app. If you want to generate short lived tokens you can refer to the script in tokengen to get an idea of how to do this in node.\n\n## Storybook\n\nThis project contains a [storybook](https://storybook.js.org) that shows examples of how the component can be used. To use this storybook follow these steps:\n\n1.  copy `devToken.ts.rename` to `devToken.ts`\n2.  add a valid token from tokengen (see above) or similar to `devToken.ts`\n3.  run `yarn` then `yarn storybook`\n4.  visit the URL storybook gives you\n5.  play with maps!\n\n## Use\n\n`React Mapkit` can be used a couple different ways. No matter what method you use, you'll need to use a token or callback. Refer to https://developer.apple.com/documentation/mapkitjs/mapkit/2974045-init for info about using a server and callback or use the `tokengen` script included in this package to create your own token.\n\nNow on to the various ways to use this lib:\n\n### 1. `Map` component alone\n\nThis is probably the simplest way to use `react-mapkit`. This method works if you just want to render a single map and don't need to manipulate it (other than placing markers) via. code.\n\nWhen using the `Map` component alone you'll need to provide the `tokenOrCallback` prop.\n\n```js\nimport { Map, Marker } from 'react-mapkit'\n\nconst MapAlone = () =\u003e (\n  \u003cMap tokenOrCallback={\u003ctoken or callback here\u003e} center={[37.415, -122.048333]}\u003e\n    \u003cMarker latitude={47.6754} longitude={-122.2084} /\u003e\n  \u003c/Map\u003e\n)\n```\n\n### 2. `MapProvider`\n\nThe second way to use `react-mapkit` is by having a provider. This method is useful if you plan on having more than one map in your app and don't want to have a `tokenOrCallback` prop on all of them. I suggest putting the `MapkitProvider` at the top of your app so it only loads once. Loading it twice can cause errors.\n\nYou can also optionally set the maps language using `language`. Refer to: https://developer.apple.com/documentation/mapkitjs/mapkitinitoptions/2978217-language\n\n```js\nimport { MapkitProvider, Map, Marker } from 'react-mapkit'\n\nconst MapWithProvider = () =\u003e (\n  \u003cMapkitProvider tokenOrCallback={\u003ctoken or callback here\u003e} language={\u003clanguage id\u003e}\u003e\n    \u003cMap center={[37.415, -122.048333]}\u003e\n      \u003cMarker latitude={47.6754} longitude={-122.2084} /\u003e\n    \u003c/Map\u003e\n  \u003c/MapkitProvider\u003e\n)\n```\n\n### 3. `MapProvider` with `useMap` hook\n\nThis is the most powerful way to use this library as it gives you full access to both `mapkit` and the `map`. This lets you do anything that mapkit supports even if this library does not yet support it. This method is similar to the above as you are using both the `MapkitProvider` and `Map` components, but you'll also use the `useMap` hook to get access to the map instance.\n\n`useMap` provides the following:\n\n- `mapkit`: the mapkit library itself\n- `map`: the instance of a map\n- `mapProps`: a set of props you'll need to spread onto a `Map` component to create a map.\n- `setVisibleMapRect`, `setRegion`, `setCenter`, `setRotation`: convinance functions to manipulate the map. More coming soon!\n\n```js\nimport { MapkitProvider, Map, useMap, Marker } from 'react-mapkit'\n\nconst UseMapExample = () =\u003e {\n  const { map, mapProps, setRotation } = useMap()\n\n  return (\n    \u003c\u003e\n      \u003cbutton onClick={() =\u003e map.setRotationAnimated(50)}\u003erotate to 50deg!\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e setRotation(50)}\u003esame as the above, but using the react-mapkit provided function.\u003c/button\u003e\n      \u003cMap {...mapProps} /\u003e\n    \u003c/\u003e\n  )\n}\n\nconst MapWithUseMap = () =\u003e (\n  \u003cMapkitProvider tokenOrCallback={\u003ctoken or callback here\u003e}\u003e\n    \u003cUseMapExample/\u003e\n  \u003c/MapkitProvider\u003e\n)\n```\n\n## Notes on various components / hooks\n\n### Default Map Options\n\nBoth the `Map` component and the `useMap` hook can take default map options. for map these are passed as props. For example the following sets a custom center for the map:\n\n```js\n\u003cMap tokenOrCallback={devToken} center={[37.415, -122.048333]} /\u003e\n```\n\nTo do the same with `useMap` you would do:\n\n```js\nconst { map } = useMap({ center: [37.415, -122.048333] })\n```\n\nThe available options can be found here: https://developer.apple.com/documentation/mapkitjs/mapconstructoroptions\n\nNote that some of these have been simplified so you don't need to use mapkit constructors. For example, instead of having to pass create a coordinate via `new mapkit.Coordinate(37.415, -122.048333)` to supply to `center` you just pass `[37.415, -122.048333]`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisdrackett%2Freact-mapkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrisdrackett%2Freact-mapkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisdrackett%2Freact-mapkit/lists"}