## version-5.0

### API Reference

# API Reference
## Latest Version


Mappedin SDK for React Native v5.41.10





## Previous Versions


v5.41.9v5.41.8v5.41.7v5.41.5v5.41.4v5.41.3v5.41.2v5.40.2v5.40.1v5.40.0v5.39.3v5.39.2v5.39.1v5.39.0v5.38.0v5.37.0v5.36.0v5.35.0v5.34.3v5.34.1v5.34.0v5.33.0v5.32.0v5.31.2v5.31.1v5.31.0v5.30.5v5.30.4v5.30.3v5.30.2v5.30.0v5.28.0v5.27.1v5.27.0v5.26.0v5.25.0v5.24.1v5.24.0v5.23.0v5.22.0v5.21.0v5.20.0v5.19.0v5.18.0v5.17.0v5.16.0v5.15.2v5.15.1v5.15.0v5.14.1v5.14.0v5.13.0v5.12.1v5.12.0v5.11.0v5.10.2v5.10.1v5.10.0v5.9.1v5.9.0v5.8.0v5.7.1v5.7.0v5.6.1v5.6.0v5.5.0v5.4.0v5.3.0v5.2.2v5.2.1v5.2.0v5.1.5v5.1.4v5.1.3v5.1.2v5.1.1v5.1.0v5.0.3v5.0.2v5.0.1v5.0.0v5.0.0-beta.11v5.0.0-beta.10v5.0.0-beta.9v5.0.0-beta.8v5.0.0-beta.7v5.0.0-beta.5v5.0.0-beta.4

### Blue Dot

# Blue Dot

> 

Displaying user position inside a building is not accurate with just GPS. However, there are a multitude of Indoor Positioning Systems (IPS) utilizing different technological approaches to providing an accurate and reliable positioning inside. Mappedin works with any IPS capable of providing the SDK with latitude, longitude and floor level information.

## Display the Blue Dot

To display a Blue Dot with the SDK, you'll need the position information. The following is a point in the fictional Mappedin Demo Mall. You can create positions and paths for your venue using the Blue Dot Data Faker tool. Below is an example of the geolocation object:


```ts
const location = {
	timestamp: 1583957906820,
	coords: {
		accuracy: 5,
		latitude: 43.52012478635707,
		longitude: -80.53951744629536,
		floorLevel: 0,
	},
	type: 0,
};
```


Inside the `onFirstMapLoaded` callback enable Blue Dot with default settings and then give it the position object to display it on the map.


```tsx
mapView.current?.BlueDot.enable();
mapView.current?.overrideLocation(location);
```


This is a full sample for overriding Blue Dot location with a given position and displaying it on the map:


```tsx
import React from 'react';

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

// See Trial API key Terms and Conditions
// https://developer.mappedin.com/docs/demo-keys-and-maps
const options = {
	clientId: '5eab30aa91b055001a68e996',
	clientSecret: 'RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1',
	venue: 'mappedin-demo-mall',
	labelAllLocationsOnInit: false,
};

const App = () => {
	const mapView = React.useRef<MapViewStore>(null);
	const location = {
		timestamp: 1583957906820,
		coords: {
			accuracy: 5,
			latitude: 43.52012478635707,
			longitude: -80.53951744629536,
			floorLevel: 0,
		},
		type: 0,
	};

	return (
		<MiMapView
			style={{ flex: 1 }}
			ref={mapView}
			options={options}
			onFirstMapLoaded={() => {
				mapView.current?.BlueDot.enable();
				mapView.current?.overrideLocation(location);
			}}
		/>
	);
};

export default App;
```


## Blue Dot Display States

-   When the Blue Dot position given to the Mappedin SDK has a high accuracy (within a few meters) and is on the floor currently displayed, it is displayed as bright blue.

!Blue Dot - Accurate

-   If the Mappedin Blue Dot is able to detect that a given position update is inaccurate, a semi-transparent blue shadow is displayed underneath the Blue Dot to indicate uncertainty range.

!Bluedot Inaccurate

-   When the BlueDot is on another floor it will look semi-transparent.

!Blue Dot - Accurate on another floor

-   The uncertainty range is shown also when displaying the Blue Dot on another floor than the currently viewed one.

!Blue Dot Inaccurate on another floor

-   30 seconds after the latest position update, the BlueDot is displayed as greyed out as it's possible that the user has moved but no updates have been received.

!Blue Dot - Outdated

## Follow mode

To keep the camera following the Blue Dot (unless user moves the view), you can set the SDK to `FOLLOW` mode.


```tsx
mapView.current?.setState(STATE.FOLLOW);
```


## Get live position with react-native-location

`react-native-location` is one of the many packages providing positioning service access. The sample code below shows the quickest way to integrate that with the Mappedin SDK for React Native. The code is edited for brevity to only display the relevant bits.


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


## Directions from Blue Dot to a location

The following is a full sample for displaying wayfinding directions from the user's current position to a selected location.


```tsx
import React from 'react';

import { MappedinLocation, MappedinNode, MapViewStore, MiMapView } from '@mappedin/react-native-sdk';
import { Button } from 'react-native';

// See Trial API key Terms and Conditions
// https://developer.mappedin.com/docs/demo-keys-and-maps
const options = {
	clientId: '5eab30aa91b055001a68e996',
	clientSecret: 'RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1',
	venue: 'mappedin-demo-mall',
	labelAllLocationsOnInit: false,
};

const App = () => {
	const mapView = React.useRef<MapViewStore>(null);
	const nearestNode = React.useRef<MappedinNode>();
	const [selectedLocation, setSelectedLocation] = React.useState<MappedinLocation>({});

	const location = {
		timestamp: 1583957906820,
		coords: {
			accuracy: 5,
			latitude: 43.52012478635707,
			longitude: -80.53951744629536,
			floorLevel: 0,
		},
		type: 0,
	};

	return (
		<>
			<MiMapView
				style={{ flex: 1 }}
				ref={mapView}
				options={options}
				onFirstMapLoaded={() => {
					mapView.current?.BlueDot.enable();
					mapView.current?.overrideLocation(location);
				}}
				onBlueDotPositionUpdated={({ update }) => {
					nearestNode.current = update.nearestNode;
				}}
				onPolygonClicked={({ polygon }) => {
					setSelectedLocation(polygon.locations[0]);
					mapView.current?.setPolygonColor(polygon, '#ff0000');
				}}
			/>
			<Button
				title="Get Directions"
				onPress={async () => {
					try {
						const directions = nearestNode.current.directionsTo(selectedLocation);
						// draw path and connections on map
						await mapView.current?.Journey.draw(directions);
						// focus on the path
						mapView.current?.Camera.focusOn({
							nodes: directions.path,
						});
					} catch (e) {
						console.error(e);
					}
				}}
			/>
		</>
	);
};

export default App;
```


## Additional Reading

-   Using Digital Maps to Improve Security Personnel Safety and Response Times
-   Integrating Indoor Positioning System with Mappedin SDKs
-   Generating Blue Dot Testing Data
-   Promoting Key Locations Along a Path

### Camera Controls

# Camera Controls

> 

To create rich experiences on top of the Mappedin SDK for React Native, it's useful to be able to control the map view programmatically. This guide shows how to focus the map view on targets, how to listen to camera events and how to control the camera.

## Focus the Camera on Targets

To focus on a polygon after it has been clicked, we add an `onClick` callback to the ``. Then, we call `Camera.focusOn()` using the `MapViewStore` ref and provide our targets. In this case, we are targeting only the clicked polygon. However, we can also give coordinates or nodes as TCameraTargets.


```tsx
const mapView = useRef<MapViewStore>(null);

return (
	<MiMapView
		ref={mapView}
		options={/* venue options */}
		onClick={({ polygons }) => {
			if (polygons?.length > 0) {
				mapView.current?.Camera.focusOn({
					polygons,
				});
			}
		}}
	/>
);
```


## Listening to Camera Events

The `onCameraChanged` callback is used to monitor changes to the camera position, rotation, tilt, and zoom.


```tsx
onCameraChanged={({ position, rotation, tilt, zoom }) => {
  console.log("Position", position);
  console.log("Rotation", rotation);
  console.log("Tilt", tilt);
  console.log("Zoom", zoom);
}}
```


## Controlling the Camera

Controlling the camera to set it to a specific tilt, rotation or zoom can be done with the `Camera.set()` method of the `MapViewStore`. Tilt and rotation are set as radians, where as zoom is in the camera distance in meters from the target.


```tsx
const mapView = useRef<MapViewStore>(null);

mapView.current?.Camera.set({
	rotation: 1.5,
	tilt: 0.3,
	zoom: 1234,
});
```


It is possible to limit the tilting of the camera by watching the tilt in the `onCameraChanged` callback and setting it to the desired value.


```tsx
const mapView = useRef<MapViewStore>(null);

return (
	<MiMapView
		ref={mapView}
		options={/* venue options */}
		onCameraChanged={({ position, rotation, tilt, zoom }) => {
			if (tilt) {
				mapView.current?.Camera.set({
					tilt: 0.0,
				});
			}
		}}
	/>
);
```


If you want to be able to zoom in closer than the default limit, use the setter `Camera.setMinZoom(200)`.

## Animation

The camera can also be animated to perform a combination of the transforms explained above. It takes TCameraTransform and TCameraAnimationOptions.


```tsx
const mapView = useRef<MapViewStore>(null);

mapView.current?.Camera.animate(
	{
		tilt: 0,
		rotation: 1,
		zoom: 2000,
	},
	{
		duration: 3000,
		easing: CAMERA_EASING_MODE.EASE_OUT,
	},
);
```


## Reset Camera

To reset the camera to its original position, save the camera's `position`, `rotation`, `tilt`, and `zoom` attributes during the `onFirstMapLoaded` callback.

In the following code snippet, we focus on a polygon on tap. After subsequently tapping the map, the camera will use the stored values to reset to its original state.


