├── .babelrc ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── docs ├── assets │ ├── cat.jpeg │ └── railicon.png ├── bundle.js └── index.html ├── package-lock.json ├── package.json ├── src ├── docs │ ├── index.html │ ├── index.jsx │ └── styles.css └── lib │ ├── Annotation.js │ ├── AppleMaps.js │ ├── CurrentLocationOverride.js │ ├── ImageAnnotation.js │ └── index.jsx └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/env", "@babel/react"], 3 | "plugins": [ 4 | "@babel/plugin-proposal-object-rest-spread", 5 | "@babel/plugin-proposal-class-properties" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | /lib 3 | config.js -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | docs 2 | src 3 | .babelrc 4 | webpack.config.js 5 | config.js -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Markus Englund 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-apple-mapkitjs 2 | 3 | ## Installation 4 | 5 | ```javascript 6 | npm install react-apple-mapkitjs 7 | ``` 8 | 9 | Add the script file in your reacts public index.html file 10 | 11 | ```html 12 | 13 | ``` 14 | 15 | ## Getting an access token to use Apple's mapkitjs 16 | 17 | 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. 18 | https://developer.apple.com/videos/play/wwdc2018/508 19 | 20 | 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. 21 | https://mapkitjs.rubeng.nl/#/ 22 | *** 23 | ## Once you have your access token 24 | 25 | Import the AppleMaps component into your project 26 | ```jsx 27 | import { AppleMaps } from 'react-apple-mapkitjs' 28 | ``` 29 |
30 | The only prop that is required is the token prop, without this you will get a "initialization failed" in the console 31 | 32 | ```jsx 33 | 36 | ``` 37 | If the access token is correct then the map will default to Leeds, UK 38 | *** 39 | ## Additional props and components 40 | 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. 41 | 42 | ```jsx 43 | 51 | ``` 52 | 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. 53 | 54 | First import both the AppleMaps and the Annotation component 55 | ```jsx 56 | import { AppleMaps, Annotation, ImageAnnotation } from 'react-apple-mapkitjs' 57 | ``` 58 | then add to your react application 59 | ```jsx 60 | 66 | 75 | 83 | 92 | 93 | ``` 94 | Most of the props to the Annotation component are self explanatory 95 | *** 96 | ## Common Issues 97 | Map not visible but no console errors - Set the width and height of the map as it may be rendering at 0px x 0px 98 | *** 99 | ## Future Development 100 | 101 | 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 102 | 103 | -------------------------------------------------------------------------------- /docs/assets/cat.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonyduanesmith/react-apple-mapkitjs/bf586e75d80de29e7b6716e21b0cb1f7b4d2736f/docs/assets/cat.jpeg -------------------------------------------------------------------------------- /docs/assets/railicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonyduanesmith/react-apple-mapkitjs/bf586e75d80de29e7b6716e21b0cb1f7b4d2736f/docs/assets/railicon.png -------------------------------------------------------------------------------- /docs/bundle.js: -------------------------------------------------------------------------------- 1 | !function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=23)}([function(e,t,n){"use strict";e.exports=n(7)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"AppleMaps",{enumerable:!0,get:function(){return r.default}}),Object.defineProperty(t,"Annotation",{enumerable:!0,get:function(){return o.default}}),Object.defineProperty(t,"CurrentLocationOverride",{enumerable:!0,get:function(){return a.default}});var r=i(n(15)),o=i(n(16)),a=i(n(17));function i(e){return e&&e.__esModule?e:{default:e}}},function(e,t,n){"use strict"; 2 | /* 3 | object-assign 4 | (c) Sindre Sorhus 5 | @license MIT 6 | */var r=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(e){r[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var n,i,l=function(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(e),u=1;uN.length&&N.push(e)}function L(e,t,n,r){var o=typeof e;"undefined"!==o&&"boolean"!==o||(e=null);var a=!1;if(null===e)a=!0;else switch(o){case"string":case"number":a=!0;break;case"object":switch(e.$$typeof){case u:case c:a=!0}}if(a)return n(r,e,""===t?"."+I(e,0):t),1;if(a=0,t=""===t?".":t+":",Array.isArray(e))for(var i=0;ithis.eventPool.length&&this.eventPool.push(e)}function xe(e){e.eventPool=[],e.getPooled=ke,e.release=Ce}i(we.prototype,{preventDefault:function(){this.defaultPrevented=!0;var e=this.nativeEvent;e&&(e.preventDefault?e.preventDefault():"unknown"!=typeof e.returnValue&&(e.returnValue=!1),this.isDefaultPrevented=l.thatReturnsTrue)},stopPropagation:function(){var e=this.nativeEvent;e&&(e.stopPropagation?e.stopPropagation():"unknown"!=typeof e.cancelBubble&&(e.cancelBubble=!0),this.isPropagationStopped=l.thatReturnsTrue)},persist:function(){this.isPersistent=l.thatReturnsTrue},isPersistent:l.thatReturnsFalse,destructor:function(){var e,t=this.constructor.Interface;for(e in t)this[e]=null;for(t=0;t=Pe),Me=String.fromCharCode(32),Re={beforeInput:{phasedRegistrationNames:{bubbled:"onBeforeInput",captured:"onBeforeInputCapture"},dependencies:["compositionend","keypress","textInput","paste"]},compositionEnd:{phasedRegistrationNames:{bubbled:"onCompositionEnd",captured:"onCompositionEndCapture"},dependencies:"blur compositionend keydown keypress keyup mousedown".split(" ")},compositionStart:{phasedRegistrationNames:{bubbled:"onCompositionStart",captured:"onCompositionStartCapture"},dependencies:"blur compositionstart keydown keypress keyup mousedown".split(" ")},compositionUpdate:{phasedRegistrationNames:{bubbled:"onCompositionUpdate",captured:"onCompositionUpdateCapture"},dependencies:"blur compositionupdate keydown keypress keyup mousedown".split(" ")}},Le=!1;function Ie(e,t){switch(e){case"keyup":return-1!==Te.indexOf(t.keyCode);case"keydown":return 229!==t.keyCode;case"keypress":case"mousedown":case"blur":return!0;default:return!1}}function Ue(e){return"object"==typeof(e=e.detail)&&"data"in e?e.data:null}var Fe=!1;var je={eventTypes:Re,extractEvents:function(e,t,n,r){var o=void 0,a=void 0;if(Se)e:{switch(e){case"compositionstart":o=Re.compositionStart;break e;case"compositionend":o=Re.compositionEnd;break e;case"compositionupdate":o=Re.compositionUpdate;break e}o=void 0}else Fe?Ie(e,n)&&(o=Re.compositionEnd):"keydown"===e&&229===n.keyCode&&(o=Re.compositionStart);return o?(Ne&&(Fe||o!==Re.compositionStart?o===Re.compositionEnd&&Fe&&(a=ve()):(me._root=r,me._startText=ye(),Fe=!0)),o=Ee.getPooled(o,t,n,r),a?o.data=a:null!==(a=Ue(n))&&(o.data=a),ee(o),a=o):a=null,(e=Oe?function(e,t){switch(e){case"compositionend":return Ue(t);case"keypress":return 32!==t.which?null:(Le=!0,Me);case"textInput":return(e=t.data)===Me&&Le?null:e;default:return null}}(e,n):function(e,t){if(Fe)return"compositionend"===e||!Se&&Ie(e,t)?(e=ve(),me._root=null,me._startText=null,me._fallbackText=null,Fe=!1,e):null;switch(e){case"paste":return null;case"keypress":if(!(t.ctrlKey||t.altKey||t.metaKey)||t.ctrlKey&&t.altKey){if(t.char&&1