Create a search experience

Now you have simple app showing a map. In this step, 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.

After going through this tutorial this is what you end up with:

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