```tsx
const mapView = useRef<MapViewStore>(null);
const [isFocused, setIsFocused] = useState<boolean>(false);
const [defaultCameraPosition, setDefaultCameraPosition] = useState<TCameraTransform>();

return (
	<MiMapView
		ref={mapView}
		options={/* venue options */}
		onFirstMapLoaded={() => {
			setDefaultCameraPosition({
				tilt: mapView.current!.Camera.tilt,
				zoom: mapView.current!.Camera.zoom,
				rotation: mapView.current!.Camera.rotation,
				position: mapView.current!.Camera.position,
			});
		}}
		onClick={({ polygons }) => {
			if (isFocused) {
				mapView.current?.Camera.animate(defaultCameraPosition!, {
					duration: 1000,
					easing: CAMERA_EASING_MODE.EASE_IN_OUT,
				});
				mapView.current?.clearAllPolygonColors();
			} else {
				if (polygons.length === 0) return;
				mapView.current?.Camera.focusOn(
					{
						polygons,
					},
					{
						duration: 1000,
						easing: CAMERA_EASING_MODE.EASE_IN_OUT,
					},
				);
				mapView.current?.setPolygonColor(polygons[0], 'red');
			}
			setIsFocused(!isFocused);
		}}
	/>
);
```


## Additional Reading

-   Create a leasing map for a mall with Mappedin JS
-   Showcase Your Cruise Ship with Indoor Maps
-   Previewing Emergency Exit Paths with Camera Flyover

### Flat Labels

# Flat Labels

> 

> In the release of Mappedin SDK for React Native v5, Flat Labels and Floating Labels have been separated into their own objects under the `MapViewStore`. `labelAllLocations()` has been deprecated and `labelPolygon()` has been removed.

A secondary method to label locations is to use **Flat Labels**. These labels are painted on to the top layer of a polygon. To use Flat Labels, set `labelAllLocationsOnInit: false` in the `MiMapView` options and call the `FlatLabels.labelAllLocations` function in `onFirstMapLoaded`.


```tsx
<MiMapView
	options={{
		venue: '<VENUE_SLUG>',
		clientId: '<MAPPEDIN_CLIENT_ID>',
		clientSecret: '<MAPPEDIN_CLIENT_SECRET>',
		labelAllLocationsOnInit: false,
	}}
	onFirstMapLoaded={() => {
		mapView.current?.FlatLabels.labelAllLocations();
	}}
	// ...other props
/>
```


!Default Flat Labels

## Customizing Appearance

To adjust the look of all of our Flat Labels, we pass an appearance object in the `labelAllLocations` function call. We can easily change the font, text color and increase the size to fit our brand style better.


```ts
mapView.current?.FlatLabels.labelAllLocations({
	appearance: {
		font: 'Georgia',
		fontSize: 16,
		color: '#1c1c43',
	},
});
```


!Customized Flat Labels

The documentation for TFlatLabelAppearance explains all the customization options such as colors and sizes for the marker and the text.


```ts
type TFlatLabelAppearance = {
	/** Optional color in hexadecimal string e.g. #2e2e2e. */
	color?: string;
	/** A CSS style string font, e.g. "sans-serif". You can specify your own font via @font-face rule with a font family, and then include that here. */
	font?: string;
	/** Size of the font in pixels. @default 1.2 */
	fontSize?: number;
	/** By default this is the upper bounds of the Polygon. If you don't have a Polygon, or want a custom height for some reason, you can set this. */
	height?: number;
	/** The amount of space to leave before starting the text in pixels. @default 5 */
	margin?: number;
	/** The minimum percentage we can shrink the label to if it won't fit within the bounds at 100%. If it doesn't fit at that level, it won't be created. @default 0.25 */
	scaleMin?: number;
	/** How much to decrement the scale each time it doesn't fit, so we don't end up with too many different font sizes on screen at once. If you are only labeling a few MappedinPolygons rather than everything, you can set this and and scaleMin to 0.1 to fit everything except really long names perfectly.  @default 0.25 */
	scaleStep?: number;
};
```

### Floating Labels

# Floating Labels

> 

> In the release of Mappedin SDK for React Native v5, Flat Labels and Floating Labels have been separated into their own objects under the `MapViewStore`. `labelAllLocations()` has been deprecated and `labelPolygon()` has been removed.

The Mappedin SDK for React Native automatically labels all locations with **Floating Labels** by default. These labels hover above a node and handle repositioning and rotation to face the camera at all times.

!Default Floating Labels

## Customizing Appearance

Floating Labels can be customized if they are created after the MapView initialization. We can do this by first setting `labelAllLocationsOnInit: false` in the `MiMapView` options prop.


```tsx
options={{
  venue: "<VENUE_SLUG>",
  clientId: "<MAPPEDIN_CLIENT_ID>",
  clientSecret: "<MAPPEDIN_CLIENT_SECRET>",
  labelAllLocationsOnInit: false,
}}
```


Then, in the `onFirstMapLoaded` callback we create the labels and supply our appearance object with text size and background and foreground colors. This customization will apply to all labels.


```tsx
onFirstMapLoaded={() => {
  mapView.current?.FloatingLabels.labelAllLocations({
    appearance: {
      marker: {
        size: 16,
      },
      text: {
        size: 16,
        foregroundColor: '#ffb702',
        backgroundColor: '#0a0a0a',
      },
    },
  });
}}
```


!Customized All Labels

Taking this a step further, we could instead customize only the label of a touched polygon. To do this, use the `onClick` callback and `FloatingLabels.add` to pass the appearance object to a single label. When the user touches outside of the polygons, we remove and re-label all locations with default appearance.


```tsx
onClick={({polygons}) => {
  if (polygons.length > 0) {
    mapView.current?.FloatingLabels.removeAll();
    mapView.current?.FloatingLabels.add(
      polygons[0],
      polygons[0].locations[0].name,
      {
        appearance: {
          marker: {
            size: 16,
          },
          text: {
            size: 32,
            foregroundColor: '#ffb702',
            backgroundColor: '#0a0a0a',
          },
        },
      },
    );
  } else {
    mapView.current?.FloatingLabels.removeAll();
    mapView.current?.FloatingLabels.labelAllLocations();
  }
}}
```


!Customized Single Label on Click

The documentation for TFloatingLabelAppearance explains all the customization options such as colors and sizes for the marker and the text.


```tsx
export type TFloatingLabelAppearance = {
	/** Margin around the label and marker. This will affect label density */
	margin?: number;
	/** Text styling options */
	text?: {
		/** Number of lines to display when text spans multiple lines */
		numLines?: number;
		/** Text size in pixels */
		size?: number;
		/** Maxiumum width of text in pixels */
		maxWidth?: number;
		/** Line height sets the height of a line box. @default 1.2 */
		lineHeight?: number;
		foregroundColor?: string;
		backgroundColor?: string;
	};
	/** Floating Label marker styling options */
	marker?: {
		/** Size of the marker in pixels */
		size?: number;
		/** Foreground color settings when the markers is active and inactive (outranking markers are shown) */
		foregroundColor?: {
			active?: string;
			inactive?: string;
		};
		/** Background color settings when the markers is active and inactive (outranking markers are shown) */
		backgroundColor?: {
			active?: string;
			inactive?: string;
		};
	};
};
```


## Adding Icons

Icons can be added to Floating Labels to highlight certain categories or make a location more eye catching. These icons automatically adjust, becoming visible as the user zooms the map to view more detail. The supplied icon must be an SVG provided to the `TFloatingLabelAppearance` options in `FloatingLabels.add()`.

For this demonstration, we'll use only a single icon defined below. For best results, a **square** icon with low detail is preferable. We've also defined some colors which we'll use to differentiate between location categories.


```tsx
const icon = `<svg width="92" height="92" viewBox="-17 0 92 92" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0)">
            <path d="M53.99 28.0973H44.3274C41.8873 28.0973 40.7161 29.1789 40.7161 31.5387V61.1837L21.0491 30.7029C19.6827 28.5889 18.8042 28.1956 16.0714 28.0973H6.5551C4.01742 28.0973 2.84619 29.1789 2.84619 31.5387V87.8299C2.84619 90.1897 4.01742 91.2712 6.5551 91.2712H16.2178C18.7554 91.2712 19.9267 90.1897 19.9267 87.8299V58.3323L39.6912 88.6656C41.1553 90.878 41.9361 91.2712 44.669 91.2712H54.0388C56.5765 91.2712 57.7477 90.1897 57.7477 87.8299V31.5387C57.6501 29.1789 56.4789 28.0973 53.99 28.0973Z" fill="white"/>
            <path d="M11.3863 21.7061C17.2618 21.7061 22.025 16.9078 22.025 10.9887C22.025 5.06961 17.2618 0.27124 11.3863 0.27124C5.51067 0.27124 0.747559 5.06961 0.747559 10.9887C0.747559 16.9078 5.51067 21.7061 11.3863 21.7061Z" fill="white"/>
            </g>
            <defs>
            <clipPath id="clip0">
            <rect width="57" height="91" fill="white" transform="translate(0.747559 0.27124)"/>
            </clipPath>
            </defs>
            </svg>`;

const colors = ['dodgerblue', 'pink', 'green', 'orange', 'tomato', 'gray'];
```


We can use the list in the MapViewStore.VenueData class to iterate through locations and add their icons. At the same time, we'll apply color to the Floating Label's marker.


```tsx
onFirstMapLoaded={() => {
  mapView.current?.venueData.categories.forEach(
    (category: MappedinCategory, index: number) => {
      category.locations.forEach((location: MappedinLocation) => {
        if (location.polygons.length <= 0) {
          return;
        }
        const color = colors[index % colors.length];
        mapView.current?.FloatingLabels.add(
          location.polygons[0],
          location.name,
          {
            appearance: {
              marker: {
                icon: icon,
                foregroundColor: {
                  active: color,
                  inactive: color,
                },
              },
            },
          },
        );
      });
    },
  );
}}
```


The combination of color and icons creates a very attractive appearance for the labels which stands out on the map.

!Floating Label with Icons

If you only wish to highlight a few locations using icons and apply a default appearance to the rest, this can be done by applying `FloatingLabels.labelAllLocations()` before overriding with `FloatingLabels.add()` as above.

## Preset Themes

Mappedin SDK for React Native comes with two preset Floating Label themes:

-   `labelThemes.darkOnLight` (default)
-   `labelThemes.lightOnDark`

