How to Create Custom Search¶

This guide will help you create a custom search using the Pointr Web SDK.

Since there are many different use cases for custom search, we will provide a basic example to get you started.

Disabling the Default Search Bar¶

First, disable the default search bar of the Web SDK by setting the shouldEnableSearch option to false in the PointrWebSDK.Options.

    const options = new PointrWebSDK.Options({
        // these options for sample app environment. You should change them according to your environment.
        apiUrl: "https://sample-app-v8-api.pointr.cloud",
        clientInternalIdentifier: "72df7035-cdea-4c19-93b8-6deff5177894",
        clientSecret: "c93f0101-36ed-4129-8f95-558f4cd8e82f",
        siteInternalIdentifier: 2,
        // disable the default search bar
        shouldEnableSearch: false
    })

    pointrWeb = new PointrWebSDK.MapWidget(options)
    pointrWeb.start()

Creating Your Own Search Component¶

After disabling the default search bar, you can create your own search bar and handle the search logic.

There are two different methods while you’re creating your own search component:

1. Search using the `search` method of Web SDK¶

You can use the search method of the Web SDK to search for a specific POI.

    // create options like above
    const pointrWeb = new PointrWebSDK.MapWidget(options);
    pointrWeb.start();
    // To be able to search or get pois you need to wait until the data is loaded
    pointrWeb.on(pointrWeb.events.dataLoaded, async () => {
    // get site using external identifier
    // const site = pointrWeb
    //     .getSiteBuildingManager()
    //     .getSiteWithExternalIdentifier("SITE_EXTERNAL_IDENTIFIER");

    // or you can get using internal identifier
    const site = pointrWeb
        .getSiteBuildingManager()
        .getSiteWithInternalIdentifier(2);

    const searchResults = await pointrWeb.search("luxury", site);
    });

The search results will be an array of POIs that match the search query. You can use this array to display the search results in your component.
Search function prioritize the building on the screen for the search results and sorts alphabetically if there are multiple results in the same building.
Search function supports partial search queries. For example, if you search for “toilet” it will return the POIs that contain the word “toilet” in their name.
Search function checks name, description, keywords and their translations. So if you’re looking for more simple solution you can use this method.

2. Get all the POIs and filter them in your component¶

Alternatively, you can get all the POIs in the site and filter them in your component for more control over the search logic.

    // create options like above
    const pointrWeb = new PointrWebSDK.MapWidget(options);
    pointrWeb.start();
    // To be able to search or get pois you need to wait until the data is loaded
    pointrWeb.on(pointrWeb.events.dataLoaded, async () => {
    // get site using external identifier
    // const site = pointrWeb
    //     .getSiteBuildingManager()
    //     .getSiteWithExternalIdentifier("SITE_EXTERNAL_IDENTIFIER");

    // or you can get using internal identifier
    const site = pointrWeb
        .getSiteBuildingManager()
        .getSiteWithInternalIdentifier(2);

    const pois = await pointrWeb.getPoiManager().getPoisBySite(site.siteInternalIdentifier);
    // As an example you can filter the POIs that contain the word "luxury" in their name
    const searchResults = pois.filter(poi => poi.name.toLowerCase().includes("luxury"));
    });

By using this method you can have all the control over the search logic. You can filter the POIs based on their name, description, keywords, or any other field you want.

Example of a Custom Search Component¶

Here’s how you might implement a custom search component using the first method:

const options = new PointrWebSDK.Options({
    // these options for sample app environment. You should change them according to your environment.
    apiUrl: "https://sample-app-v8-api.pointr.cloud",
    clientInternalIdentifier: "72df7035-cdea-4c19-93b8-6deff5177894",
    clientSecret: "c93f0101-36ed-4129-8f95-558f4cd8e82f",
    siteInternalIdentifier: 2,
    // disable the default search bar
    shouldEnableSearch: false
})
pointrWeb = new PointrWebSDK.MapWidget(options)
pointrWeb.start()

// Create a search input element
const searchInput = document.createElement('input');
searchInput.type = 'text';
searchInput.id = 'searchInput';
searchInput.placeholder = 'Search for POIs...';

// Create a search button element
const searchButton = document.createElement('button');
searchButton.disabled = true;
searchButton.textContent = 'Search';
searchButton.onclick = async () => {
  // Get the site using internal identifier
  const site = pointrWeb
    .getSiteBuildingManager()
    .getSiteWithInternalIdentifier(2);

  // Perform the search with the input value
  const searchResults = await pointrWeb.search(searchInput.value, site);
  console.log(searchResults);
};

// Append the input and button to the document body
document.body.prepend(searchInput);
document.body.prepend(searchButton);

// Listen for the 'dataLoaded' event to enable the search button
pointrWeb.on(pointrWeb.events.dataLoaded, () => {
  searchButton.disabled = false;
});

This example demonstrates creating a search input and button that, when clicked, will search for the term entered and log the results to the console. You can further develop this to display the results in a user-friendly manner and provide additional functionality such as highlighting or navigating to POIs.

POI Highlight Example¶

// to be able to highlit POI map should be ready
mapView.on(mapView.events.mapReady, async () => {
    // If there isn't a site loaded, you need to set it first before highlighting the POI
    const site = pointrWeb
        .getSiteBuildingManager()
        .getSiteWithInternalIdentifier(2);
    pointrWeb.loadAndSet(site);
    // selectedPoiFromSearch is the selected POI from the search results. e.g. searchResults[0]
    pointrWeb.highlight(selectedPoiFromSearch);
});

const mapView = pointrWeb.getUiController().getMapViewController().getView();
const navigationViewController = pointrWeb
  .getUiController()
  .getNavigationViewController();
// To start navigation map shoudl be ready
mapView.on(mapView.events.mapReady, async () => {
  const startPoi = selectedPoiFromSearchForStartingPoint;
  const destinationPoi = selectedPoiFromSearchForDestinationPoint;
  pointrWeb.highlight(selectedPoiFromSearchForStartingPoint);
  pointrWeb.highlight(selectedPoiFromSearchForDestinationPoint);
  pointrWeb.hidePoiDetails();
  navigationViewController.populate(selectedPoiFromSearchForStartingPoint, selectedPoiFromSearchForDestinationPoint);
  navigationViewController.startNavigation();
});

Last update: June 7, 2024