sel-custom-app-bar

Custom ESRI Search Documentation

Overview

CustomEsriSearch is a React component that provides a dynamic search interface with autocomplete suggestions. It is designed to search within observing sites, researchers, or keywords. The component leverages Material-UI for styling and icons, and it includes custom hooks and helper functions to manage search functionality.

The Search folder contains all the files related to the CustomEsriSearch. This includes the main component file, any related sub-components, utility functions, tests, and styles.

Installation

To install the SearchComponent, you need to have npm or yarn installed. You can then install the package and its dependencies.

Using npm:

npm i sel-custom-esri-search

Props

The SearchComponent takes the following props:

• view: An object representing the map view or context where the search will be performed.
• searchFields: An array of strings representing the fields to search within.
• featureLayer: An object representing the feature layer or data source.

Usage

import React from "react";
import CustomEsriSearch from "sel-custom-esri-search";

function App() {
  // Define the props required for the SearchComponent
  const view = {}; // Your map view or context
  const searchFields = ["field1", "field2"]; // Fields to search within
  const featureLayer = {}; // Your feature layer or data source

  return (
    <div className="App">
      <CustomEsriSearch
        view={view}
        searchFields={searchFields}
        featureLayer={featureLayer}
      />
    </div>
  );
}

export default App;

Internal Functions

onClear

• Clears the current search input and resets the search results.

onSearch

• Handles the search input change, updates the state, and triggers the search query if the input length is greater than or equal to 3 characters.

onSuggestion

• Handles the selection of a suggestion from the autocomplete list, hides the suggestions, and triggers the getSuggestion function.

Hooks

useWithSearch: Custom hook used within SearchComponent to manage search state and actions. It returns the following:

• onSearchClear: Function to clear the search.
• buildQuery: Function to build and execute the search query.
• getSuggestion: Function to get the selected suggestion.
• suggestions: Array of suggestions based on the search input.