All Projects → chrisdrackett → react-mapkit

chrisdrackett / react-mapkit

Licence: MIT license
React wrapper for Apple's mapkit.js.

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to react-mapkit

mapkit-android-demo
MapKit Android demo
Stars: ✭ 92 (+29.58%)
Mutual labels:  maps, mapkit
open route service
An encapsulation made around openrouteservice API for Dart and Flutter projects. Made for easy generation of Routes and Directions on Maps, Isochrones, Time-Distance Matrix, Pelias Geocoding, POIs, Elevation and routing Optimizations using their amazing API.
Stars: ✭ 20 (-71.83%)
Mutual labels:  maps
GPXSee-maps
GPXSee maps
Stars: ✭ 27 (-61.97%)
Mutual labels:  maps
geofiddle
Geometric conversions between different formats and projections
Stars: ✭ 15 (-78.87%)
Mutual labels:  maps
mini-map-maker
A tool for automatically generating 3D printable STLs from freely available lidar scan data.
Stars: ✭ 51 (-28.17%)
Mutual labels:  maps
android
Where you can find everything Android from Mapzen
Stars: ✭ 106 (+49.3%)
Mutual labels:  maps
flutter-maplibre-gl
A flutter package for showing customizable vector/raster maps with Maplibre GL (forked from tobrun/flutter-mapbox-gl)
Stars: ✭ 69 (-2.82%)
Mutual labels:  maps
rigel-rn
React Native Starter App with Redux, Sagas, Perfect Structure, works under rigel cli ( which helps to create reducer, components, screens, sagas) by command line
Stars: ✭ 22 (-69.01%)
Mutual labels:  maps
nheqminer-macos
nheqminer for macOS with AVX and CUDA
Stars: ✭ 85 (+19.72%)
Mutual labels:  apple
harp-leaflet
Leaflet plugin for harp.gl
Stars: ✭ 16 (-77.46%)
Mutual labels:  maps
cMaps
🎨 Control options and customization of the Google Maps colors, just 1,7 KB.
Stars: ✭ 14 (-80.28%)
Mutual labels:  maps
30DayMapChallenge
The official website for #30DayMapChallenge, It is a daily mapping/cartography/data visualization challenge aimed at the spatial community. Code for map submissions.
Stars: ✭ 33 (-53.52%)
Mutual labels:  maps
unfolded-maps
Unfolded Studio sample maps 🗺️ with Observable JS 📓, Jupyter/.Net Interactive notebooks 📚 & Unfolded Map SDK
Stars: ✭ 20 (-71.83%)
Mutual labels:  maps
geofind
Multiplayer Geographical Guessing Game using PostGIS, Nuxt, Leaflet & Colyseus.
Stars: ✭ 31 (-56.34%)
Mutual labels:  maps
pinpoint
🌎 A python script for finding your Mac.
Stars: ✭ 56 (-21.13%)
Mutual labels:  apple
coronavirus-map-dashboard
🦠 Coronavirus (COVID-19) Map Dashboard using coronavirus-tracker-api
Stars: ✭ 41 (-42.25%)
Mutual labels:  maps
flyxc
GPS track visualization, flight planning, live tracking, and more ...
Stars: ✭ 47 (-33.8%)
Mutual labels:  maps
census-map-downloader
Easily download U.S. census maps
Stars: ✭ 31 (-56.34%)
Mutual labels:  maps
react-kakao-maps-sdk
React components for using kakao map api
Stars: ✭ 134 (+88.73%)
Mutual labels:  maps
ti.map
Use native Apple Maps & Google Maps in iOS and Android with Axway Titanium
Stars: ✭ 49 (-30.99%)
Mutual labels:  mapkit

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!

Install

yarn add react-mapkit

Token generation (optional)

This package includes a script you can use to generate a JWT token.

At 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 (#14)

First add your private key from Apple to the tokengen folder with the name key.p8 then run:

node tokengen

Follow 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.

Storybook

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.ts.rename to devToken.ts
  2. add a valid token from tokengen (see above) or similar to devToken.ts
  3. run yarn then yarn storybook
  4. visit the URL storybook gives you
  5. play with maps!

Use

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.

Now on to the various ways to use this lib:

1. Map component alone

This 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.

When using the Map component alone you'll need to provide the tokenOrCallback prop.

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

const MapAlone = () => (
  <Map tokenOrCallback={<token or callback here>} center={[37.415, -122.048333]}>
    <Marker latitude={47.6754} longitude={-122.2084} />
  </Map>
)

2. MapProvider

The 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.

You can also optionally set the maps language using language. Refer to: https://developer.apple.com/documentation/mapkitjs/mapkitinitoptions/2978217-language

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

const MapWithProvider = () => (
  <MapkitProvider tokenOrCallback={<token or callback here>} language={<language id>}>
    <Map center={[37.415, -122.048333]}>
      <Marker latitude={47.6754} longitude={-122.2084} />
    </Map>
  </MapkitProvider>
)

3. MapProvider with useMap hook

This 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.

useMap provides the following:

  • mapkit: the mapkit library itself
  • map: the instance of a map
  • mapProps: a set of props you'll need to spread onto a Map component to create a map.
  • setVisibleMapRect, setRegion, setCenter, setRotation: convinance functions to manipulate the map. More coming soon!
import { MapkitProvider, Map, useMap, Marker } from 'react-mapkit'

const UseMapExample = () => {
  const { map, mapProps, setRotation } = useMap()

  return (
    <>
      <button onClick={() => map.setRotationAnimated(50)}>rotate to 50deg!</button>
      <button onClick={() => setRotation(50)}>same as the above, but using the react-mapkit provided function.</button>
      <Map {...mapProps} />
    </>
  )
}

const MapWithUseMap = () => (
  <MapkitProvider tokenOrCallback={<token or callback here>}>
    <UseMapExample/>
  </MapkitProvider>
)

Notes on various components / hooks

Default Map Options

Both 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:

<Map tokenOrCallback={devToken} center={[37.415, -122.048333]} />

To do the same with useMap you would do:

const { map } = useMap({ center: [37.415, -122.048333] })

The available options can be found here: https://developer.apple.com/documentation/mapkitjs/mapconstructoroptions

Note 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].

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].