Use the light on dark labels labels by importing them and setting the appearance when labeling locations.


```tsx
import { labelThemes } from '@mappedin/react-native-sdk';

mapView.FloatingLabels.labelAllLocations({
	appearance: labelThemes.lightOnDark,
});
```


This theme provides a solid starting point for a darker visual style.

!Light On Dark

### Getting Started

# Getting Started

> 

The Mappedin SDK for React Native lets you render the maps of your venue, designed using Mappedin CMS, inside a React Native application. The SDK is a Typescript package and can be downloaded from NPM.

> You can find the Mappedin React Native demo application on Github at https://github.com/mappedin/react-native

In this section, we'll help you set up a React Native development environment. For more information about the basic concepts of the SDK, you can review the Mappedin JS Overview. Further pieces of this guide give you more details about how to set up the SDK and customize it as per your liking.

Mappedin SDK for React Native uses `react-native-webview` package to display the map.

> The examples are written in Typescript, which is a superset of Javascript that adds type annotations to variables and functions. This helps developers in writing safer code especially when interacting with libraries and SDKs. Typescript code is transpiled to Javascript in the build phase of an application. Developers can use Typescript sample code by removing the variable type annotations from the examples. Code editors such as Visual Studio Code often highlight those as syntax errors if editing a Javascript file. Mappedin uses Typescript to build our Web and React Native SDKs and recommend using Typescript in application code as well. Read more about Typescript on their website.

## Coding with AI

Mappedin SDK for React Native provides an llms-mappedin-react-native.txt file that can be used to help with coding when using Large Language Models (LLMs).



## React Native project setup

If you are starting a new project or want to follow along with the guides in an empty project, follow these steps.

-   Set up your environment and start a new React Native -project following the official instructions. `npx react-native init GettingStarted --template react-native-template-typescript`
-   Run `yarn start` to start the Metro bundler
-   The run (in a separate terminal) `yarn run ios` to make sure everything works at this point. This will run the React Native starter -project in an iOS simulator.
-   To install Mappedin SDK for React Native, run `yarn add @mappedin/react-native-sdk react-native-webview@11`
    Make sure you build the project after installing dependencies with `cd ios && pod install` or `npx pod-install` and followed by launching the app on iPhone emulator `yarn run ios`.

## Rendering the map

With just a few lines of code we can display the demo venue. In this case it is wrapped and centered inside a React Native component `SafeAreaView`. Replace the content of `App.tsx` in a fresh React Native project with the following or create a similar component in your own project.

> These guides use TypeScript, however most of the code works as is or with small modifications (removal of types) in a JavaScript project as well.


```tsx
import React from 'react';
import { SafeAreaView } from 'react-native';
import { MiMapView } from '@mappedin/react-native-sdk';

// See Trial API key Terms and Conditions
// https://developer.mappedin.com/docs/demo-keys-and-maps
const options = {
    clientId: '5eab30aa91b055001a68e996',
    clientSecret: 'RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1',
    venue: 'mappedin-demo-mall',
    perspective: 'Website',
};

const App = () => {
    return (
        <SafeAreaView style={{ flex: 1 }}>
            <MiMapView style={{ flex: 1 }} key="mappedin" options={options} />
        </SafeAreaView>
    );
};

export default App;
```


!React Native iOS - Display map

### Interactivity

# Interactivity

> 

The MiMapView component takes several callbacks as props, which can be used to add interactivity between the map component and the rest of the application.

## Callback Functions

-   `onBlueDotStateChanged` is called when Blue Dot State has changed. It returns TBlueDotStateChange describing the Blue Dot state including possible errors and display state explanation.
-   `onBlueDotPositionUpdated` is called when Blue Dot receives a new position update. It returns TBlueDotPositionUpdate containing the new latitude and longitude position given to the SDK.
-   `onCameraChanged` is called when a camera property has changed. It returns the current camera `position`, `rotation`, `tilt` and `zoom`.
-   `onClick` returns a TMapClickEvent containing the items interacted with and additional properties.
-   `onDataLoaded` is called when the venue data has been loaded.
-   `onFirstMapLoaded` is called when the MapView is ready to be interacted with.
-   `onMapChanged` is called when the MapView changes to a new map, for example when the user changes floors levels.
-   `onStateChanged` is called when the MapView changes between following the Blue Dot and free camera exploration modes.
-   `onVenueLoadError` is called when there is an error loading the venue data.

The following callbacks are **deprecated**. Going forward, use the more general `onClick`.

-   [**Deprecated**] `onNothingClicked` is called when clicking outside of any interactive polygons.
-   [**Deprecated**] `onPolygonClicked` is called when an interactive polygon is clicked.

## Using the MapViewStore

Add a `ref` attribute to `` to save a reference of the MapViewStore. This reference is used to interact with the MapView inside a callback.


```tsx
const App = () => {
	const mapView = React.useRef<MapViewStore>(null);

	return <MiMapView ref={mapView} />;
};
```


> Read more about the `useRef` hook in the React documentation.

## Interactive Polygons

By default, all polygons have interactivity enabled. The TMapClickEvent which have been interacted with.

The selected polygons are passed as a property through the `onClick` function. To change the color of an interacted polygon, use the MapViewStore reference's `setPolygonColor` function.


```tsx
onClick={({ polygons }) => {
  if (polygons.length > 0) {
    mapView.current?.setPolygonColor(polygons[0], "#BF4320");
  }
}}
```


## Interactive Floating Labels

FloatingLabels are enabled by default for all locations, but they lack interactivity. To add interactive FloatingLabels they must be created manually after map initialization.

> For more information on directions and wayfinding, read the Floating Labels guide.

Begin by setting `labelAllLocationsOnInit: false` in the `MiMapView` options property.


```tsx
options={{
  venue: "<VENUE_SLUG>",
  clientId: "<MAPPEDIN_CLIENT_ID>",
  clientSecret: "<MAPPEDIN_CLIENT_SECRET>",
  labelAllLocationsOnInit: false,
}}
```


Then, in the `onFirstMapLoaded` callback create the labels and pass the option `interactive: true`.


```tsx
onFirstMapLoaded={() => {
  mapView.current?.FloatingLabels.labelAllLocations({
    interactive: true,
  });
}}
```


With interactive FloatingLabels enabled, the `onClick` callback will now pass the array of selected labels via the TMapClickEvent. The following snippet will set the polygon to red when the label is tapped. Tapping outside of the labels will reset all colors.


```tsx
onClick={({floatingLabels}) => {
  if (floatingLabels && floatingLabels.length > 0) {
    mapView.current?.setPolygonColor(
      floatingLabels[0].node.polygon,
      'red',
    );
  } else {
    mapView.current?.clearAllPolygonColors();
  }
}}
```


## Interactive Paths

Interactivity can be enabled for Journey and Paths by setting `interactive: true` in the TPathOptions. The TMapClickEvent contains the array of Paths which have been interacted with.

This could be used to enable tapping on inactive paths to set the Journey step. To do this, start by creating multi-destination directions when the map finishes loading.


```tsx
onFirstMapLoaded={() => {
  const departure = mapView.current?.venueData?.locations.find(
    (location) => location.name === "ThinkKitchen"
  )!;
  const directions = departure.directionsTo(
    new MappedinDestinationSet([
      mapView.current?.venueData?.locations.find(
        (location) => location.name === "American Eagle"
      )!,
      mapView.current?.venueData?.locations.find(
        (location) => location.name === "Target"
      )!,
    ])
  );
  mapView.current?.Journey.draw(directions, {
    inactivePathOptions: {
      interactive: true,
    },
  });
}}
```


> For more information on directions and wayfinding, read the A-B Wayfinding guide.

When the map is touched, the `onClick` callback will trigger with the array of tapped Paths passed through. Activity the selected Path by providing the array item to the `Journey.setStepByPath` function.


```tsx
onClick={({ paths }) => {
  paths?.forEach((path) => {
    mapView.current?.Journey.setStepByPath(path);
  });
}}
```


## Interactive Markers

Markers can be set to interactive to allow an app to detect when the user clicks on them. This is done by setting `interactive` to `true` in the TCreateMarkerOptions object when adding the marker. Refer to the Marker Guide for more information on using Markers.

Adding an interactive marker:

```ts highlight={7}
const markerTemplate = `
  
    It's a Marker!
  `;

mapView.Markers.add(nodeOrCoordinate, markerTemplate
    { interactive: true });

```

## Interactive Tooltips

Enabling interactivity for a tooltip allows an app to perform an action when the user clicks on it. This is accomplished by setting `interactive` to `true` in the TCreateTooltipOptions object when adding the marker. Refer to the [Tooltips Guide](/react-native-sdk/tooltips) for more information on using tooltips.

Creating an interactive tooltip:

```
ts highlight={3}
mapView.createTooltip(nodeOrCoordinate, `A Tooltip!`, {
	interactive: true,
});
```

## Additional Reading

-   Using Digital Maps to Improve Security Personnel Safety and Response Times
-   Create a leasing map for a mall with Mappedin JS
-   Integrate Office Maps with Workspace Reservations
-   Build Your Own Directory: Displaying the Map and Mobile Pass

### Level Selector

# Level Selector

> 

## Prerequisites

This guide goes a step deeper from the React Native Getting Started guide, which helps you set up a new React Native project from scratch and install Mappedin SDK for React Native as a dependency.

## Setup

This example requires an additional library `@react-native-picker/picker` that will work as our map selector. Install the library with `yarn add @react-native-picker/picker`.

Remember to run `cd ios && pod install` in your project folder to install dependencies required for iOS simulator. For Android Emulator, just rebuild the application with `yarn run android`.

## Selecting the level

If you're working with a venue that has multiple maps, such as a venue with multiple floors, you may want to create a level selector to allow the user to select a level. This guide uses a popular React Native community library to demonstrate the concept.

The `` component below will render a dropdown-like selector using the map names of MappedinMap objects. Inside our main `` component, we will declare two state variables, which the `MapPicker` uses to render the level options and display the currently selected one.


