(
+
+ {currentStep}
+ {' '}
+ OF
+ {maxSteps}
+
+)
+
+StepCounter.propTypes = {
+ currentStep: PropTypes.number.isRequired,
+ maxSteps: PropTypes.number.isRequired
+}
+
+const TourButtons = ({ stepIndex, setStepIndex }) => (
+
+ setStepIndex(stepIndex - 1)}
+ >
+ Previous
+
+ setStepIndex(stepIndex + 1)}
+ >
+ Next
+
+
+)
+
+TourButtons.propTypes = {
+ stepIndex: PropTypes.number.isRequired,
+ setStepIndex: PropTypes.func.isRequired
+}
+
+const SearchTour = ({ runTour, setRunTour }) => {
+ const [stepIndex, setStepIndex] = useState(0)
+ const MAX_STEPS = 12
+
+ useEffect(() => {
+ const dontShowTour = localStorage.getItem('dontShowTour')
+ if (dontShowTour === 'true') {
+ setRunTour(false)
+ }
+ }, [setRunTour])
+
+ useEffect(() => {
+ const handleKeyDown = (event) => {
+ if (event.key === 'ArrowRight') {
+ setStepIndex((prevIndex) => Math.min(prevIndex + 1, MAX_STEPS + 1))
+ } else if (event.key === 'ArrowLeft') {
+ setStepIndex((prevIndex) => Math.max(prevIndex - 1, 0))
+ }
+ }
+
+ window.addEventListener('keydown', handleKeyDown)
+
+ return () => {
+ window.removeEventListener('keydown', handleKeyDown)
+ }
+ }, [])
+
+ useEffect(() => {
+ if (runTour) {
+ setStepIndex(0)
+ }
+
+ localStorage.setItem('dontShowTour', runTour ? 'false' : 'true')
+ }, [runTour])
+
+ useEffect(() => {
+ if (stepIndex === 6) { // Scrolling to the top to ensure "Browse Portals" is visible.
+ const element = document.querySelector('.sidebar__content .simplebar-content-wrapper')
+ if (element) {
+ element.scrollTop = 0
+ }
+ }
+ }, [stepIndex])
+
+ const steps = [
+ {
+ target: '.search',
+ content: (
+
+
Welcome to Earthdata Search!
+
Let’s start with a quick tour...
+
+ Get acquainted with Earthdata Search by taking our guided tour, where you’ll learn
+ how to search for data, use the map, create your first project, and manage your
+ preferences.
+
+
+ If you want to skip the tour for now, it is always available by clicking
+ {' '}
+ Show Tour
+ {' '}
+ at the top of the page.
+
+
+ {
+ setStepIndex(stepIndex + 1)
+ }
+ }
+ >
+ Take the tour
+
+ {
+ setRunTour(false)
+ setStepIndex(0)
+ }
+ }
+ >
+ Skip for now
+
+
+
+
+
+ This area contains the filters used when searching for collections
+ (datasets produced by an organization)
+ and their granules (sets of files containing data).
+
+
+ Available filters include keyword search, spatial and temporal bounds,
+ and advanced search options.
+
+
+
+
+
+ Search for collections by topic (e.g., "Land Surface Temperature"),
+ by collection name, or by CMR Concept ID.
+
+
+ As you type, suggestions for matching topics and keywords will be
+ displayed. When selected, they will be applied as additional search filters.
+
+
+
+ Find more information about the
+ {' '}
+
+ Common Metadata Repository (CMR)
+
+
+
+
+
+
+
+ Use the temporal filters to limit search results to a specific date
+ and time range.
+
+
+ A recurring filter can be applied to search a repeating range between
+ specified years.
+
+
+
+
+
+ Use the spatial filters to limit search results to the specified
+ area of interest.
+
+
+ To set the spatial area using a polygon, rectangle, point and radius,
+ or circle, select an option from the menu and then draw on the map
+ or manually enter coordinates.
+
+
+ Upload a shapefile (KML, KMZ, ESRI, etc.) to set the spatial area with
+ a file.
+
+
+
+
+
+ Use Advanced Search parameters to filter results using features like
+ Hydrologic Unit Code (HUC) or SWORD River Reach.
+
+
+
+
+
+ Choose a portal to refine search results to a particular area of study,
+ project, or organization.
+
+
+
+
+
+ Refine your search further using categories like Features, Keywords,
+ Platforms, Organizations, etc.
+
+
+
+
+
+ A high-level description is displayed for each search result to help you find
+ the right data, including a summary, temporal range, and information about
+ capabilities. To view more information about a collection, click the
+ {' '}
+
+
+ Add granules to a project and customize options before accessing the data.
+ To add a collection to your project, click the
+ {' '}
+
+
+
+
+
+ To make more room to view the map, the search results can be resized by clicking
+ or dragging the bar above. The panel can be hidden or shown by clicking the
+ handle or using the
+ {' '}
+ ]
+ {' '}
+ key.
+
+
+
+ All keyboard shortcuts can be displayed by pressing the
+ {' '}
+ ?
+ {' '}
+ key at any time.
+
+
+
+
+
+
+ Pan the map by clicking and dragging, and zoom by using the scroll wheel or
+ map tools.
+
+
+ When a collection is selected, the granules will be displayed on the map,
+ along with any available GIBS imagery. When a granule is focused on the
+ map, any additional thumbnails will be displayed.
+
+
+
+
+
+ Use the map tools to switch map projections, draw, edit, or remove spatial
+ bounds, zoom the map, or select the base map.
+
+
+
+
+
+ You can replay this tour anytime by clicking
+ {' '}
+ Show Tour
+ .
+
+
+ {
+ setStepIndex(stepIndex - 1)
+ }
+ }
+ >
+ Previous
+
+ {
+ setStepIndex(stepIndex + 1)
+ }
+ }
+ >
+ Finish Tour
+
+
+
+
+ Want to learn more?
+
+
+ Check out our latest webinar where you will see a hands-on example of
+ how to search for data in Earthdata Search.
+
+
+
+
+
+
+
+ Discover and Access Earth Science Data Using Earthdata Search
+
+
+
+ Watch the webinar
+
+
+
+
+
+ Find more information here:
+
+
+
+ Earthdata Search wiki
+
+
+
+
+ Earthdata Search FAQs
+
+
+