nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

search widget with custom source: swiss search service

nadja

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://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search-LocatorSearchSource.html#apiKey

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?

Find more posts tagged with

Accepted answers

ReneRubalcava

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 ?q= is created by esriRequest, because that is how the sample API needs to be parsed. Your API is different.
The %2F comes from url encoding. Without going into detail, this is how URL requests get encoded to escape special characters. This is standard.
This was specific to the sample API being used, your API will require different parameters.
Your API doesn't need the lat/lon parameters, so you can omit them.
The sourceIndex is the index of the search source being referenced. This is given to you in the parameters of the getSuggestions method.

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search-SearchSource.html#GetSuggestionsParameters

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.

https://codepen.io/odoe/pen/QWmpVdQ?editors=0011

All comments

ReneRubalcava

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

nadja

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:

Where does "&q=" come from?
Where does "%2F" come from?
What does "q: params.suggestTerm.replace(/ /g, "+")," do exactly? (line 74)
Why would I need "lat: view.center.latitude," in the getSuggestions method? (line 77)
What is a sourceIndex? the documentation is a bit ambiguous... (line87)

https://developers.arcgis.com/javascript/latest/api-reference/esri-request.html#RequestResponse

ReneRubalcava

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 ?q= is created by esriRequest, because that is how the sample API needs to be parsed. Your API is different.
The %2F comes from url encoding. Without going into detail, this is how URL requests get encoded to escape special characters. This is standard.
This was specific to the sample API being used, your API will require different parameters.
Your API doesn't need the lat/lon parameters, so you can omit them.
The sourceIndex is the index of the search source being referenced. This is given to you in the parameters of the getSuggestions method.

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search-SearchSource.html#GetSuggestionsParameters

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.

https://codepen.io/odoe/pen/QWmpVdQ?editors=0011

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.