Create a search experience

Now you have simple app with a showing map. In this page, you'll create a simple search and display the search results in a list. You'll also learn how to filter the data displayed on the map based on the search results.

MapsIndoors Locations can be retrieved in the mapsindoors namespace using the LocationsService.getLocations() method but first you need to add a <input> and <button> element to the DOM.

  • Create an <input> and <button> element in <body>.
  • Attach an onclick event to the <button> element and call a onSearch method, which you will create next.
<!-- index.html -->

<body>
...
<input type="text" placeholder="Search">
<button onclick="onSearch()">Search</button>
</body>
  • Create the onSearch method.
  • Get a reference to the search <input> element.
  • Define a new object with the search parameter q and the value of searchInputElement.
  • Call the getLocations method and log out the results to the console.
// main.js

function onSearch() {
const searchInputElement = document.querySelector('input');

const searchParameters = { q: searchInputElement.value };
mapsindoors.services.LocationsService.getLocations(searchParameters).then(locations => {
console.log(locations);
});
}

See all available search parameters in the reference documentation.

Using the <mi-search> component you get a <input>element tied tightly together with the Location Service.

  • Insert the <mi-search> custom element into <body>.
  • Add the mapsindoors and placeholder attributes.
<!-- index.html -->

<body>
...
<mi-search
style="width: 600px;"
mapsindoors="true"
placeholder="Search">

</mi-search>
</body>
  • Get a reference to the <mi-search> element.
  • Attach an results event listener and log out the results to the console.
// main.js

const miSearchElement = document.querySelector('mi-search');

miSearchElement.addEventListener('results', (event) => {
console.log(event.detail);
});

For more information on available events and how to configure the <mi-search> component, see components.mapsindoors.com/search.

Show a list of search results

To display a list of search results you can append each search result to a list element.

  • Add the <ul> list element below the search field in <body> with the id attribute set to "search-results".
<!-- index.html -->

<body>
...
<ul id="search-results"></ul>
</body>
  • Insert the <mi-list> custom element below the search field in <body>.
  • Add the scroll-buttons-enabled and scroll-length attributes.
<!-- index.html -->

<body>
...
<mi-list
style="width: 600px; height: 400px;"
scroll-buttons-enabled="true"
scroll-length="200">

</mi-list>
</body>

For more information on how to configure the <mi-list> component, see components.mapsindoors.com/list.

  • Get a reference to the list element.
  • Reset the list on every complete search.
// main.js

function onSearch() {
...
// Get list element reference
const searchResultsElement = document.getElementById('search-results');
...
mapsindoors.services.LocationsService.getLocations(searchParameters).then(locations => {
// Reset search results list
searchResultsElement.innerHTML = null;
...
});
}
// main.js

// Get list element reference
const miListElement = document.querySelector('mi-list');

miSearchElement.addEventListener('results', (event) => {
// Reset search results list
miListElement.innerHTML = null;
...
});
  • Add a for loop and append every result to the search results list element.
// main.js

function onSearch() {
...
mapsindoors.services.LocationsService.getLocations(searchParameters).then(locations => {
...
// Append new search results
locations.forEach(location => {
const listElement = document.createElement('li');
listElement.innerHTML = location.properties.name;
searchResultsElement.appendChild(listElement);
});
});
}
// main.js

miSearchElement.addEventListener('results', (event) => {
...
// Append new search results
event.detail.forEach(location => {
const miListItemElement = document.createElement('mi-list-item-location');
miListItemElement.location = location;
miListElement.appendChild(miListItemElement);
});
});

Filter Locations on map based on search results

To filter the map to only display the search results you can use the filter method.

  • Call mapsIndoorsInstance.filter with an array of location IDs.
// main.js

function onSearch() {
...
mapsindoors.services.LocationsService.getLocations(searchParameters).then(locations => {
...
// Filter map to only display search results
mapsIndoorsInstance.filter(locations.map(location => location.id), false);
});
}
// main.js

miSearchElement.addEventListener('results', (event) => {
...
// Get the MapsIndoors instance
miMapElement.getMapsIndoorsInstance().then((mapsIndoorsInstance) => {
// Filter map to only display search results
mapsIndoorsInstance.filter(event.detail.map(location => location.id), false);
});
});

To remove the location filter again, call mapsIndoorsInstance.filter(null).

Next up: Directions