```tsx
const [levels, setLevels] = React.useState<MappedinMap[]>();
const [selectedMapId, setSelectedMapId] = React.useState<MappedinMap['id']>();

const MapPicker = () => {
	if (!levels) return null;

	return (
		<Picker
			mode="dialog"
			selectedValue={selectedMapId}
			onValueChange={(mapId) => {
				setSelectedMapId(mapId);
			}}
		>
			{levels.map((m) => (
				<Picker.Item key={m.id} label={m.name} value={m.id} />
			))}
		</Picker>
	);
};
```


Next, we need to listen to changes to `selectedMapId` and run the asynchronous mapview.current?.setMap function to change the displayed map. We make sure the `selectedMapId` is different from the current map for cases when the map is changed outside of the selector.


```tsx
React.useEffect(() => {
	async function setMap() {
		// Making sure the new map is different from the currentMap
		if (selectedMapId && selectedMapId !== mapView.current?.currentMap?.id) {
			await mapView.current?.setMap(selectedMapId);
		}
	}
	setMap();
}, [selectedMapId]);
```


We also should set up the map selector and the state as soon as the map is loaded. We can use the `onFirstMapLoaded` callback of TMiMapViewProps for that.


```tsx
onFirstMapLoaded={() => {
  setSelectedMapId(mapView.current?.currentMap?.id);
  setLevels(mapView.current?.venueData?.maps);
}}
```


`onMapChanged`-callback is executed when the map is changed. This happens for example during multi-floor navigation when the user taps the tooltip to move to the next floor. This makes sure that the selector stays in sync with those changes.


```tsx
onMapChanged={({map}) => {
  setSelectedMapId(map.id);
}}
```


## The result

!React Native - Level Selector

## Complete code example


```tsx
import React from 'react';
import { SafeAreaView } from 'react-native';
import { Picker } from '@react-native-picker/picker';

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

// See Trial API key Terms and Conditions
// https://developer.mappedin.com/docs/demo-keys-and-maps
const options: TGetVenueOptions = {
	clientId: '5eab30aa91b055001a68e996',
	clientSecret: 'RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1',
	venue: 'mappedin-demo-mall',
	perspective: 'Website',
};

const App = () => {
	const mapView = React.useRef<MapViewStore>(null);
	const [levels, setLevels] = React.useState<MappedinMap[]>();
	const [selectedMapId, setSelectedMapId] = React.useState<MappedinMap['id']>();

	const MapPicker = () => {
		if (!levels) return null;

		return (
			<Picker
				mode="dialog"
				selectedValue={selectedMapId}
				onValueChange={(mapId) => {
					setSelectedMapId(mapId);
				}}
			>
				{levels.map((m) => (
					<Picker.Item key={m.id} label={m.name} value={m.id} />
				))}
			</Picker>
		);
	};

	React.useEffect(() => {
		async function setMap() {
			if (selectedMapId && selectedMapId !== mapView.current?.currentMap?.id) {
				await mapView.current?.setMap(selectedMapId);
			}
		}
		setMap();
	}, [selectedMapId]);

	return (
		<SafeAreaView style={{ flex: 1 }}>
			<MapPicker />
			<MiMapView
				style={{ flex: 1 }}
				key="mappedin"
				ref={mapView}
				options={options}
				onFirstMapLoaded={() => {
					setSelectedMapId(mapView.current?.currentMap?.id);
					setLevels(mapView.current?.venueData?.maps);
				}}
				onMapChanged={({ map }) => {
					setSelectedMapId(map.id);
				}}
			/>
		</SafeAreaView>
	);
};

export default App;
```


> For more examples in topics such as directions and BlueDot positioning in React Native, have a look at our example repository.

### Listing Locations

# Listing Locations

> 

!Listing Locations

## Prerequisites

This guide goes a step deeper from the React Native Getting Started guide, which helps you set up a new React Native project from scratch and install Mappedin SDK for React Native as a dependency.

## Setup

Let's start by setting up our imports, the `` component and an empty React Native stylesheet. We will render a list of locations and their descriptions so to keep everything readable, we need to apply some basic styling at the end.


```tsx
import React from 'react';
import { FlatList, ListRenderItem, Text, StyleSheet, View, SafeAreaView } from 'react-native';

import { Mappedin, getVenue, MappedinLocation } from '@mappedin/react-native-sdk';

const App = () => {};

const styles = StyleSheet.create({
	loading: {},
	container: {},
	venueName: {},
	item: {},
	title: {},
	image: {},
	description: {},
});

export default App;
```


## Loading Venue data without displaying a map

It is possible to fetch venue data (locations, maps, etc), outside of the `` component. This can be helpful for cases where a map isn't always needed or there is a need to fetch the data first, and render the map later.

To do that, we need to set up a hook to asynchronously download the data when our `` component is rendered. A loading screen is displayed while `venueData` is not defined. Once the data is received, the component is re-rendered and should display `Mappedin Demo - Mall`, the name of our demo venue in the top left corner of the screen.


```tsx
// See Trial API key Terms and Conditions
// https://developer.mappedin.com/docs/demo-keys-and-maps
const options = {
	clientId: '5eab30aa91b055001a68e996',
	clientSecret: 'RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1',
	venue: 'mappedin-demo-mall',
};

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

	React.useEffect(() => {
		async function init() {
			const venueData = await getVenue(options);
			setVenueData(venueData);
		}
		init();
	}, []);

	if (!venueData) {
		return (
			<View style={styles.loading}>
				<Text>Loading</Text>
			</View>
		);
	}

	return (
		<SafeAreaView style={styles.container}>
			<Text style={styles.venueName}>{venueData.venue.name}</Text>
		</SafeAreaView>
	);
};
```


## Adding a list view

To display a list of locations, we use `FlatList` from React Native. `` takes the location data. Because React requires a key for each element, we define a `keyExtractor`. `renderItem` function defines how each item is displayed. We are rendering the location name and the description if it has any.


```tsx
const LocationList = ({locations}: {locations: MappedinLocation[]}) => {
  const renderItem: ListRenderItem<MappedinLocation> = ({item}) => (
    <View style={styles.item}>
      <Image source={{uri: item?.logo?.small}} style={styles.image} />
      <View style={styles.info}>
        <Text style={styles.title}>{item.name}</Text>
        {item.description && <Text style={styles.description}>{item.description}</Text>}
      </View>
    </View>
  );

  return (
    <FlatList
      data={locations}
      renderItem={renderItem}
      keyExtractor={(item: any) => item.id}
    />
  );
```


For the location data, we will roughly sort it based on the `tenant` type and in alphabetical order based on the location name. To render the list in our application under the venue name, we can now add `` to our `` component's return.


```tsx
const tenants = venueData.locations.filter((loc) => loc.type === 'tenant').sort((a, b) => (a.name > b.name ? 1 : -1));

return (
	<SafeAreaView style={styles.container}>
		<Text style={styles.venueName}>{venueData.venue.name}</Text>
		<LocationList locations={tenants} />
	</SafeAreaView>
);
```


## Styling

To add some basic styles, we can now fill our stylesheet with the following:


```tsx
const styles = StyleSheet.create({
	item: {
		color: '#2E2E2E',
		backgroundColor: '#FAFAFA',
		padding: 8,
		marginVertical: 8,
		marginHorizontal: 16,
		alignItems: 'center',
		flexDirection: 'row',
	},
	info: {
		padding: 15,
		width: 250,
	},
	image: {
		flex: 1,
		width: 100,
		height: 100,
		resizeMode: 'contain',
	},
	title: {
		fontSize: 18,
	},
	description: {
		fontSize: 12,
		color: '#777',
	},
	container: {
		backgroundColor: '#2E2E2E',
	},
	loading: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
	},
	venueName: {
		margin: 16,
		fontSize: 24,
		fontWeight: 'bold',
		color: 'white',
		textAlign: 'center',
	},
});
```


## Complete code example


```tsx
import React from 'react';
import { FlatList, ListRenderItem, Text, StyleSheet, View, SafeAreaView, Image } from 'react-native';

import { Mappedin, getVenue, MappedinLocation } from '@mappedin/react-native-sdk';

// See Trial API key Terms and Conditions
// https://developer.mappedin.com/docs/demo-keys-and-maps
const options = {
	clientId: '5eab30aa91b055001a68e996',
	clientSecret: 'RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1',
	venue: 'mappedin-demo-mall',
};

const LocationList = ({ locations }: { locations: MappedinLocation[] }) => {
	const renderItem: ListRenderItem<MappedinLocation> = ({ item }) => (
		<View style={styles.item}>
			<Image source={{ uri: item?.logo?.small }} style={styles.image} />
			<View style={styles.info}>
				<Text style={styles.title}>{item.name}</Text>
				{item.description && <Text style={styles.description}>{item.description}</Text>}
			</View>
		</View>
	);

	return <FlatList data={locations} renderItem={renderItem} keyExtractor={(item: any) => item.id} />;
};

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

	React.useEffect(() => {
		async function init() {
			const venueData = await getVenue(options);
			setVenueData(venueData);
		}
		init();
	}, []);

	if (!venueData) {
		return (
			<View style={styles.loading}>
				<Text>Loading</Text>
			</View>
		);
	}

	const tenants = venueData.locations
		.filter((loc) => loc.type === 'tenant')
		.sort((a, b) => (a.name > b.name ? 1 : -1));

	return (
		<SafeAreaView style={styles.container}>
			<Text style={styles.venueName}>{venueData.venue.name}</Text>
			<LocationList locations={tenants} />
		</SafeAreaView>
	);
};

const styles = StyleSheet.create({
	item: {
		color: '#2E2E2E',
		backgroundColor: '#FAFAFA',
		padding: 8,
		marginVertical: 8,
		marginHorizontal: 16,
		alignItems: 'center',
		flexDirection: 'row',
	},
	info: {
		padding: 15,
		width: 250,
	},
	image: {
		flex: 1,
		width: 100,
		height: 100,
		resizeMode: 'contain',
	},
	title: {
		fontSize: 18,
	},
	description: {
		fontSize: 12,
		color: '#777',
	},
	container: {
		backgroundColor: '#2E2E2E',
	},
	loading: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
	},
	venueName: {
		margin: 16,
		fontSize: 24,
		fontWeight: 'bold',
		color: 'white',
		textAlign: 'center',
	},
});

export default App;
```


