Research
Security News
Threat Actor Exposes Playbook for Exploiting npm to Build Blockchain-Powered Botnets
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
react-mapkit
Advanced tools
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
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 (https://github.com/chrisdrackett/react-mapkit/issues/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.
This project contains a storybook that shows examples of how the component can be used. To use this storybook follow these steps:
devToken.ts.rename
to devToken.ts
devToken.ts
yarn
then yarn storybook
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:
Map
component aloneThis 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>
)
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>
)
MapProvider
with useMap
hookThis 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 itselfmap
: the instance of a mapmapProps
: 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>
)
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]
.
FAQs
React wrapper for Apple's mapkit.js.
We found that react-mapkit demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.