Mappedin Logo

Developer

Mappedin Documentation

React Native SDK: Minimap

React Native SDK: 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 setup downloading the venue data with getVenue and React's useEffect hook populates the state from the server.

const options = {
clientId: '<MAPPEDIN_CLIENT_ID>',
clientSecret: '<MAPPEDIN_CLIENT_SECRET>',
venue: 'mappedin-demo-mall',
};
const [venueData, setVenueData] = React.useState<Mappedin>();
useEffect(() => {
async function init() {
const venueData = await getVenue(options);
setVenueData(venueData);
}
init();
}, []);

Before we are ready to render the <MiMinimap />, we select our display location by finding the venue with the name "Apple" and setup a simple loading screen.

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.

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

<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

import React, {useEffect} from 'react';
import {SafeAreaView, Text} from 'react-native';
import {Mappedin, MiMiniMap, getVenue} from '@mappedin/react-native-sdk';
const options = {
clientId: '5eab30aa91b055001a68e996',
clientSecret: 'RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1',
venue: 'mappedin-demo-mall',
};
const App = () => {
const [venueData, setVenueData] = React.useState<Mappedin>();
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;

Search Our Docs

Sign Up

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