!React Native - Listing Locations v5

> For more examples in topics such as directions and BlueDot positioning in React Native, have a look at our example repository.

## Additional Reading

-   Build Your Own Directories: Intro to Custom Directories
-   Build Your Own Directory: Listing Locations and Search
-   Build Your Own Directory: Displaying the Map and Mobile Pass

### Markers

# Markers

> 

The Mappedin SDK for React Native allows you to add markers to the map. These are elements containing arbitrary HTML that the SDK will anchor to a `MappedinNode` or a `MappedinCoordinate` on the map, and automatically handle rotation and repositioning to face the camera.

## Drawing Markers

Use the `createMarker` method to draw a marker on the map.

```tsx highlight={8-15}
onClick={({polygons}) => {
  if (polygons.length > 0) {
    const location = polygons[0].locations[0];
    const entrance = polygons[0].entrances[0];

    if (!location || !entrance) return;

    mapView.current?.createMarker(
      entrance,
      `${location.name}`,
      {
        anchor: MARKER_ANCHOR.CENTER,
        rank: COLLISION_RANKING_TIERS.ALWAYS_VISIBLE,
      },
    );
  }
}}

```

This snippet reacts to a user's tap on a polygon to draw a marker with location name at the entrance node. If multiple markers are too close to one another, only one will be displayed.

![markers](/img/react-native-sdk/v5/markers.png)

