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
- how can i get element height in javascript
- Check if an image is loaded (no errors) with jQuery
- Library to calculate date in Javascript
- React Not Found The requested URL was not found on this server
- Import third party js files to angular typescript project
- Checking if a word in string contains a palindrome
- Array to JSON array of strings
- Setting focus of an input element in vue.js
- Deleting `package-lock.json` to Resolve Conflicts quickly
- how to remove json object key and value.?
- Implementing attributeChangedCallback in Typescript?
- Is it possible to check if certain CSS properties are defined inside the style tag with Javascript?
- How to create a simple component inline?
- Customise button labels on JavaScript "confirm" dialog
- Check for Table null in Jquery for JSON response
- Uncaught SyntaxError: Unexpected token :
- Get the last hash after the hash has changed
- jQuery how to add image from computer
- get current Material UI breakpoint name
- How to list npm user-installed packages?
- Is TypeScript really a superset of JavaScript?
- Can't run "node index.js" due to a syntaxError
- npm install takes forever when running docker-compose
- FormData vs jQuery#serialize(), What is the difference?
- Function onEdit(e) works only for single cell edit
- css animate from top to center
- "Text strings must be rendered within a <Text> component"
- $(document).ready equivalent without jQuery
- How to set multiple colors for bars in ApexCharts horizontal bar chart (sparkline mode)?
- ReactJS localstorage.getItem is not working