NPM:
npm install @mappedin/react-native-sdk react-native-webview
YARN:
yarn add @mappedin/react-native-sdk react-native-webview
Update cocoapods: cd ios && pod install
We provide both a declarative API using props and an imperative API with methods. For example, to listen to polygon clicks, we provide a prop onPolygonClicked
; in order to focus the map onto this polygon, we provide an imperative API method focusOn
.
Component Signature:
const MiMapView = (props: TMapViewProps) => React.ReactElement;
Prop | Description | Signature | Required |
---|---|---|---|
options | Options to initialize MapView with | TMiMapViewOptions |
Yes |
ref | Exposes Imperative API MapViewStore |
React.MutableRefObject<MapViewStore > |
No |
onDataLoaded | Fired when Mappedin data is loaded |
({ venueData: Mappedin }) => void |
No |
onFirstMapLoaded | Fires when map can first be interacted with | () => void | No |
onBlueDotStateChanged | Fires when BlueDot state changes | ({ stateChange: TBlueDotStateChange }) => void |
No |
onBlueDotPositionUpdated | Fires when BlueDot position changes | ({ update: TBlueDotPositionUpdate }) => void |
No |
onCameraChanged | Fires when Camera position, tilt, zoom or rotation changes | ({ change: TCameraChange }) => void |
No |
onStateChanged | Fires when SDK State changes | ({ state: STATE }) => void |
No |
onClick | Fires when clicking within the mapView | (prop: TMapClickEvent ) => void |
Documented in Detail here: MapViewStore
Example:
import { Mappedin } from '@mappedin/react-native-sdk';
const options = {
clientId: '****',
clientSecret: '***',
venue: 'venue-slug',
perspective: 'Website',
};
// Render map
const App = () => {
return <MiMapView style={{ flex: 1 }} options={options} />;
};
Example:
import { MiMapView } from '@mappedin/react-native-sdk';
import type { Mappedin } from '@mappedin/react-native-sdk';
const App = () => {
const [venueData, setVenueData] = React.useState<Mappedin>({});
return (
<MiMapView
options={options}
onDataLoaded={({ venueData }) => {
setVenueData(venueData);
}}
/>
);
};
See more detailed samples and guides on the Mappedin Developer Portal
SVG is a popular format for image assets, which means there are a lot of proprietary, broken, or unnecessary tags when getting SVGs online.
Before using SVGs with our SDKs, they need to get “cleaned up” - this also drastically reduces their file size, so win-win.
Once the SVGs are prepared, they need to be wrapped in a div
element which will give them an explicit size. This allows markers to be any desired size and the SVG will grow/shrink appropriately. The element can also add a background, shadows, and any other styles.
`
<div style="width: 32px; height: 32px;">
<svg xmlns="http://www.w3.org/2000/svg">...</svg>
</div>
`
import { MiMapView } from '@mappedin/react-native-sdk';
import type { MapViewStore } from '@mappedin/react-native-sdk';
const App = () => {
// Imperative API
const mapView = React.useRef<MapViewStore>();
return (
<TouchableWithoutFeedback
style={{ flex: 1 }}
onPress={async ({ locationX, locationY }) => {
// get nearest node to X,Y screen coordinate
const node = await mapView.current?.getNearestNodeByScreenCoordinates(
locationX,
locationY,
);
}}
>
<MiMapView style={{ flex: 1 }} ref={mapView} options={options} />
</TouchableWithoutFeedback>
);
};
It is possible to download the venue bundle with all assets built in, which allows for caching/offline solutions.
Note 1: This must be enabled by Mappedin's Customer Solutions team.
Note 2: This may slow down map rendering for large venues, especially those with many images. We have improvements to this on our roadmap.
import {
getVenueBundle,
MiMapView,
Mappedin,
} from '@mappedin/react-native-sdk';
import { View } from 'react-native';
import React, { useEffect } from 'react';
import fs from 'react-native-fs';
const options = {
clientId: 'clientId',
clientSecret: 'clientSecret',
venue: 'venue-slug',
perspective: 'Website',
};
const App = () => {
const [venueData, setVenueData] = React.useState<Mappedin>();
useEffect(() => {
async function init() {
const path = fs.DocumentDirectoryPath + '/bundle.json';
try {
// let's check if cache exists
if (!(await fs.exists(path))) {
console.log('cache doesnt exist');
const venue = await getVenueBundle(options);
setVenueData(venue);
fs.writeFile(path, venue.toString());
} else {
console.log('cache exists, using');
const venueString = await fs.readFile(path);
const venue = new Mappedin(options);
// hydrate the instance with cached data
venue.hydrate(venueString);
setVenueData(venue);
}
} catch (e) {
console.error(e);
}
}
init();
}, []);
return (
<View style={{ flex: 1 }}>
{venueData != null && (
<MiMapView
style={{ flex: 1 }}
options={options}
// pass venueData in
venueData={venueData}
/>
)}
</View>
);
};