Show search results on the map
This article shows you how to search for location of interest and show the search results on the map.
There are two ways to search for a location of interest. One way is to use a service module to make a search request. The other way is to make a search request to Azure Maps Fuzzy search API through the Fetch API. Both ways are discussed below.
Make a search request via service module
In the code above, the first block constructs a map object and sets the authentication mechanism to use the access token. You can see create a map for instructions.
The second block of code creates a TokenCredential to authenticate HTTP requests to Azure Maps with the access token. It then passes the TokenCredential to atlas.service.MapsURL.newPipeline() and creates a Pipeline instance. The searchURL represents a URL to Azure Maps Search service.
The third block of code creates a data source object using the DataSource class and add search results to it. A symbol layer uses text or icons to render point-based data wrapped in the DataSource as symbols on the map. A symbol layer is then created. The data source is added to the symbol layer, which is then added to the map.
The fourth code block uses the SearchFuzzy method in the service module. It allows you to perform a free form text search via the Get Search Fuzzy rest API to search for point of interest. Get requests to the Search Fuzzy API can handle any combination of fuzzy inputs. A GeoJSON feature collection from the response is then extracted using the geojson.getFeatures() method and added to the data source, which automatically results in the data being rendered on the map via the symbol layer.
The last block of code adjusts the camera bounds for the map using the Map's setCamera property.
The search request, data source, symbol layer, and camera bounds are inside the event listener of the map. We want to ensure that the results are displayed after the map fully loads.
Make a search request via Fetch API
In the code above, the first block of code constructs a map object. It sets the authentication mechanism to use the access token. You can see create a map for instructions.
The second block of code creates a URL to make a search request to. It also creates two arrays to store bounds and pins for search results.
The third block of code uses the Fetch API. The Fetch API is used to make a request to Azure Maps Fuzzy search API to search for the points of interest. The Fuzzy search API can handle any combination of fuzzy inputs. It then handles and parses the search response and adds the result pins to the searchPins array.
The fourth block of code creates a data source object using the DataSource class. In the code, we add search results to the source object. A symbol layer uses text or icons to render point-based data wrapped in the DataSource as symbols on the map. A symbol layer is then created. The data source is added to the symbol layer, which is then added to the map.
The last block of code creates a BoundingBox object. It uses the array of results, and then it adjusts the camera bounds for the map using the Map's setCamera. It then renders the result pins.
The search request, the data source, symbol layer, and the camera bounds are set within the map's event listener to ensure that the results are displayed after the map loads fully.
Next steps
Learn more about Fuzzy Search:
Learn more about the classes and methods used in this article:
See the following articles for full code examples:
Feedback
Submit and view feedback for