react-apple-mapkit v1.2.8

MapKit React Integration

A comprehensive library to seamlessly integrate Apple MapKit JS with React. This library provides TypeScript support and rich configuration options for maps, markers, and annotations.

Table of Contents

1. Installation
2. Getting Started
3. Configuration
   • Map Configuration
   • Marker Configuration
   • Annotation Configuration
4. Event Handling
5. Examples
6. API Reference
7. License

1. Installation

Install the package using npm or yarn:

npm install react-apple-mapkit

or

yarn add react-apple-mapkit

2. Getting Started

Initialization

Before using the map, you need to initialize MapKit with an authentication token.

import React from 'react';
import Map from 'react-apple-mapkit';

const App = () => {
  return (
    <Map token="YOUR_MAPKIT_JS_TOKEN">
      <h1>Apple MapKit Integration</h1>
    </Map>
  );
};

export default App;

3. Configuration

3.1 Map Configuration

3.2 Marker Configuration

3.3 Annotation Configuration

4. Event Handling

Events can be easily attached to map and markers.

Map Events

Marker Events

5. Examples

Basic Map

import React from 'react';
import Map from 'react-apple-mapkit';

const App = () => (
  <Map token="YOUR_MAPKIT_JS_TOKEN">
    <h2>My Map</h2>
  </Map>
);

export default App;

Map with Marker

import React from 'react';
import Map from 'react-apple-mapkit';
import Marker from 'react-apple-mapkit/Marker';

const App = () => (
  <Map token="YOUR_MAPKIT_JS_TOKEN">
    <Marker latitude={37.7749} longitude={-122.4194} title="San Francisco" />
  </Map>
);

export default App;

6. API Reference

Coordinate

Represents a point on the Earth’s surface.

interface Coordinate {
  latitude: number;
  longitude: number;
}

CoordinateRegion

Represents a geographic region.

interface CoordinateRegion {
  centerLatitude: number;
  centerLongitude: number;
  latitudeDelta: number;
  longitudeDelta: number;
}

7. License

This project is licensed under the MIT License. See the LICENSE file for details.

For more detailed information, visit the official documentation. 🎉