> The complete code sample demonstrating creating markers on polygon touch is available in [Mappedin's React Native samples repo on GitHub](https://github.com/MappedIn/react-native/blob/master/SDKv5_Examples/PlaygroundSamples/src/examples/Markers.tsx).

Alternatively, pass a `MappedinCoordinate` to draw a marker at a specified latitude/longitude.

```
tsx
const coordinate = mapView.current?.currentMap.createCoordinate(
	43.51905183293411, // latitude
	-80.53701846381122, // longitude
);
mapView.current?.createMarker(coordinate, `Marker`, {});

```

Using a coordinate you don't require a preconfigured node and can place the marker at any arbitrary location on the map.

## Removing Markers

Markers can be removed from the map by passing the marker id returned from [`createMarker`](https://docs.mappedin.com/react-native-sdk-api/v5/latest/classes/MapViewStore.html#createMarker) to the [`removeMarker`](https://docs.mappedin.com/react-native-sdk-api/v5/latest/classes/MapViewStore.html#removeMarker) method.

The following code snippet demonstrates creating a marker on polygon touch and storing the id in state. If a marker exists when the map is touched subsequently then the existing marker is removed.

```
tsx highlight={16}
const mapView = useRef(null);
const [marker, setMarker] = useState();

return (
	
		 {
				if (marker) {
					mapView.current?.removeMarker(marker);
				}
				if (polygons.length > 0) {
					const newMarker = mapView.current?.createMarker(polygons[0].entrances[0], `Marker`, {
						anchor: MARKER_ANCHOR.CENTER,
					});
					setMarker(newMarker);
				}
			}}
		/>
	
);

```

## Marker Options

Individual marker anchoring and rank can be tweaked via the options argument of [`createMarker`](https://docs.mappedin.com/react-native-sdk-api/v5/latest/classes/MapViewStore.html#createMarker).

```
tsx
mapView.current?.createMarker(node, `Marker`, {
	anchor: MARKER_ANCHOR.CENTER,
	rank: COLLISION_RANKING_TIERS.ALWAYS_VISIBLE,
});

```

The `anchor` option sets the default position of the marker. The positions are defined in the `MARKER_ANCHOR` enum which contains 5 values. The default position is CENTER.

```
tsx
enum MARKER_ANCHOR {
	CENTER = 0,
	TOP = 1,
	LEFT = 2,
	BOTTOM = 3,
	RIGHT = 4,
}
```

The `rank` option enables you to set the priority or rank of the markers. The ranks are defined in the enum COLLISION_RANKING_TIERS. The default rank is HIGH.

## Additional Reading

-   Using Digital Maps to Improve Security Personnel Safety and Response Times
-   Implementing Wait Time Tracking for Restrooms
-   Augmenting Directions with Wait Time Information
-   Create a leasing map for a mall with Mappedin JS

### Migration Guide

# Migration Guide

On December 5th, 2022 we released v5 of Mappedin SDK for React Native. This migration guide explains what changes between v4 and v5.

-   The SDK is available at NPM - @mappedin/react-native-sdk
-   API Documentation on our Dev Portal

Please refer to Mappedin JS v5 Migration Guide for all changes between Mappedin SDK for React Native v4 to v5.

### Minimap

# Minimap

This guide teaches you how to display a Minimap within React Native. This static version of the map is perfect for displaying on individual store pages.

We first set up downloading the venue data with `getVenue` and React's `useEffect` hook populates the state from the server.


```tsx
// See Trial API key Terms and Conditions
// https://developer.mappedin.com/docs/demo-keys-and-maps
const options: TGetVenueOptions = {
	clientId: '5eab30aa91b055001a68e996',
	clientSecret: 'RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1',
	venue: 'mappedin-demo-mall',
};

const [venueData, setVenueData] = React.useState<Mappedin>(null);

useEffect(() => {
	async function init() {
		const venueData = await getVenue(options);
		setVenueData(venueData);
	}
	init();
}, []);
```


Before we are ready to render the ``, we select our display location by finding the venue with the name "Apple" and set up a simple loading screen.


```tsx
const appleStore = venueData?.locations.find((l) => l.name === 'Apple');

if (venueData === undefined || appleStore === undefined) {
	return <Text>Loading...</Text>;
}
```


## Setting up the Minimap

We will input the store we chose earlier as the location property. The Minimap is styled to take the whole width but only part of the vertical space on the screen. That way we can render other important information about the location such as the description and phone number below.

`onLoad` callback is called once the Minimap is rendered and we can leave it empty for now. Some stores might prefer their brand color for highlighting them on the Minimap. Below we use a bright red hex color code for the Minimap target. We could also set the zoom level using `focusOptions` property but in this case the defaults are fine.


```tsx
<MiMiniMap
	style={{ width: '100%', height: 300 }}
	options={options}
	location={appleStore}
	onLoad={() => {}}
	polygonHighlightColor={'#ff0000'}
	// focusOptions={focusOptions}
/>
```


We can then add some more information about the venue below the Minimap:


```tsx
<Text style={{fontSize: 20, marginVertical: 8}}>{appleStore.name}</Text>
<Text style={{fontSize: 14, lineHeight: 20, marginVertical: 8}}>
  {appleStore.description}
</Text>
<Text>Phone number: {appleStore.phone?.number}</Text>
```


## Full code sample


```tsx
import React, { useEffect } from 'react';
import { SafeAreaView, Text } from 'react-native';
import { Mappedin, MiMiniMap, getVenue, TGetVenueOptions } from '@mappedin/react-native-sdk';

// See Trial API key Terms and Conditions
// https://developer.mappedin.com/docs/demo-keys-and-maps
const options: TGetVenueOptions = {
	clientId: '5eab30aa91b055001a68e996',
	clientSecret: 'RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1',
	venue: 'mappedin-demo-mall',
};

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

	useEffect(() => {
		async function init() {
			const venueData = await getVenue(options);
			setVenueData(venueData);
		}
		init();
	}, []);

	const appleStore = venueData?.locations.find((l) => l.name === 'Apple');

	if (venueData === undefined || appleStore === undefined) {
		return <Text>Loading...</Text>;
	}

	return (
		<SafeAreaView style={{ flex: 1, padding: 10 }}>
			<MiMiniMap
				style={{ width: '100%', height: 300 }}
				options={options}
				onLoad={() => {}}
				polygonHighlightColor={'#ffcc00'}
				location={appleStore}
			/>
			<Text style={{ fontSize: 20, marginVertical: 8 }}>{appleStore.name}</Text>
			<Text style={{ fontSize: 14, lineHeight: 20, marginVertical: 8 }}>{appleStore.description}</Text>
			<Text>Phone number: {appleStore.phone?.number}</Text>
		</SafeAreaView>
	);
};

export default App;
```

### Release Notes

# Release Notes

Mappedin SDK for React Native v5 release notes are posted here and this page will be kept up-to-date as updates are released. The SDK is available from @mappedin/react-native-sdk on NPM.

{

// Release notes template:

// https://keepachangelog.com/en/1.0.0/#how

// ## vXX.XX.XX - Month Day, Year
// _ Added
// _ Changed
// _ Deprecated
// _ Removed
// _ Fixed
// _ Security

}

## v5.41.9- April 9, 2025

- Added `useLivePolygons` to `TShowVenueOptions.loadOptions`.
- Fixed BlueDot follow mode not respecting safe area insets.

## v5.41.8 - March 3, 2025
- Version bump only.

## v5.41.7 - February 27, 2025
- Version bump only.

## v5.41.6 - February 26, 2025
- Version bump only.

## v5.41.5 - February 19, 2025
- Version bump only.

## v5.41.4 - January 31, 2025
- Version bump only.

## v5.41.3 - December 11, 2024
- Version bump only.

## v5.41.2 - November 26, 2024
- Version bump only.

## v5.41.1 - November 15, 2024
- Improved memory performance of OfflineSearch.

## v5.41.0 - November 8, 2024
- Improved memory performance of `getVenue()`.

## v5.40.4 - October 24, 2024

-   Added icons for connections including Door Up, Door Down, and Escalator without verticality.

## v5.40.3 - October 15, 2024

-   Version bump only.

## v5.40.2 - October 7, 2024

-   Guard against potential error during touch input.
-   Fixed crash when a node is orphaned from any map.
-   Fixed an issue when multiple `Camera.focusOn()` calls do not resolve.
-   Fixed BlueDot follow mode.
-   Fixed path zoom based sizing.

## v5.40.1 - August 14, 2024

-   Fixed an issue with `shadingAndOutlines` and `xRayPath` options not being applied.

## v5.40.0 - August 13, 2024

-   Fixed a crash which could occur when the outdoor map rendered too many road labels.
-   Fixed an issue which could cause `Mappedin.toJSON()` to error.
-   Fixed an issue which could cause search indexing to error.

## v5.39.3 - July 29, 2024

-   Fixed an issue where BlueDot could crash if a browser position didn't include accuracy.
-   Fixed an issue causing `MappedinMap.center` to error.

## v5.39.2 - July 24, 2024

-   Fixed the lat/lon conversion in `MappedinCoordinate` when the X coordinate matched the first georeferenced X coordinate.
-   Fixed an issue causing double-tap to zoom in to be inaccurate when the map is not full screen.

## v5.39.1 - July 19, 2024

-   Version bump only.

## v5.39.0 - July 17, 2024

-   Fixed an issue where orphaned polygons could crash map load.

## v5.38.1 - June 27, 2024

-   Removed pinned React Native version as a dependency.

## v5.38.0 - June 13, 2024

-   Fixed multi-finger touch triggering click events.

## v5.37.0 - May 15, 2024

-   Version bump only.

## v5.36.0 - May 13, 2024

-   Version bump only.

## v5.35.0 - May 2, 2024

-   Added support for JPEG and PNG images as Floating Label icons.
-   Fixed an issue where unattached nodes could cause a map crash.
-   Fixed an issue causing some analytics events to not fire.

## v5.34.3 - April 30, 2024

-   Fixed an issue where hydrating the map could crash without rendered perspectives.

## v5.34.2 - April 25, 2024

-   Fixed an issue where directions may be missing distances between instructions.

## v5.34.1 - April 22, 2024

-   Fixed an issue in some venues where Blue Dot state would be `OUTSIDE_MAP` while within the map's bounds.
-   Fixed a potential Blue Dot failure when a floor has no nodes.

## v5.34.0 - April 12, 2024

-   Added option to exclude node IDs from a route when getting directions.

## v5.33.0 - April 10, 2024

-   Added OutdoorView for maps rendered using an access token.
-   Fixed `changeLanguage` and `getVenue` functions to accept language codes case-insensitive.

## v5.32.0 - April 2, 2024

-   Added venue render options for the data to use live polygons and simplified directions automatically.
-   Fixed `TMiMapViewVenueOptions` type missing "things" property.
-   Fixed watermark failing to render.
-   Fixed cases where the simplified path would traverse through walls.
-   Fixed cases where exterior walls would not render.

## v5.31.2 - March 25, 2024

-   Fixed a crash when using live polygons with no rendered perspectives.
-   Fixed an issue where `removeTooltip` did not trigger a collision update.

## v5.31.1 - March 19, 2024

-   Fixed images not appearing on invisible polygons.

## v5.31.0 - March 18, 2024

-   Added property `filterFlags` to `MappedinLocation` and `MappedinVortex`.
-   Improved memory usage during venue initial load.
-   Fixed the `things` option in `getVenue` so that it merges the new values with the default ones.
-   Fixed Floating Label appearance on Intel integrated GPUs.

## v5.30.5 - March 7, 2024

-   Fixed a crash when width or height was 0.
-   Fixed the polygon outline style being too dark on initial load.

## v5.30.4 - February 27, 2024

-   Version bump only.

## v5.30.3 - February 27, 2024

-   Version bump only.

## v5.30.2 - February 27, 2024

-   Fixed default ambient occlusion performance.
-   Fixed `clearAllPolygonColors` not working.

## v5.30.0 - February 21, 2024

-   Fixed polygon hover color for polygons that have set color.
-   Fixed image flipping when maps changed.
-   Fixed floating label rendering height.
-   Improved types for event callback.

## v5.27.1 - February 6, 2024

-   Fixed an issue where the camera could zoom far outside the bounds.
-   Fixed polygons returned from click events missing metadata.

## v5.27.0 - Jan 31, 2024

-   Added dynamic performance adjustment.
    -   Dynamic performance will attempt to maintain above 25 FPS performance on user devices.
-   Fixed FloatingLabels not positioning at their correct height.

## v5.26.0 - Jan 18, 2024

-   Added OutdoorView for React Native.
-   Added option for static path arrows.
-   Fixed the MappedinPolygon locations getter returning duplicate results.
-   Fixed special characters not yielding search results with OfflineSearch.

## v5.25.0 - Jan 10, 2024

-   Added a new FloatingLabel class returned from `FloatingLabels.add`.
-   Added the option to provide bearing when updating BlueDot position.
-   Added the option to hydrate map data from Maker.

## v5.24.1 - Jan 4, 2024

-   Fixed `FloatingLabels.labelAllLocations()` not respecting polygon logo images.
-   Fixed map failing to load when image textures cannot be downloaded.

## v5.24.0 - Dec 14, 2023

-   Journey and Paths now accept MappedinCoordinates.
-   Improved collider performance.
-   Improved analytics events.
-   Fixed cases where textures would fail to load.
-   Fixed Journey pulse animation when arrows were turned off.
-   Fixed BlueDot showing on incorrect floor.
-   Fixed invalid error message when adding a FloatingLabel to a polygon with an entrance.
-   Fixed Tooltips not appearing within their colliders.
-   Fixed Tooltips created at the edge of the screen becoming hidden.

## v5.23.0 - November 17, 2023

-   Added `changeLanguage` function to Mappedin class.
-   Improved collider performance.
-   Improved analytics events.
-   Fixed `focusOn` animation performing redundant rotations.

## v5.22.0 - November 10, 2023

-   Added Markers and Tooltips to `E_SDK_EVENT.CLICK`.
-   Fix instances where a duplicate path would be returned in the click event.
-   Fix `MARKER_ANCHOR` enum giving incorrect values.

## v5.21.0 - October 25, 2023

-   Added default language to fetched venue fields
-   Fixed marker only appearing after moving camera
-   Fixed blueDot follow mode jumping out during dynamic focus
-   Removed top level document.createElement
-   Fixed invisible markers and tooltips blocking map interaction

## v5.20.0 - October 25, 2023

-   Improved analytics events.
-   Fixed flat labels / logos blending issue.
-   Fixed initial marker placement.

## v5.19.0 - October 18, 2023

-   Added support for applying an outline effect to polygons.
-   Added `children` property to MappedinCategory.
-   Added simplified instructions when passing `simplify` to `TDirectionToOptions`.
-   Fixed `focusOn` incorrectly centering target within `safeAreaInsets`.
-   Fixed simplified directions with MappedinDestinationSet.
-   Fixed FlatLabels and geometry showing for multiple floors at once.
-   Fixed performance when adding multiple labels one-by-one.
-   Fixed a crash when modifying paths during map transition.
-   Fixed BlueDot appearing darker with multi-buffer rendering.
-   Fixed some instances where camera would spin during `focusOn`.
-   Fixed some instances of transparency layer fighting.
-   Fixed `Markers.animate` and `Markers.setPosition` promises not resolving.

## v5.18.0 - Sept 18, 2023

-   Added support to disable a vortex.
-   Added `subtitle` field to MappedinMap.
-   Added support to attach a FloatingLabel to a coordinate.
-   Added `simplify` to `TDirectionToOptions` to generate directions with less turns.
-   Added `Camera.interactions.set` to enable or disable specific camera interactions.
-   Added `updateZoomLimits` to `TFocusOnCameraOptions` to enable or disable zoom level adjustments during focusOn.
-   Fixed 2 finger tilt on touch screen devices.
-   Fixed the order of overlapping Markers based on camera distance.
-   Fixed `backgroundAlpha` of `0` defaulting to `1`.
-   Fixed the path altitude adjustment not applying to the first segment.

## v5.17.0 - Aug 24, 2023

-   Added `topLocations` to venue object.
-   Added option for FloatingLabels ranked by category.
-   Added option to adjust path altitude to ensure it's on top of polygons.
-   Added and improved documentation.
-   Fixed a bug in polygon material loading.
-   Fixed end caps of routes to be level with the path instead of sinking them to the floor.

## v5.16.0 - July 21, 2023

-   Added `getPrimaryLocationForPolygon`.
-   Fixed BlueDot exiting follow mode after receiving position updates.

## v5.15.2 - July 13, 2023

-   Fixed the appearance of paths when the last node is on a different map.
-   Fixed an issue with BlueDot when using `STATE.FOLLOW` and Journey.
-   Fixed an issue where `focusOn` would not fit targets within viewbox if tilt and rotation changed.
-   Fixed the camera target calculation.

## v5.15.1 - July 11, 2023

-   Fixed type definitions.

## v5.15.0 - July 7, 2023

-   Version bump to align with Mappedin JS.

## v5.14.1 - June 29, 2023

-   Version bump to align with Mappedin JS.

## v5.14.0 - June 27, 2023

-   Version bump to align with Mappedin JS.

## v5.13.0 - June 22, 2023

-   Added new icon fields to `MappedinLocation` and `MappedinCategory`.
-   Added option to `getVenue` to preload map geometry.
-   Fixed an error with BlueDot when using `useRotationMode: true` and `setState(STATE.FOLLOW)`.
-   Fixed an issue with azure attribution when using the SAS token.

## v5.12.1 - June 21, 2023

-   Fixed an issue with JavaScript files in the type declarations.

## v5.12.0 - June 19, 2023

-   Fixed an issue where some Android devices failed to load the map.
-   Fixed an issue where scene transitions kicked Blue Dot out of follow mode.
-   Fixed an error when fetching label rankings.
-   Fixed an issue where GLSL was included in type declarations.

## v5.11.0 - June 13, 2023

-   Added secure asset loading via CDN token requested during `getVenue`.
-   Fixed a bug where polygons with 0 opacity were visible.
-   Fixed a bug where `backgroundAlpha` of 0 was ignored.

## v5.10.2 - June 8, 2023

-   Fixed Flat Label rendering on polygons with hidden images.

## v5.10.1 - May 30, 2023

-   Removed unused `package.json` dependencies.

## v5.10.0 - May 30, 2023

-   Fixed artifacting around polygon images.

## v5.9.1 - Apr 27, 2023

-   Version bump to align with Mappedin JS.

## v5.9.0 - Apr 25, 2023

-   Add Markers Layer to MapView with support for animated Markers
-   Fix `clearPolygonColor` and `clearAllPolygonColors` resetting Flat Label appearance
-   Fix cursor not changing when hovering interactive elements

## v5.8.0 - Apr 13, 2023

-   Add Paths Layer to MapView with support for interactive Paths
-   Fix case where adding a new Flat Label didn't remove the old one
-   Fix polygon colors appearing different than label colors

## v5.7.1 - Apr 3, 2023

-   Fix scene re-rendering after label updates

## v5.7.0 - March 30, 2023

-   Version bump to align with Mappedin JS

## v5.6.1 - March 29, 2023

-   Fix broken type definitions

## v5.6.0 - March 28, 2023

-   Add support for interactive Floating Labels
-   Add Floating Labels to `E_SDK_EVENT.CLICK` payload
-   Add `nodes` property to `MappedinVortex`
-   Fix crash when calling `FlatLabels.remove()` on a polygon which has no label

## v5.5.0 - March 27, 2023

-   Made the Marker class public
    -   `createMarker` now returns a Marker object
-   Fix path arrows not rendering if path pulse is disabled
-   Fix instances where `MappedinDestinationSet`s could be discontinuous

## v5.4.0 - March 21, 2023

-   Add `getPolygonsAtScreenCoordinate` -method
-   Stop filtering polygons with invisible geometry when fetching venue data

## v5.3.0 - March 14, 2023

-   Turn Blue Dot smoothing off by default on devices using Apple's IPS

## v5.2.2 - March 9, 2023

-   Additional fixes to polygon highlights

## v5.2.1 - March 6, 2023

-   Fix a bug where polygon highlight meshes were incorrectly positioned

## v5.2.0 - February 27, 2023

-   Autogenerated layers should correctly always render
-   Fix crash if incorrect map is passed as `firstMap`
-   Add map to `SDK_EVENT.CLICK` payload
-   Fix labels appearance when map is resized from 0x0

## v5.1.5 - February 14, 2023

-   Fix a bug with Blue Dot directional bearing cone animation
-   Improve smart label rendering when using browser zoom

## v5.1.4 - February 10, 2023

-   Fixed issue with `focusOn` causing faded-out floating labels

## v5.1.3 - February 7, 2023

-   Adds double tap to zoom, two finger single tap to zoom out
-   Fix floating labels not displaying on polygons with images

## v5.1.2 - January 31, 2023

-   Fix issues related to NextJS static HTML export

## v5.1.1 - January 30, 2023

-   Lowered ES target

## v5.1.0 - January 30, 2023

-   Add support for icons in Floating Labels
-   Floating Labels now only labels one entrance
-   Fix `FlatLabels.labelAllLocations()` failing after 3 times
-   Fix TypeScript definition for `onCameraChanged`-callback

## v5.0.3 - December 15, 2022

-   Fix issues with removing and relabelling Flat Labels

## v5.0.2 - December 9, 2022

-   Fix TypeScript definitions

## v5.0.1 - December 5, 2022

-   Update readme

## v5.0.0 - December 5, 2022

> This release includes changes from all previous beta versions.

-   Improve Flat Label `setAppearance` to overwrite only specified settings
-   Streamline `createTooltip` arguments
-   Fix `MappedinCategory.locations` getter
-   Internal caching and typing improvements
-   Fix error preventing markers from being created
-   Improve analytics API
-   Add new Flat Labels and Floating Labels APIs
-   Improve types and documentation in various parts
-   Improve error handling in wrappers
-   Remove `setPolygonColor`’s `textColor` and `polygonId` arguments
-   Fix `getPolygonsAtCoordinate` to use map of coordinate instead of current map
-   Fix camera animation rotation for larger angles
-   Fix first map loaded -promise returning too early
-   Suppress extraneous console logs in production
-   Mark `getVenueMVF` as internal
-   Remove old search, which was replaced with `OfflineSearch`
-   Remove 2D perspective
-   Add translate method to the Camera class to enable camera movement
-   Fix map element selection in iOS
-   Stop bundling fetch function for non-browser and React Native environments. This breaking change requires that you set your own fetch function in Node. For example:


```ts
import { setFetchFn } from '@mappedin/mappedin-js';
import fetch from 'node-fetch';

setFetchFn(fetch);
```


-   Added `maxTilt` property to Camera which can be read to retrieve the current max tilt angle, and be set to a new max tilt angle. A range of is enforced via clamping, limiting the tilt angle to between a completely top-down view and completely side-on view.
-   Added `useDraftData` option to `getVenue` to allow accessing draft mode data for testing purposes. This feature needs to be enabled separately for your API keys.
-   Fix searching tags that contain diacritics (accents such as `ñ`)

## v5.0.0-beta.11 - November 23, 2022

-   Streamline `createTooltip` arguments
-   Fix `MappedinCategory.locations` getter
-   Internal caching and typing improvements

## v5.0.0-beta.10 - November 17, 2022

-   Fix Flat Label appearance import

## v5.0.0-beta.9 - November 9, 2022

-   Add the Camera animate method to the RN wrapper
-   Expose image flipping in wrappers
-   Deprecate polygon clicked and nothing clicked -events
-   Add new Flat Labels and Floating Labels APIs
-   Improve types and documentation in various parts
-   Improve error handling in wrappers
-   Remove `setPolygonColor`’s `textColor` and `polygonId` arguments
-   Fix `getPolygonsAtCoordinate` to use map of coordinate instead of current map

## v5.0.0-beta.8 - October 19, 2022

-   Fix camera animation rotation for larger angles
-   Fix first map loaded -promise returning too early
-   Fix issue when searching in `onDataLoaded` -callback
-   Re-evaluate listeners when passed functions change

## v5.0.0-beta.7 - September 12, 2022

-   Add translate method to the Camera class to enable camera movement
-   Fix map element selection in iOS
-   Fix `onPolygonClicked` and `onDataLoaded` issues
-   Add method to control `Camera.maxTilt`

## v5.0.0-beta.6 - August 10, 2022

-   Added `maxTilt` property to Camera which can be read to retrieve the current max tilt angle, and be set to a new max tilt angle. A range of is enforced via clamping, limiting the tilt angle to between a completely top-down view and completely side-on view.
-   Added `useDraftData` option to `getVenue` to allow accessing draft mode data for testing purposes. This feature needs to be enabled separately for your API keys.

## v5.0.0-beta.5 - August 10, 2022

-   Fix searching tags that contain diacritics (accents such as `ñ`)

## v5.0.0-beta.4 - August 4, 2022

-   Switch to CJS builds for testing Mappedin SDK for React Native with Expo Snacks

### Search

# Search

> 

OfflineSearch provides built-in search capability for the Mappedin SDK for React Native v5. It is exposed as a property of the MapViewStore class and indexes the locations and categories for an easy-to-use search feature. This lightweight but capable search engine only requires one line to query.


```tsx
const results = await mapView.current.OfflineSearch.search('Foo');
```


## A Searchable Directory

The following video demonstrates a directory listing of tenants in the Mappedin Demo Mall. Running on both Android and iOS, the search quickly filters the list to only display relevant results. Selecting an item will cause the map to highlight and zoom on the listed location.

> The code for this demo is available as part of Mappedin's React Native demo application on GitHub.


	


## Search Settings

The search parameters can be tweaked with following constants, which are described in TMappedinOfflineSearchAllOptions. The default values were chosen to prioritize the primary index, for a balanced indexing time and to provide some fuzziness to account for possible typos in search queries.


```tsx
{
	CATEGORY_LOCATION_DESCRIPTION_WEIGHT: number;
	CATEGORY_LOCATION_NAME_WEIGHT: number;
	CATEGORY_LOCATION_TAGS_WEIGHT: number;
	CATEGORY_NAME_WEIGHT: number;
	LOCATION_DEFAULT_RANK: number;
	LOCATION_NAME_WEIGHT: number;
	PRIMARY_INDEX_FUZZYNESS: number;
	PRIMARY_INDEX_TAGS_NAME_WEIGHT: number;
	PRIMARY_INDEX_WEIGHT: number;
	RATIO_OF_FUZZY_TO_EXACT: number;
	RATIO_OF_PREFIX_TO_EXACT: number;
	SECONDARY_INDEX_WEIGHT: number;
}
```


Location names, descriptions, categories and tags are searched by default. You can also opt-in for deeper indexing with the following options. Using them will increase the indexing time, however so they're not turned on by default.

-   `searchDescriptionsInCategories` to additionally index all tags for every location in every category
-   `searchTagsInCategories` to also index all tags for every location in every category

To adjust these parameters, provide a value for `searchOptions` at initialization of the ``.


```tsx
<MiMapView
	key="mappedin"
	ref={mapView}
	options={{
		// See Trial API key Terms and Conditions
		// https://developer.mappedin.com/docs/demo-keys-and-maps
		venue: 'mappedin-demo-mall',
		clientId: '5eab30aa91b055001a68e996',
		clientSecret: 'RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1',
		searchOptions: {
			// ... search parameters
		},
	}}
/>
```


## Additional Reading

-   Build Your Own Directory: Listing Locations and Search

### Tooltips

# Tooltips

> 

A tooltip is similar to a marker except it has a mechanism to avoid collisions with other items on the map by positioning itself relative to the point where it's added. This is done automatically and makes it ideal for longer text and an icon.

## Drawing Tooltips

Like markers, tooltips can be placed at either a `MappedinNode` or `MappedinCoordinate` and automatically handle rotation and repositioning to face the camera. Unlike markers, tooltips will also adjust positioning for the presence of nearby tooltips.

Use the `createTooltip` method to draw a tooltip at a node.

```tsx highlight={11-14}
const departure = mapView.current?.venueData?.locations.find((l) => l.name === 'Cleo');
const destination = mapView.current?.venueData?.locations.find((l) => l.name === 'Pandora');
const directions = departure?.directionsTo(destination);

mapView.current?.drawPath(directions.path, {});
directions.instructions.forEach((instruction) => {
	mapView.current?.createTooltip(instruction.node, `${instruction.instruction}`);
});

```

This code snippet selects two locations, then generates directions between them and draws the path. Iterating through the directions, it creates a tooltip at each instruction, such as "Turn left".

![instruction tooltips](/img/react-native-sdk/v5/instruction_tooltips.png)

> The complete code sample demonstrating tooltips at instruction nodes is available on [GitHub](https://github.com/MappedIn/react-native/blob/master/SDKv5_Examples/PlaygroundSamples/src/examples/Tooltips.tsx).

Alternatively, pass a `MappedinCoordinate` to draw a tooltip at a specified latitude/longitude.

```
tsx
const coordinate = mapView.current?.currentMap.createCoordinate(
	43.51905183293411, // latitude
	-80.53701846381122, // longitude
);
mapView.current?.createTooltip(coordinate, `Tooltip`);

```

## Removing Tooltips

Tooltips can be removed from the map by passing the tooltip ID to the [`removeTooltip`](https://docs.mappedin.com/react-native-sdk-api/v5/latest/classes/MapViewStore.html#removeTooltip) method. This ID is returned as a promise from [`createTooltip`](https://docs.mappedin.com/react-native-sdk-api/v5/latest/classes/MapViewStore.html#createTooltip) and can be awaited and stored for later use.

The following code snippet demonstrates creating a marker on polygon touch and storing the id in state. If a tooltip exists when the map is touched subsequently then the existing tooltip is removed.

```
tsx highlight={16}
const mapView = useRef(null);
const [tooltip, setTooltip] = useState();

return (
	
		 {
				if (tooltip) {
					mapView.current?.removeTooltip(tooltip);
				}
				if (polygons.length > 0) {
					const newTooltip = await mapView.current?.createTooltip(
						polygons[0].entrances[0],
						`Tooltip`,
					);
					setTooltip(newTooltip);
				}
				return;
			}}
		/>
	
);

```

## Tooltip Rank

The `collisionRank` option of `createTooltip` enables you to set the priority or rank of individual tooltips. These are defined in the enum [COLLISION_RANKING_TIERS](https://docs.mappedin.com/react-native-sdk-api/v5/latest/enums/COLLISION_RANKING_TIERS.html). The default rank is **HIGH**.

```
tsx
mapView.current?.createTooltip(node, `Tooltip`, {
	collisionRank: COLLISION_RANKING_TIERS.ALWAYS_VISIBLE,
});

```

## Custom Tooltips

By default, tooltips come with existing HTML styling including a directional arrow and white background. Use the [`createCustomTooltip`](https://docs.mappedin.com/react-native-sdk-api/v5/latest/classes/MapViewStore.html#createCustomTooltip) method to write your own HTML without any added styling. With this method you must supply a class or id and a selector argument for the map to handle your tooltip.

```
tsx
mapView.current?.createCustomTooltip(node, `Tooltip`, `.custom-tooltip`, {
	collisionRank: COLLISION_RANKING_TIERS.ALWAYS_VISIBLE,
});
```

## Additional Reading

-   Integrate Office Maps with Workspace Reservations

### Turn-by-Turn Directions

# Turn-by-Turn Directions

> 

Text-based turn-by-turn directions can be a helpful aid to the map view and Blue Dot. The Mappedin SDK for React Native offers the text directions automatically to developers whenever they request a route to a destination.


```ts
const directions = departure.directionsTo(destination);
```


## Directions and Instructions

A call to `.getDirections()` returns a `MappedinDirections` object, which provides the path as an array of `MappedinNode`s, the total walking distance in meters and a list of text-based instructions for navigation. As shown in the Wayfinding Guide this is the same object given to MapViewStore Journey to draw the directions on the map.


```json
{
	"distance": 95.028419,
	"path": [],
	"instructions": []
}
```


`Instructions` array is a `TMappedinDirective` array used for turn-by-turn directions. Two helpful properties are `instruction`, the text used to guide the user; and `distance`, the meters distance from the previous instruction.


```json
{
	"node": {
		"id": "62051d92e325474a30001390",
		"x": 2584.883130073171,
		"y": 2166.8079445617177,
		"accessible": true
	},
	"instruction": "Turn left at Nike Factory Store",
	"action": {
		"bearing": "Left",
		"referencePosition": "At",
		"type": "Turn"
	},
	"type": "Left",
	"distance": 29.498191596865208
}
```


The `instruction` may include a store or a location name. That happens when the SDK is able to determine a relevant location nearby the instruction that could be helpful in navigating the venue.

The action includes an ACTION_TYPE and BEARING_TYPE. These types represent what the user should do and the direction to do it.

The `action` object can be used to localize instructions. The Mappedin SDK provides the following action and bearing text in English only. The text could be substituted for another language before being displayed to a user.

ACTION_TYPE

-   ACTION_TYPE.ARRIVAL = Arrival
-   ACTION_TYPE.DEPARTURE = Departure
-   ACTION_TYPE.EXITVORTEX = ExitVortex
-   ACTION_TYPE.TAKEVORTEX = TakeVortex
-   ACTION_TYPE.TURN = Turn

BEARING_TYPE

-   BEARING_TYPE.LEFT = Left
-   BEARING_TYPE.RIGHT = Right
-   BEARING_TYPE.SLIGHTLEFT = SlightLeft
-   BEARING_TYPE.SLIGHTRIGHT = SlightRight
-   BEARING_TYPE.STRAIGHT = Straight

## Display Turn-by-Turn Directions

In addition to the map view of a drawn path, we can display written turn-by-turn directions using a React Native `FlatList`. Create a new component which takes the `MappedinDirections` and pass the `instructions` array to the `FlatList`. Render each `item.instruction` to display the readable text.


```ts
const DirectionsFlatList = ({ directions }: { directions: MappedinDirections }) => {
	const renderItem: ListRenderItem<TMappedinDirective> = ({ item }) => <Text>{item.instruction}</Text>;

	return directions && <FlatList data={directions.instructions} renderItem={renderItem} />;
};
```


In the `onFirstMapLoaded` callback, create the directions and store them in a state variable. Pass the directions to your new component to render the list once the map has finished loading.


```ts
const mapView = useRef<MapViewStore>(null);
const [activeDirections, setActiveDirections] = useState<MappedinDirections>(null);

return (
	<SafeAreaView>
		<MiMapView
			key="mappedin"
			ref={mapView}
			options={venueOptions}
			onFirstMapLoaded={() => {
				const departure = mapView.current?.venueData?.locations.find((l) => l.name === 'Pet World');
				const destination = mapView.current?.venueData?.locations.find((l) => l.name === 'Microsoft');
				if (!departure || !destination) {
					return;
				}
				const directions = departure.directionsTo(destination);
				if (directions) {
					mapView.current?.Journey.draw(directions);
					setActiveDirections(directions);
				}
			}}
		/>
		<View>
			<DirectionsFlatList directions={activeDirections} />
		</View>
	</SafeAreaView>
);
```


You should see both the map and the written turn-by-turn directions below it.

> The complete code sample demonstrating turn-by-turn directions and more is available in Mappedin's example repository on GitHub.

!Turn By Turn Directions

### Wayfinding

# Wayfinding

> 

!wayfinding

Wayfinding is one of the most often used features of digital maps. This guide shows how to display a route from A to B using Mappedin SDK for React Native. It continues from a basic map display example.

When you have a map display component setup, we'll add interactivity to the polygons with `onPolygonClicked` callback property of `MiMapView`.

First, we'll need to setup destination and departure variables inside our component:


```tsx
const [destination, setDestination] = React.useState<MappedinLocation>();
const [departure, setDeparture] = React.useState<MappedinLocation>();
```


Then adding the `onPolygonClicked` callback will set those variables so that departure polygon is the one tapped first:


```tsx
<MiMapView
	style={{ flex: 1 }}
	ref={mapView}
	options={options}
	onPolygonClicked={({ polygon }) => {
		if (departure === undefined) {
			setDeparture(polygon.locations[0]);
			mapView.current?.setPolygonColor(polygon, 'green');
		} else {
			setDestination(polygon.locations[0]);
		}
	}}
/>
```


Only the departure polygon is colored once we start tapping on the map now. To draw the path, we'll create a `useEffect` hook that will render when destination is set.

`MappedinLocation` object has a `directionsTo()`method, which takes the destination as a parameter. That's how we get back the directions, which we then feed to `Journey.draw()` to render them on the map.


```tsx
useEffect(() => {
	async function drawDirections() {
		const directions = await departure.directionsTo(destination);
		mapView.current?.Journey.draw(directions);
	}

	if (!departure || !destination) return;
	drawDirections();
}, [departure, destination]);
```


## Finished sample


```tsx
import React, { useEffect } from 'react';

import { MappedinLocation, MapViewStore, MiMapView } from '@mappedin/react-native-sdk';

// See Trial API key Terms and Conditions
// https://developer.mappedin.com/docs/demo-keys-and-maps
const options = {
	clientId: '5eab30aa91b055001a68e996',
	clientSecret: 'RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1',
	venue: 'mappedin-demo-mall',
	labelAllLocationsOnInit: false,
};

const App = () => {
	const mapView = React.useRef<MapViewStore>(null);
	const [destination, setDestination] = React.useState<MappedinLocation>();
	const [departure, setDeparture] = React.useState<MappedinLocation>();

	useEffect(() => {
		async function drawDirections() {
			const directions = await departure.directionsTo(destination);
			console.log(directions);
			mapView.current?.Journey.draw(directions);
		}

		if (!departure || !destination) return;

		drawDirections();
	}, [departure, destination]);

	return (
		<>
			<MiMapView
				style={{ flex: 1 }}
				ref={mapView}
				options={options}
				onPolygonClicked={({ polygon }) => {
					if (departure === undefined) {
						setDeparture(polygon.locations[0]);
						mapView.current?.setPolygonColor(polygon, 'green');
					} else {
						setDestination(polygon.locations[0]);
					}
				}}
			/>
		</>
	);
};

export default App;
```


> See A-B wayfinding with Mappedin JS guide for more advanced use cases such as multi-floor, accessible route and multi-destination wayfinding

## Additional Reading

-   Augmenting Directions with Wait Time Information
-   Implementing Wait Time Tracking for Restrooms
-   Promoting Key Locations Along a Path
-   Build Your Own Directory: Displaying the Map and Mobile Pass