react-apple-mapkitjs

    0.2.5 • Public • Published

    react-apple-mapkitjs

    Installation

    npm install react-apple-mapkitjs

    Add the script file in your reacts public index.html file

    <script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>

    Getting an access token to use Apple's mapkitjs

    Getting your token to get mapkitjs to work is not the most simple of tasks, I recommend watching this video in full to understand how to do this. https://developer.apple.com/videos/play/wwdc2018/508

    If you want a simpler explanation and dont mind giving your private key to some other app to create your access token then the following link is a great resource. https://mapkitjs.rubeng.nl/#/


    Once you have your access token

    Import the AppleMaps component into your project

        import { AppleMaps } from 'react-apple-mapkitjs'

    The only prop that is required is the token prop, without this you will get a "initialization failed" in the console
        <AppleMaps 
            token="your access token here"
        />

    If the access token is correct then the map will default to Leeds, UK


    Additional props and components

    The AppleMaps component takes additional props to adjust the map view and zoom level, you can also specify a map width and height. It currently defaults to view height and width.

        <AppleMaps
            token="your access token here"
            longitude={30.8008}
            latitude={-1.5491}
            zoomLevel={1}
            height='100px'
            width='100px'
        />

    You can also use additional Annotation components to put customizable drop pins on your apple map. The Annotation Components must be child components of AppleMaps.

    First import both the AppleMaps and the Annotation component

    import { AppleMaps, Annotation, ImageAnnotation } from 'react-apple-mapkitjs'

    then add to your react application

    <AppleMaps
        token="your access token here"
        longitude={53.8008}
        latitude={-1.5491}
        zoomLevel={6}
    >
        <Annotation 
            longitude={53.8158}
            latitude={-1.6017}
            color="#969696"
            title="Apple"
            subtitle="work"
            selected={true}
            glyphText=""
        />
        <Annotation 
            longitude={53.8158}
            latitude={-1.5017}
            color="#349576"
            title="New Annotation"
            subtitle="work"
            selected={false}
        />
        <ImageAnnotation 
            longitude={53.8158}
            latitude={-1.4017}
            title="Cat Cafe"
            subtitle="scholes"
            selected={false}
            url='./assets/cat.jpeg'
            visible={false}
        />
    </AppleMaps>

    Most of the props to the Annotation component are self explanatory


    Common Issues

    Map not visible but no console errors - Set the width and height of the map as it may be rendering at 0px x 0px


    Future Development

    I'm going to carry on developing this component as it currently only has basic functionality, if there are any requests or you need any anymore help than that provided above then feel free to get in touch

    Install

    npm i react-apple-mapkitjs

    DownloadsWeekly Downloads

    32

    Version

    0.2.5

    License

    MIT

    Unpacked Size

    23.3 kB

    Total Files

    8

    Last publish

    Collaborators

    • tonyduanesmith