tonyduanesmith / react-apple-mapkitjs

React wrapper for Apple MapkitJS

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

react-apple-mapkitjs's Issues

Only redrawing on Location change of Map

I was wondering, wether there is a reason the map is only updated on location changes, and not on changes to markers?

Allow specifying the maptype to be shown

I would love to be able to set the maptypes through props:

<AppleMaps
    mapType="hybrid" // standard | mutedStandard | hybrid | satellite
/>

Or specify a default one that should be shown on startup, while still allowing the user to cycle through them:

<AppleMaps
    defaultMapType="hybrid" // standard | mutedStandard | hybrid | satellite
/>

See:

• https://developer.apple.com/documentation/mapkitjs/mapkit/map/2973919-maptype
• https://developer.apple.com/documentation/mapkitjs/mapkit/map/maptypes

Repository abandoned?

It seems that this repository is abandoned? Author also doesn't have any activity in the past 3 quarters?

@tonyduanesmith

I've started adding changes myself in my fork (Zandor300 / react-apple-mapkitjs) and published this to NPM as @zandor300/react-apple-mapkitjs. If author becomes active again, I will gladly create PRs for my changes for them to be merged into this repo.

Latitude and Longitude

Hi,

I'm giving the right latitude and longitude from Brasilia to <AppleMaps longitude={-47.93} latitude={-15.78} /> and <Annotation longitude={-47.93} latitude={-15.78} />, but the position on map are wrong:

I tried to change the props (latitude => longitude, vice-e-versa) and then it showed me the right result:

Looking in the source code, i found that you made a mistake (or maybe Apple changed) in the parameters of mapkit.Coordinate(longitude, latitude) (AppleMaps.js#L184). The right order is mapkit.Coordinate(latitude, longitude) Mapkit Docs.

Hi there! I see you post a question on stack overflow"opencv4nodejs saving desciptors of an image and loading back up", and I am stuck in the same dilemma. Plz Help me if you have fixed it already. THX!

R U just gonna use opencv4nodejs for image retrieval? if it is, So am I. I wanna use bad of visual word to retrieve testing-image from loads of traning-images in database, but I feel confused about where to start, PLZ Help Me! THX!

Loading annotation from state

Hi guys,

There is a problem with kind of "dynamic annotation" I am trying to pass title of annotation to map but it's not rendering cause for component is undefined during loading process.

Production problem

When do the deploy into server, the map doesn't show the points, it's only in production using react.

I don't know why in localhost working but en host dont

Would this work with react-native ? [Question]

Full globe mode

Just wondering is there away to show the full world instead of just Australia or a part of the map.

I am wanting to show all of our server locations/

Solutions if not available:
List on the right hand side that can be clicked on, and that can move the map.

Looking forward to your feedback.