javascriptreactjsesriarcgis-js-api
How to put queries in ArcGIS esri search?
I have my own query in search, How can i disable the default search function in ArcGIS search widget and apply mine?
my current code
const location = () => {
const map = new Map({
basemap: 'arcgis-light-gray',
});
const view = new MapView({
center: [123.5504, 12.3574], // Longitude, latitude
container: mapDiv.current,
map: map,
zoom: 2, // Zoom level
ui: {
components: ["attribution"] // removes default widgets except for attribution
}
});
var zoom = new Zoom({
view: view,
layout: "vertical"
});
view.ui.add(zoom, "bottom-right");
view
.when((r) => {})
.then(() => {
mapDiv.current = view;
search();
});
}
const search = () => {
const searchWidget = new Search();
mapDiv.current.ui.add(searchWidget, { position: "top-left", index: 2 });
}
this is the sample search widget in arcGIS, I want to override the search function, that the only thing that can be searched is the data in my query and it will appear just like in the picture
resource
https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html
Solution
You need to create a custom SearchSource that pulls suggestions and results from your data, and set it as a source for your searchWidget.
Things you need to implement:
SearchSource- search source that uses your data.getSuggestions[returnspromise] - Proivdes list of suggestions from your sourcegetResults[returnspromise] - Provides list of search results from your source.
Implementation:
I modified this sample code for search widget with custom source provided with official docs
As you can see that getSuggestions and getResults both returns a promise as it is designed to access remote data with api's. But as your data is stored locally, you need to create a promise object that resolves to your data.
Test Data you provided me:
const test_data = {
allIBLocations: {
data: [
{
id: 'e53be02e-4cdb-11ec-81d3-0242ac130003',
status: 'Incomplete',
name: 'Revere - 2',
externalId: '547e2f43-b950-4b5e-ada4-7fcc110a3785',
ownerId: '494bd1c4-6d28-4a42-9d98-515129fde2b9',
owner: {
id: '494bd1c4-6d28-4a42-9d98-515129fde2b9',
},
orgId: 'd7d931d4-289d-49b1-bd88-29d0317b6987',
deletedBy: null,
deletedAt: null,
updatedBy: null,
updatedAt: '2021-12-15T03:43:00.787Z',
ibLocationType: {
name: 'Shared Office',
},
ibLocationTypeId: 'e53bca08-4cdb-11ec-81d3-0242ac130003',
capacity: null,
phoneNumber: null,
address: {
street1: 'Nitzsche Burg',
street2: 'Emiliano Camp',
city: 'Rowlandtown',
state: 'Kentucky',
zipCode: '41738',
country: 'Kuwait',
},
geoCode:{
latitude:-23.0633,
longitude:15.0875
}
// geoCode: null,
},
{
id: 'e53be45c-4cdb-11ec-81d3-0242ac130003',
status: 'Incomplete',
name: 'Jersey City - 4',
externalId: '1fb7c170-f794-4c85-9a3b-57b8013a2821',
ownerId: '494bd1c4-6d28-4a42-9d98-515129fde2b9',
owner: {
id: '494bd1c4-6d28-4a42-9d98-515129fde2b9',
},
orgId: 'd7d931d4-289d-49b1-bd88-29d0317b6987',
deletedBy: null,
deletedAt: null,
updatedBy: null,
updatedAt: '2021-12-15T03:43:00.788Z',
ibLocationType: {
name: 'Warm Site',
},
ibLocationTypeId: 'e53bcf80-4cdb-11ec-81d3-0242ac130003',
capacity: null,
phoneNumber: null,
address: {
street1: 'Madisen Club',
street2: 'Cyrus Courts',
city: 'East Breanamouth',
state: 'Kentucky',
zipCode: '05565-8531',
country: 'Solomon Islands',
},
geoCode:{
latitude:51.6617,
longitude:-4.5789
}
// geoCode: null,
},
{
id: 'e53be510-4cdb-11ec-81d3-0242ac130003',
status: 'Incomplete',
name: 'Wellington - 5',
externalId: '479e2dc0-b55d-42fd-978b-9d9086216a5f',
ownerId: '494bd1c4-6d28-4a42-9d98-515129fde2b9',
owner: {
id: '494bd1c4-6d28-4a42-9d98-515129fde2b9',
},
orgId: 'd7d931d4-289d-49b1-bd88-29d0317b6987',
deletedBy: null,
deletedAt: null,
updatedBy: null,
updatedAt: '2021-12-15T03:43:00.788Z',
ibLocationType: {
name: 'Hospital',
},
ibLocationTypeId: 'e53bbf40-4cdb-11ec-81d3-0242ac130003',
capacity: null,
phoneNumber: null,
address: {
street1: 'Carter Pass',
street2: 'Gutmann Brooks',
city: 'Paterson',
state: 'New Jersey',
zipCode: '79928-2470',
country: 'Cyprus',
},
geoCode: {
latitude: 51.0899,
longitude: 67.9272,
},
},
{
id: 'e53be7e0-4cdb-11ec-81d3-0242ac130003',
status: 'Incomplete',
name: 'Doral - 9',
externalId: 'b096ed12-fed2-4a9b-8e61-5c2639b7b7d8',
ownerId: '494bd1c4-6d28-4a42-9d98-515129fde2b9',
owner: {
id: '494bd1c4-6d28-4a42-9d98-515129fde2b9',
},
orgId: 'd7d931d4-289d-49b1-bd88-29d0317b6987',
deletedBy: null,
deletedAt: null,
updatedBy: null,
updatedAt: '2021-12-15T03:43:00.789Z',
ibLocationType: {
name: 'Warehouse',
},
ibLocationTypeId: 'e53bcc24-4cdb-11ec-81d3-0242ac130003',
capacity: null,
phoneNumber: null,
address: {
street1: 'Koelpin Lodge',
street2: 'Ana Tunnel',
city: 'Carsonside',
state: 'Maine',
zipCode: '44431',
country: 'Guatemala',
},
geoCode: {
latitude: 0.181,
longitude: 47.7937,
},
// "geoCode": null
},
{
id: 'e53bec7c-4cdb-11ec-81d3-0242ac130003',
status: 'Incomplete',
name: 'Bossier City - 13',
externalId: '486d4838-bb19-4b29-b4d0-1b492762ebe8',
ownerId: '494bd1c4-6d28-4a42-9d98-515129fde2b9',
owner: {
id: '494bd1c4-6d28-4a42-9d98-515129fde2b9',
},
orgId: 'd7d931d4-289d-49b1-bd88-29d0317b6987',
deletedBy: null,
deletedAt: null,
updatedBy: null,
updatedAt: '2021-12-15T03:43:00.790Z',
ibLocationType: {
name: 'Hospital',
},
ibLocationTypeId: 'e53bbf40-4cdb-11ec-81d3-0242ac130003',
capacity: null,
phoneNumber: null,
address: {
street1: 'Lakin Throughway',
street2: 'Zulauf Island',
city: 'Casa Grande',
state: 'Illinois',
zipCode: '68798',
country: 'Mayotte',
},
geoCode:{
latitude:84.2091,
longitude:147.886
}
// geoCode: null,
},
{
id: 'f14e81b4-e932-4d8e-900e-bfbff065aa0e',
status: 'Incomplete',
name: 'loc3',
externalId: 'locId3',
ownerId: 'db1a73a2-498b-43c8-9185-424cda7ea272',
owner: {
id: 'db1a73a2-498b-43c8-9185-424cda7ea272',
},
orgId: 'd7d931d4-289d-49b1-bd88-29d0317b6987',
deletedBy: null,
deletedAt: null,
updatedBy: null,
updatedAt: '2021-12-15T03:48:14.815Z',
ibLocationType: null,
ibLocationTypeId: null,
capacity: 0,
phoneNumber: 0,
address: {
street1: 'add1',
street2: '',
city: '',
state: '',
zipCode: '',
country: 'Anguilla',
},
geoCode: null,
},
{
id: '9ceb84ec-aaeb-43af-9b26-11d8ae360625',
status: 'Incomplete',
name: 'loc2',
externalId: 'locId2',
ownerId: 'db1a73a2-498b-43c8-9185-424cda7ea272',
owner: {
id: 'db1a73a2-498b-43c8-9185-424cda7ea272',
},
orgId: 'd7d931d4-289d-49b1-bd88-29d0317b6987',
deletedBy: null,
deletedAt: null,
updatedBy: null,
updatedAt: '2021-12-15T03:45:12.722Z',
ibLocationType: null,
ibLocationTypeId: null,
capacity: 0,
phoneNumber: 0,
address: {
street1: 'add1',
street2: '',
city: '',
state: '',
zipCode: '',
country: 'Albania',
},
geoCode: null,
},
{
id: '74b322b3-525f-4e76-b002-2997e9a9a8e1',
status: 'Incomplete',
name: 'loc5',
externalId: 'locId5',
ownerId: 'db1a73a2-498b-43c8-9185-424cda7ea272',
owner: {
id: 'db1a73a2-498b-43c8-9185-424cda7ea272',
},
orgId: 'd7d931d4-289d-49b1-bd88-29d0317b6987',
deletedBy: null,
deletedAt: null,
updatedBy: null,
updatedAt: '2021-12-15T03:57:41.612Z',
ibLocationType: null,
ibLocationTypeId: null,
capacity: 0,
phoneNumber: 0,
address: {
street1: 'add',
street2: '',
city: '',
state: '',
zipCode: '',
country: 'Anguilla',
},
geoCode: null,
},
{
id: '125b0fc8-b91a-42b2-90b3-c37b9afdfa36',
status: 'Incomplete',
name: 'loc1',
externalId: 'locId1',
ownerId: 'db1a73a2-498b-43c8-9185-424cda7ea272',
owner: {
id: 'db1a73a2-498b-43c8-9185-424cda7ea272',
},
orgId: 'd7d931d4-289d-49b1-bd88-29d0317b6987',
deletedBy: null,
deletedAt: null,
updatedBy: null,
updatedAt: '2021-12-15T03:43:34.697Z',
ibLocationType: null,
ibLocationTypeId: null,
capacity: 0,
phoneNumber: 0,
address: {
street1: 'add1',
street2: '',
city: '',
state: '',
zipCode: '',
country: 'Albania',
},
geoCode: null,
},
{
id: '3375b2d3-13cd-401c-b79b-21cbdb956b15',
status: 'Incomplete',
name: 'loc7',
externalId: 'locId7',
ownerId: 'db1a73a2-498b-43c8-9185-424cda7ea272',
owner: {
id: 'db1a73a2-498b-43c8-9185-424cda7ea272',
},
orgId: 'd7d931d4-289d-49b1-bd88-29d0317b6987',
deletedBy: null,
deletedAt: null,
updatedBy: null,
updatedAt: '2021-12-15T04:02:11.694Z',
ibLocationType: null,
ibLocationTypeId: null,
capacity: 0,
phoneNumber: 0,
address: {
street1: 'add',
street2: '',
city: '',
state: '',
zipCode: '',
country: 'Albania',
},
geoCode: null,
},
{
id: '76af916a-d42c-43a8-a945-3832bb9a4047',
status: 'Incomplete',
name: 'loc6',
externalId: 'locId6',
ownerId: 'b9e7b94f-d3a7-460d-afb7-34e277df3aec',
owner: {
id: 'b9e7b94f-d3a7-460d-afb7-34e277df3aec',
},
orgId: 'd7d931d4-289d-49b1-bd88-29d0317b6987',
deletedBy: null,
deletedAt: null,
updatedBy: null,
updatedAt: '2021-12-15T04:00:02.946Z',
ibLocationType: null,
ibLocationTypeId: null,
capacity: 0,
phoneNumber: 0,
address: {
street1: 'add',
street2: '',
city: '',
state: '',
zipCode: '',
country: 'Albania',
},
geoCode: null,
},
{
id: 'cf688233-f48d-4566-a4e9-5f208d6afb71',
status: 'Incomplete',
name: 'loc4',
externalId: 'locId4',
ownerId: 'db1a73a2-498b-43c8-9185-424cda7ea272',
owner: {
id: 'db1a73a2-498b-43c8-9185-424cda7ea272',
},
orgId: 'd7d931d4-289d-49b1-bd88-29d0317b6987',
deletedBy: null,
deletedAt: null,
updatedBy: null,
updatedAt: '2021-12-15T03:53:28.203Z',
ibLocationType: null,
ibLocationTypeId: null,
capacity: 0,
phoneNumber: 0,
address: {
street1: 'add1',
street2: '',
city: '',
state: '',
zipCode: '',
country: 'Albania',
},
geoCode: null,
},
],
},
};
const testData = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(test_data); //test_data = Your data.
}, 1000);
});
Now that you have a promise that resolves to your data, you can use it to get suggestions and results from.
const customSearchSource = new SearchSource({
placeholder: 'Search',
getSuggestions: (params) => {
return testData.then((data) => {
var results = [];
var toSearch = params.suggestTerm;
data = data["allIBLocations"]["data"];
for(var i=0; i<data.length; i++) {
if(data[i]["name"].indexOf(toSearch)!=-1) {
results.push(data[i]);
}
}
return results.map((feature) => {
return {
key: "name",
text: feature.name,
sourceIndex: params.sourceIndex
};
})
});
},
getResults: (params) => {
return testData.then((data) => {
var results = [];
var toSearch = params.suggestResult.text;
data = data["allIBLocations"]["data"];
for(var i=0; i<data.length; i++) {
if(data[i]["name"].indexOf(toSearch)!=-1) {
results.push(data[i]);
}}
const searchResults = results.map((feature) => {
console.log(feature)
const graphic = new Graphic({
geometry: new Point({
latitude: feature.geoCode.latitude,
longitude: feature.geoCode.longitude
}),
attributes: feature.address
});
const buffer = geometryEngine.geodesicBuffer(
graphic.geometry,
100,
"meters"
);
const searchResult = {
extent: buffer.extent,
feature: graphic,
name: feature["name"]
};
return searchResult;
});
return searchResults;
});
}
});
And finally set the customSearchSource as a source in your searchWidget, also disable default source to force searchWidget to use the source that you provide.
const searchWidget = new Search({
view: view,
sources: [customSearchSource],
includeDefaultSources: false
});
Live Demo
- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices