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.

// 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 <MiMinimap />, we select our display location by finding the venue with the name "Apple" and set up 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, 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;