This sample demonstrates how to create a custom search source to use the with the Search component. The Search component provides the capability to provide search capabilities to third-party services. The level of detail (LOD) at the center of the map depends on the data source, with higher quality data sources returning extents closer to the feature obtained from the search.
To use a custom source with the search component, you must set the component's sources property with your own custom source.
To create a custom search source, you need to construct a search source with on object containing two functions, getSuggestions and getResults.
In these two functions, you can determine how to return a list of suggestions to display in the Search component and how to obtain and return the results.
const customSearchSource = new SearchSource({
placeholder: "example: 8 Boulevard",
// Provide a getSuggestions method
// to provide suggestions to the Search component
getSuggestions: (params) => {
// You can request data from a
// third-party source to find some
// suggestions with provided suggestTerm
// the user types in the Search component
return esriRequest(url + "search/", {
query: {
q: params.suggestTerm.replace(/ /g, "+"),
limit: 6,
lat: viewElement.center.latitude,
lon: viewElement.center.longitude,
},
responseType: "json",
}).then((results) => {
// Return Suggestion results to display
// in the Search component
return results.data.features.map((feature) => {
return {
key: feature.properties.id,
text: feature.properties.label,
sourceIndex: params.sourceIndex,
};
});
});
},
// Provide a getResults method to find
// results from the suggestions
getResults: (params) => {
// If the Search component passes the current location,
// you can use this in your own custom source
const operation = params.location ? "reverse/" : "search/";
let query = {};
// You can perform a different query if a location
// is provided
if (params.location) {
query.lat = params.location.latitude;
query.lon = params.location.longitude;
} else {
query.q = params.suggestResult.text.replace(/ /g, "+");
query.limit = 6;
}
return esriRequest(url + operation, {
query: query,
responseType: "json",
}).then((results) => {
// Parse the results of your custom search
const searchResults = results.data.features.map((feature) => {
// Create a Graphic the Search component can display
const graphic = new Graphic({
geometry: new Point({
x: feature.geometry.coordinates[0],
y: feature.geometry.coordinates[1],
}),
attributes: feature.properties,
});
// Create a buffer to apply to the search result.
// Optionally, you can provide an extent for
// a point result, so the view can zoom to it
const buffer = geodesicBufferOperator.execute(graphic.geometry, 120, {
unit: "meters",
});
// Return a Search result using the buffer's extent
const searchResult = {
extent: buffer.extent,
feature: graphic,
name: feature.properties.label,
};
return searchResult;
});
// Return an array of Search Results
return searchResults;
});
},
});