Options
All
  • Public
  • Public/Protected
  • All
Menu

@mappedin/react-native-sdk

Mappedin React Native SDK

Installation

NPM:

npm install @mappedin/react-native-sdk react-native-webview

YARN:

yarn add @mappedin/react-native-sdk react-native-webview

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
onPolygonClicked Gets called when clicking interactive polygon ({ polygon: IMappedinPolygon }) => void No
onDataLoaded Fired when IMappedin data is loaded ({ venueData: IMappedin }) => void No
onFirstMapLoaded Fires when map can first be interacted with () => void No
onBlueDotUpdated Fires when BlueDot updates ({ update: TBlueDotUpdate }) => void No
onStateChanged Fires when SDK State changes ({ state: STATE }) => void No

Imperative API

Documented in Detail here: MapViewStore

Render map

Example:

import { IMappedin } 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 { IMappedin } from '@mappedin/react-native-sdk';

const App = () => {
  const [venueData, setVenueData] = React.useState<IMappedin>({});

  return (
    <MiMapView
      options={options}
      onDataLoaded={({ venueData }) => {
        setVenueData(venueData);
      }}
    />
  );
};

Listen to polygon clicks

import { MiMapView } from '@mappedin/react-native-sdk';
import type { IMappedinLocation, IMappedin } from '@mappedin/react-native-sdk';

const App = () => {
  const [venueData, setVenueData] = React.useState<IMappedin>({});
  const [
    selectedLocation,
    setSelectedLocation,
  ] = React.useState<IMappedinLocation>({});

  return (
    <MiMapView
      style={{ flex: 1 }} 
      options={options}
      onDataLoaded={({ venueData: Mappedin }) => {
        setVenueData(venueData);
      }}
      onPolygonClicked={({ polygon }) => {
        setSelectedLocation(polygon.locations[0]);
      }}
    />
  );
};

Focus on the polygon and highlight it

import { MiMapView } from '@mappedin/react-native-sdk';
import type { IMappedinPolygon, IMapViewStore, IMappedin } from '@mappedin/react-native-sdk';

const App = () => {
  const [venueData, setVenueData] = React.useState<IMappedin>({});
  const [
    selectedLocation,
    setSelectedLocation,
  ] = React.useState<IMappedinLocation>({});

  // Imperative API
  const mapView = React.useRef<IMapViewStore>();

  return (
    <MiMapView
      style={{ flex: 1 }} 
      ref={mapView}
      options={options}
      onDataLoaded={({ venueData: IMappedin }) => {
        setVenueData(venueData);
      }}
      onPolygonClicked={async ({ polygon: IMappedinPolygon }) => {
        setSelectedLocation(polygon.locations[0]);
        mapView.current.clearAllPolygonColors();
        mapView.current.setPolygonColor(polygon, 'red');
        // lets wait for the focusOn to complete
        await mapView.current.focusOn({
          polygons: [polygon],
        });
        console.log('success!');
      }}
    />
  );
};

Enable Blue Dot and listen to update events

import { MiMapView } from '@mappedin/react-native-sdk';
import type {
  TBlueDotUpdate,
  IMapViewStore,
  IMappedinMap,
  IMappedinNode,
} from '@mappedin/react-native-sdk';

// Imperative API
const mapView = React.useRef<IMapViewStore>();

const App = () => {
  return (
    <MiMapView
      style={{ flex: 1 }} 
      ref={mapView}
      options={options}
      onFirstMapLoaded={() => {
        mapView.current.BlueDot.enable();
      }}
      onBlueDotUpdated={({ update }: { update: TBlueDotUpdate }) => {
        // This event can be used to get real time updates as to what the nearest node is
        const {
          map,
          nearestNode,
          error,
        }: {
          map: IMappedinMap;
          nearestNode: IMappedinNode;
          error: string;
        } = update;
      }}
    />
  );
};

Set SDK into "FOLLOW" mode

Setting the SDK into follow mode will lock the camera to follow the BlueDot at the center of the screen. Interacting with the map will put the SDK back into EXPLORE mode and emit onStateChanged event.

import { MiMapView } from '@mappedin/react-native-sdk';
import type {
  TBlueDotUpdate,
  IMapViewStore,
  IMappedinLocation,
  IMappedinNode,
} from '@mappedin/react-native-sdk';
import { STATE } from '@mappedin/react-native-sdk';

// Imperative API
const mapView = React.useRef<IMapViewStore>();
const nearestNode = React.useRef<IMappedinNode>();
const [
  selectedLocation,
  setSelectedLocation,
] = React.useState<IMappedinLocation>({});

const App = () => {
  return (
    <>
      <MiMapView
        style={{ flex: 1 }} 
        ref={mapView}
        options={options}
        onStateChanged={({ state }) => {
          console.log('Current State is', state);
        }}
        onDataLoaded={() => {
          mapView.current.setState(STATE.FOLLOW);
          mapView.current.BlueDot.enable();
        }}
        onBlueDotUpdated={({ update }) => {
          nearestNode.current = update.nearestNode;
        }}
        onPolygonClicked={({ polygon: IMappedinPolygon }) => {
          setSelectedLocation(polygon.locations[0]);
        }}
      />
    </>
  );
};

Get Directions

This API can be used to get a directions object from any IMappedinLocation | IMappedinNode | IMappedinPolygon to any IMappedinLocation | IMappedinNode | IMappedinPolygon. This can be used to show Text directions, as well as draw paths.

