Search

Mappedin JS v4.1.0 introduced the new OfflineSearch -class, which indexes the locations and categories for easy-to-use search feature. This lightweight but capable search engine only requires one line to setup and another to query.

const search = new OfflineSearch(venue);
const results = await search.search('Foo');

A searchable directory

The example below shows a directory listing of tenants in the Mappedin Demo Mall with a search bar that filters the list to only display search results. It's a great example of using the map data without rendering the map view, which could be done later when the user selects a destination from the list.

Search settings

The search parameters can be tweaked at initialization 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.

{
	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

Caching the index

Because the index is created client-side, this can take several hundred milliseconds. You can output the index as stringified JSON and reuse it later.

const searchIndex = await search.toJSON();
localStorage.setItem('mappedin-search-index', searchIndex);

To use the cached search index, input it as a parameter when initializing the OfflineSearch:

// First, retrieve the index from local storage and if it exists use it
const searchIndex = localStorage.getItem('mappedin-search-index');
const search = new OfflineSearch({ jsonIndex: searchIndex });