# Wemap Map View

An Expo component for displaying interactive maps with POIs, routing, and offline capabilities using MapLibre.

## Features

- Display interactive maps using MapLibre GL
- Show and manage Points of Interest (POIs)
- Calculate and display routes between locations
- Support for offline map usage
- Custom map styling
- User location tracking

## Installation

```bash
npm install @wemap/expo-plugin @maplibre/maplibre-react-native react-native-mmkv@2
```

> [!NOTE]
> This plugin requires `@maplibre/maplibre-react-native` and `react-native-mmkv@2` to be installed in order to work.
> The `react-native-mmkv` version is pinned to `2.*` to make it works without the newArch enabled.

In your `app.json` file, add the following:

```json
{
    "plugins": [
       // ...
      "@wemap/expo-plugin",
       // ...
    ]
}
```

## Basic usage

```tsx
import MapView from '@wemap/expo-plugin';

<MapView
    emmid={12345}
    style={{ flex: 1 }}
/>
```

## Advanced usage

### Get references to the different components

Wemap MapView component exposes references to the different components.

- [mapView](https://maplibre.org/maplibre-react-native/docs/components/general/mapview)
- [camera](https://maplibre.org/maplibre-react-native/docs/components/general/camera)
- [userLocation](https://maplibre.org/maplibre-react-native/docs/components/general/userlocation)

```tsx
import { MapView, MapManager, ItineraryManager } from '@wemap/expo-plugin';

export default function App() {
    const [mapRefs, setMapRefs] = useState<WemapMapViewRef | null>(null);

    const moveCamera = () => {
        mapRefs?.camera.setCamera({
            centerCoordinate: [-7.9799463, 31.6603841],
            zoomLevel: 15
        });
    }

    const getMapCenter = async () => {
        const center = await mapRefs?.mapView.getCenter();
        console.log(center);
    }

    return (
        <MapView
            onRefsReady={setMapRefs}
            emmid={12345}
            style={{ flex: 1 }} />
    );
};
```

### Using itinerary and map manager to display an itinerary

```tsx
import { MapManager, ItineraryManager } from '@wemap/expo-plugin';

ItineraryManager.getItineraries(
    { lat: 31.6603841,lng: -7.9799463},
    { lat: 31.6615177, lng: -7.9790850} 
).then((response) => {
    if (response.itineraries.length > 0) {
        const polylineId = MapManager.drawItinerary(response.itineraries[0]);

        // Later
        MapManager.removePolyline(polylineId);
    }
});

```

### Using MapLibre components

You can use native MapLibre components by using the `MapView` component as a parent.
This will work with any MapLibre component that is available in the MapLibre React Native ecosystem.

```tsx
import { PointAnnotation } from '@maplibre/maplibre-react-native';

<MapView>
    <PointAnnotation id="1" coordinate={[3.32, 43.32]}>
        <View style={{ width: 10, height: 10, backgroundColor: 'blue' }} />
    </PointAnnotation>
</MapView>
```