Options
All
  • Public
  • Public/Protected
  • All
Menu

Mappedin React Native SDK - v5.1.2

Mappedin React Native SDK

Resources

Installation

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

Usage:

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;

Props:

Documented in Detail here

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

Imperative API

Documented in Detail here: MapViewStore

Render map

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

Preparing SVGs for use as assets in markers/tooltips/etc

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.

Preparing

  1. Go to https://jakearchibald.github.io/svgomg/
  2. Drag and drop your SVG
  3. All default settings will work well, but we also recommend enabling “prefer viewBox to width/height”
  4. You can now download the clean SVG or copy and paste its contents.

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>
`

Get nearest node to point on screen

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>
);
};

[experimental] Fetching an offline Venue bundle

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>
);
};