Enterprise Data

Mappedin SDK for React Native version 6 is currently in an alpha state while Mappedin perfects new features and APIs. Open the v6 release notes to view the latest changes.

Using Mappedin SDK for React Native with your own map requires a Pro license. Try a demo map for free or refer to the Pricing page for more information.

The Enterprise Data classes described in this guide are populated in Mappedin CMS, which requires an Enterprise Tier subscription.

Enterprise Locations

A Mappedin.EnterpriseLocation contains metadata about a location, such as its name, description, logo, phone number, social medial links, hours of operation and more. They can be accessed using the Mappedin.MapData.getByType() method as shown below.

const allLocations = mapData.getByType('enterprise-location');

Here is an example of the data contained within Mappedin.EnterpriseLocation.

Enterprise Categories

A Mappedin.EnterpriseCategory groups one or more Mappedin.EnterpriseLocation. These allow similar locations to be sorted in a logical fashion. For example a mall may group locations into Food Court, Footwear and Women's Fashion. They can be accessed using the Mappedin.MapData.getByType() method as shown below.

mapData.getByType('enterprise-category');

Here is an example of the data contained within Mappedin.EnterpriseCategory.

Mappedin.EnterpriseCategory can contain one or more sub Mappedin.EnterpriseCategory that are accessed from its children accessor. Mappedin.EnterpriseCategory also contains a name, array of Mappedin.EnterpriseLocation and other metadata.

Enterprise Venue

The Mappedin.EnterpriseVenue class holds metadata about the map, which includes the map name, supported languages, default language, top locations and more. It can be accessed using the Mappedin.MapData.getByType() method as shown below.

mapData.getByType('enterprise-venue');

Here is an example of the data contained within Mappedin.EnterpriseVenue.

Enterprise Search

The Mappedin.Search functionality allows users to search for locations, categories, and other points of interest within the venue. Here are two ways to enable search:

1. Enable Search on map initialization (Recommended):

<MapView
  mapData={{
    key: KEY,
    secret: SECRET,
    mapId: MAP_ID,
    search: {
        enabled: true,
    },
  }}
  options={{}}
>
</MapView>

2. Enable Search via method:

await mapData.Search.enable();

Search Query

Use Mappedin.Search.query to search for locations based on a string input:

• Mappedin.EnterpriseLocation: Specific places such as stores, restaurants, or washrooms.
• Mappedin.EnterpriseCategory: Groups of locations, such as "Food Court" or "Electronics."
• Mappedin.Places: Any main objects that can be searched for such as Mappedin.Space, Mappedin.Door, Mappedin.PointOfInterest

Search query returns a list of matching Mappedin.SearchResults based on the input string.

Mappedin.SearchResults include information about the type of match, the score (relevance), and detailed metadata about the matching items.

Example Search Query

const results = await mapData.Search.query('Coffee Shop');

// Log the entire result object
console.log(results);

Example Response

{
    "places": [
        {
            "type": "space",
            "match": {
                "coffee": ["description"],
                "shop": ["description"],
                "shopping": ["description"]
            },
            "score": 19.5,
            "item": {
                "id": "s_ef330e70329183b4",
                "name": "Take Five Cafe",
                "type": "room",
                "floor": "f_8ca999c2cbcb6022",
                "center": {
                    "latitude": 43.860466138841865,
                    "longitude": -78.94643735347043,
                    "floor": "f_8ca999c2cbcb6022"
                }
            }
        }
    ],
    "enterpriseLocations": [
        {
            "type": "enterprise-location",
            "match": {
                "coffee": ["tags", "description"]
            },
            "score": 24.3,
            "item": {
                "id": "el_094c671a5bc73fb7",
                "name": "Nespresso"
            }
        }
    ],
    "enterpriseCategories": [
        {
            "type": "enterprise-category",
            "match": {
                "shop": ["locations.name"]
            },
            "score": 9.4,
            "item": {
                "id": "ec_5cf9b7898619b951",
                "name": "Health & Beauty"
            }
        }
    ]
}

Response Field Breakdown

1. Mappedin.Places:

   • type: Indicates the type of match (e.g., space).
   • match: Shows the fields that matched the query (e.g., description).
   • score: Relevance score of the match.
   • item: Includes id, name, type, floor, and center (coordinates).

2. Mappedin.EnterpriseLocation:

   • type: enterprise-location.
   • match: Indicates fields matched (e.g., tags, description).
   • item: Contains id, name, and additional metadata.

3. Mappedin.EnterpriseCategory:

   • type: enterprise-category.
   • match: Indicates query matches to category-related data.
   • item: Contains id and name.

Search Suggestions

Use Mappedin.Search.suggest to fetch real-time suggestions based on partial input. This is useful for creating an autocomplete feature for a search bar.

Example Code

// fetch suggestions for partial input "Coff"
const suggestions = await mapData.Search.suggest('Coff');

// log the suggestions
console.log(suggestions);

// log suggestion names
suggestions.forEach(suggestion => {
    console.log(`Suggestion: ${suggestion.suggestion}`);
});

Example Response

Here's a sample response for the query 'Coff':

[
    {
        suggestion: 'coffee',
        terms: ['coffee'],
        score: 7.558366632976704,
    },
];

Response Field Breakdown

1. suggestion: The suggested term or phrase (e.g., "coffee").
2. terms: An array of individual terms that make up the suggestion.
3. score: A numerical value representing the relevance of the suggestion.

Events & Deals

Events and deals created in Mappedin CMS can be retrieved using the @mappedin/events package.

Installation

To use the @mappedin/events package, you need to install it using npm or yarn.

Using npm

npm install @mappedin/events

Using yarn

yarn add @mappedin/events

Usage

The following example demonstrates how to load and display events on a map.

const { mapData } = useMap();

// Create an EventManager to load and read event data
const em = new EventsManager(mapData);

// Load all events
await em.load();

// Create markers for all events with the event name at the location of the event
return (
  <>
    {em.events.map(event => (
      <Marker
        key={event.id}
        target={event.location?.spaces[0]}
        text={event.name}
      />
    ))}
  </>
);

Options

The EventsManager constructor accepts an optional options parameter. The following options are available:

/**
 * Options for the {@link EventsManager}.
 */
export type EventsManagerOptions = Partial<{
	/**
	 * The fields to fetch for each event.
	 *
	 * @default fields id, name, type, startDate, endDate, externalId, description, location, image, video
	 */
	fields: string[];
	/**
	 * Whether to include past or expired events.
	 *
	 * @default false
	 */
	includeExpired: boolean;
}>;

Methods

The EventsManager class provides the following methods:

class EventsManager {
	/**
	 * Whether load() has been called and successfully completed.
	 */
	get ready(): boolean;

	/**
	 * All current and future events that have been loaded. Will be empty if load() has not been called.
	 */
	get events(): EventMetaData[];

	/**
	 * Load all the events for the map.
	 */
	async load(): void;

	/**
	 * Get an event by ID.
	 */
	getById(id: string): EventMetaData | undefined;

	/**
	 * Get an array of events attached to an EnterpriseLocation.
	 */
	getByLocationId(locationId: string): EventMetaData[];

	/**
	 * Clean up the EventsManager instance.
	 */
	destroy(): void;
}