@willson/mapkit-map

mapkit-map

<mapkit-map /> is a web component that lets you add an Apple MapKit JS map to your website.

Getting Started

npm install
npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Using this component

Node Modules

• Run npm install @willson/mapkit-map --save
• Put a script tag similar to this <script src='node_modules/@willson/mapkit-map/dist/mapkit-map.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install @willson/mapkit-map --save
• Add an import to the npm packages import @willson/mapkit-map;
• Then you can use the element anywhere in your template, JSX, html etc

The markup

This is the markup used for the screenshot above.

<mapkit-map
  token=""
  width="500px"
  height="500px"
  latitude="45.4215"
  longitude="-75.6972"
  language="en"
>
  <mapkit-pin
    latitude="45.4215"
    longitude="-75.6972"
    pin-title="Ottawa, Ontario, Canada"
  ></mapkit-pin>
</mapkit-map>

Functionality

As it is now, this component lets you put a map on a page with pins on the map. You can have as many pins as you want. More features will be added in future versions.