Mappedin Logo

Developer

Mappedin Documentation

React Native SDK: Quickstart - 15m

React Native SDK: Quickstart - 15m

Follow this 15-minute guide to embed a Mappedin map onto your React Native application.

Prerequisites

Setup your development environment as described in the React Native SDK Overview or create the component in an existing project.

Setup

To setup, we need to define TMiMapViewOptions

{
"clientId": "<MAPPEDIN_CLIENT_ID>",
"clientSecret": "<MAPPEDIN_CLIENT_SECRET>",
"venue": "mappedin-demo-mall",
"perspective": "Website"
}

For demo purposes, the required values can be found below. Contact us to get started with your own venue.

PropertyValue
clientIdSee Here
clientSecretSee Here

Display a 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 MiMapView. Replace the content of App.tsx in a fresh React Native -project with the following or create a similar component in your own project.

import React from 'react';
import { SafeAreaView } from 'react-native';
import { MiMapView } from '@mappedin/react-native-sdk';
export const App = () => {
return (
<SafeAreaView style={{flex: 1}}>
<MiMapView
style={{ flex: 1 }}
key="mappedin"
options={{
clientId: '<MAPPEDIN_CLIENT_ID>',
clientSecret: '<MAPPEDIN_CLIENT_SECRET>',
venue: 'mappedin-demo-mall',
perspective: 'Website',
}}
/>
</SafeAreaView>
);
};

Adding interactivity to the map

Let's add interactivity to our map by setting the callback function onPolygonClicked. This clears all other colors from polygons and sets the clicked polygon to red.

MiMapView features several other callback functions which are documented in more detail here:

  • onBlueDotPositionUpdated
  • onBlueDotStateChanged
  • onDataLoaded
  • onFirstMapLoaded
  • onNothingClicked
  • onStateChanged

Adding state and reference to the map view

In order to interact with the map view, we need to create a reference to it with React.useRef. Additionally, we will add a simple state for the selected location that will be set by tapping the polygon so that we can add its name and logo to the view. With the code below, the MappedinLocation of the polygon will be saved in the state.

const [selectedLocation, setSelectedLocation] = React.useState<
MappedinLocation | undefined
>();
const mapView = useRef<MapViewStore>();
return (
<MiMapView
style={{flex: 1}}
options={{
clientId: '<MAPPEDIN_CLIENT_ID>',
clientSecret: '<MAPPEDIN_CLIENT_SECRET>',
venue: 'mappedin-demo-mall',
perspective: 'Website',
}}
ref={mapView}
onPolygonClicked={({polygon}) => {
setSelectedLocation(polygon.locations[0]);
mapView.current?.clearAllPolygonColors();
mapView.current?.setPolygonColor(polygon, 'red');
}}
/>
)

To display information about the selected location, we should add another view next to the MiMapView. This shows the logo and the name of the location on top of the map view only when selectedLocation is set.

{selectedLocation && (
<View
style={{
display: 'flex',
flexDirection: 'row',
backgroundColor: 'white',
padding: 8,
justifyContent: 'space-around',
alignItems: 'center',
}}>
<Image
style={{
height: 50,
width: 50,
marginRight: 20,
resizeMode: 'contain',
}}
source={{
uri: selectedLocation.logo?.small,
}}
/>
<Text>{selectedLocation.name}</Text>
</View>
)}

Interactive map result

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

Search Our Docs

Sign Up

© 2020 Copyright Mappedin, All Rights Reserved. View our Privacy Policy