Example:

...
<Button
  title="Get Directions"
  onPress={async () => {
    try {
      const directions = await controller.current?.getDirections({
        from: selectedLocation,
        to: destinationLocation,
      });
      console.log(directions);
    } catch (e) {
      console.error(e);
    }
  }}
></Button>
...

Get Directions from One Location to Another and show path and connections on map

import { MiMapView } from '@mappedin/react-native-sdk';
import type {
  TBlueDotUpdate,
  IMapViewStore,
  IMappedinLocation,
  IMappedinNode,
} from '@mappedin/react-native-sdk';

// Imperative API
const mapView = React.useRef<IMapViewStore>();
const [destination, setDestination] = React.useRef<IMappedinLocation>();
const [
  departure,
  setDeparture,
] = React.useState<IMappedinLocation>({});

const App = () => {
  return (
    <>
      <MiMapView
        style={{ flex: 1 }} 
        ref={mapView}
        options={options}
        onDataLoaded={() => {
          mapView.current.BlueDot.enable();
        }}
        onPolygonClicked={({ polygon: IMappedinPolygon }) => {
          // first, let's set departure
          if (departure == null) {
            setDeparture(polygon.locations[0]);
          } else {
            // then, destination
            setDestination(polygon.locations[0]);
          }
        }}
      />
      <Button
        title="Get Directions"
        onPress={async () => {
          try {
            // get Directions
            const directions = await controller.current?.getDirections({
              from: departuer,
              to: destination,
            });
            // draw path on map
            await controller.current?.drawJourney(directions);
            // focus on the path
            controller.current?.focusOn({
              nodes: directions.path,
            });
          } catch (e) {
            console.error(e);
          }
        }}
      ></Button>
      <Button 
        title="Reset" 
        onPress={() => {
         mapView.current.clearAllPaths();
         setDeparture(undefined);
         setDestination(undefined);
        }}
      ></Button>
    </>
  );
};

Get nearest node to point on screen

import { MiMapView } from '@mappedin/react-native-sdk';
import type {
  IMapViewStore,
} from '@mappedin/react-native-sdk';

// Imperative API
const mapView = React.useRef<IMapViewStore>();

const App = () => {
  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>
  );
};

Get Directions from BlueDot and show path and connections on map

import { MiMapView } from '@mappedin/react-native-sdk';
import type {
  TBlueDotUpdate,
  IMapViewStore,
  IMappedinLocation,
  IMappedinNode,
} from '@mappedin/react-native-sdk';

// Imperative API
const mapView = React.useRef<IMapViewStore>();
const nearestNode = React.useRef<IMappedinNode>();
const [
  selectedLocation,
  setSelectedLocation,
] = React.useState<IMappedinLocation>({});

const App = () => {
  return (
    <>
      <MiMapView
        style={{ flex: 1 }} 
        ref={mapView}
        options={options}
        onDataLoaded={() => {
          mapView.current.BlueDot.enable();
        }}
        onBlueDotUpdated={({ update }) => {
          nearestNode.current = update.nearestNode;
        }}
        onPolygonClicked={({ polygon: IMappedinPolygon }) => {
          setSelectedLocation(polygon.locations[0]);
        }}
      />
      <Button
        title="Get Directions"
        onPress={async () => {
          try {
            // get Directions
            const directions = await controller.current?.getDirections({
              from: nearestNode.current,
              to: selectedLocation,
            });
            // draw path and connections on map
            await controller.current?.drawJourney(directions);
            // focus on the path
            controller.current?.focusOn({
              nodes: directions.path,
            });
          } catch (e) {
            console.error(e);
          }
        }}
      ></Button>
    </>
  );
};

Use react-native-location to power BlueDot

import RNLocation from 'react-native-location';

const App = () => {
  ...

  RNLocation.requestPermission({
    ios: 'whenInUse',
    android: {
      detail: 'coarse',
    },
  }).then((granted) => {
    if (granted) {
      // Enable blue dot
      mapView.current.BlueDot.enable();
      RNLocation.subscribeToLocationUpdates((locations) => {
        const {
          accuracy,
          floor,
          latitude,
          longitude,
          timestamp,
        } = locations[0];

        const location = {
          timestamp,
          coords: {
            latitude,
            longitude,
            accuracy,
            floorLevel: floor,
          },
        };
        // pass locations in
        mapView.current.overrideLocation(location);
      });
    }
  });

  ...
};

MiniMap

Component Signature:

const MiMiniMap = (props: TMiniMapProps) => React.ReactElement;

Props:

Documented in Detail here

Prop Description Signature Required
options Options to initialize MapView with TMiMapViewOptions Yes
location Options to initialize MapView with IMappedinLocation | string Yes
onLoad Gets called when minimap is rendered () => void No
polygonHighlightColor Color to use when highlighting polygon string No
focusOptions Override focus Options when generating minimap TFocusOptions No

Example:

const App = () => {
  return (
    <MiMiniMap
      style={{ width: 500, height: 200 }}
      options={options: TGetVenueOptions}
      /** 
       * Called when miniMap is rendered 
       */
      onLoad={() => {}}
      /** 
       * What color to use when highlighting polygon
       */
      polygonHighlightColor={string}
      /** 
       * Finer control over focus
       */
      focusOptions={options: TFocusOptions}
      location={selectedLocation: IMappedinLocation | IMappedinLocation["id"]}
    />
  );
};