Wednesday, 22 December 2021

Query esri search widget

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

const [searchData, setSearchData] = useState(null);
const fetchSearchLocation = async (name) => {
const { data } = await client.query({  
  query: SEARCH_LOCATION,
  variables: {
    name: name    
  },
})
setSearchData(data);

return data;
};

  useEffect(() => {
    location();
  }, []);

 const location = () => {
    if (mapDiv.current) {
      esriConfig.apiKey = "sample api key";
      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
      });
      const searchWidget = new Search({
        view: view,
        sources: [customSearchSource],
        includeDefaultSources: false
      });
  
      view.ui.add(searchWidget, { position: "top-left", index: 0 });
      view
        .when((r) => {})
        .then(() => {
          mapDiv.current = view;
          fetchData();
        });
    }
  };

  const searchDataLocation = new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("searchData: ", searchData)
        resolve(searchData); //test_data = Your data.
    }, 1000);
  });

  const customSearchSource = new SearchSource({
    placeholder: 'Search',
    getSuggestions: (params) => {
       fetchSearchLocation(params.suggestTerm)
       console.log("searchData2: ", searchData)
        return searchDataLocation.then((data) => {
        console.log("datas: ", data) // the result is null.
      })
   ....

enter image description here

resource

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

How to put queries in ArcGIS esri search?

note: this is edited question



from Query esri search widget

No comments:

Post a Comment