| title | description | author | ms.author | ms.date | ms.topic | ms.service | services | manager | ms.custom |
|---|---|---|---|---|---|---|---|---|---|
Show search results with Azure Maps | Microsoft Docs |
How to perform a search request with Azure Maps then display the results on a Javascript map |
jingjing-z |
jinzh |
11/15/2018 |
conceptual |
azure-maps |
azure-maps |
codepen |
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 through a XMLHttpRequest to Azure Maps Fuzzy search API. Both ways are discussed below.
<iframe height='500' scrolling='no' title='Show search results on a map (Service Module)' src='//codepen.io/azuremaps/embed/zLdYEB/?height=265&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Show search results on a map (Service Module) by Azure Maps (@azuremaps) on CodePen. </iframe>In the code above, the first block of code constructs a map object and initializes the client service. You can see create a map for instructions.
The second block of code uses the getSearchFuzzy method in the service module. It allows you to perform a free form text search via the Fuzzy Search rest API to search for point of interest. Fuzzy search API can handle any combination of fuzzy inputs. The response from the fuzzy search service is then parsed into GeoJSON format using the getGeoJsonSearchResponse method.
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 and the data source is added to the symbol layer, which is then added to the map.
The last block of code adjusts the camera bounds for the map by using the Map's setCamera property.
The search request, the data source, and symbol layer and the camera bounds are created and set within the map's event listener to ensure that the results are displayed after the map loads fully.
<iframe height='500' scrolling='no' title='Show search results on a map' src='//codepen.io/azuremaps/embed/KQbaeM/?height=265&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Show search results on a map by Azure Maps (@azuremaps) on CodePen. </iframe>In the code above, the first block of code constructs a Map object. You can see create a map for instructions.
The second block of code sends an XMLHttpRequest to Azure Maps Fuzzy search API to search for the point of interest. The Fuzzy search API can handle any combination of fuzzy inputs.
The third block of code parses the search response and stores the results in an array to calculate the bounds. It then returns the search results.
The fourth 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 and 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 using the array of results and then adjusts the camera bounds for the map by using the Map's setCamera. It then render the result pins.
The search request, the data source, and 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.
Learn more about Fuzzy Search:
[!div class="nextstepaction"] Azure Maps Fuzzy Search API
Learn more about the classes and methods used in this article:
[!div class="nextstepaction"] Map
See the following articles for full code examples:
[!div class="nextstepaction"] Get information from a coordinate
[!div class="nextstepaction"] Show directions from A to B