Hi everyone,
We're updating vom 3.x to 4.x. In the 3.x version we used the swiss search service for the search widget. Now we'd like to use a search widget in 4.x with the swiss search service as it is a bit more accurate. Therefore, I tried to modify this sample code and to use the swiss Search API instead of the french one. I didn't manage.
I searched these documentations:
https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html#sources
https://groups.google.com/g/geoadmin-api
Are there any tutorials which explain the use of a custom search source generally? What do I need to put where? (for dummies)
or even better: has anyone already managed to use the swiss search service with the search widget of the arcgis API for javascript 4.x?
Solved! Go to Solution.
Custom Search sources are going to vary based on what third-party API you are using. So you need to be familiar with the parameters that API needs.
The samples are using the esriRequest to make the queries, but you don't have to. You can use native fetch, or axios, or any other request style library you are comfortable with.
https://developers.arcgis.com/javascript/latest/api-reference/esri-request.html
The power of using custom search sources is that you can transform any searchable third-party API into something that be used by the Search widget, meaning each API will need to handled on a case by case basis. The API parameters will differ, the results will differ, but as long as you transform those results into something the ArcGIS JSAPI expects, you can make it work.
This Swiss search API can return GeoJSON results, so that makes it a little easier to work with, but you need to specify the spatial reference as well.
Here is an update to your app that uses the parameters as described in that search API doc and seems to work correctly.
The main things you need to write are a getSuggestions and getResults method.
https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search-SearchSource.html
That API looks like it takes a searchText and limit, so you can use that for the suggestions. You need to transform those into a SuggestResult, with key, text, and sourceIndex.
https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html#SuggestResult
The getResults should return an array of SearchResults
https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html#SearchResult
Thank you @ReneRubalcava ! 🙂
I think, step 1 has to be, to match the search url to one of the examples of the swiss API. So, I tried to create the url to match this:
https://api3.geo.admin.ch/rest/services/api/SearchServer?searchText=wabern&type=locations
Somehow I get some additional characters in my url:
https://api3.geo.admin.ch/rest/services/api/SearchServer?searchText %2F=&q=wabern&type=locations
I prepared a Codepen: https://codepen.io/nwp_nadja_bernhard/pen/KKoWqWW?editors=0011
So my questions are:
https://developers.arcgis.com/javascript/latest/api-reference/esri-request.html#RequestResponse
Custom Search sources are going to vary based on what third-party API you are using. So you need to be familiar with the parameters that API needs.
The samples are using the esriRequest to make the queries, but you don't have to. You can use native fetch, or axios, or any other request style library you are comfortable with.
https://developers.arcgis.com/javascript/latest/api-reference/esri-request.html
The power of using custom search sources is that you can transform any searchable third-party API into something that be used by the Search widget, meaning each API will need to handled on a case by case basis. The API parameters will differ, the results will differ, but as long as you transform those results into something the ArcGIS JSAPI expects, you can make it work.
This Swiss search API can return GeoJSON results, so that makes it a little easier to work with, but you need to specify the spatial reference as well.
Here is an update to your app that uses the parameters as described in that search API doc and seems to work correctly.