@wemap/expo-plugin

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

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:

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

Basic usage

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
• camera
• userLocation

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

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.

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>