Airports Geo Search

This demo indexes 78K Airports around the world and lets you browse them on a map, search by airport details, and filter by a variety of parameters like airport type, elevation, number of runways, etc.

This implementation uses Next.js with React for the frontend and uses react-instantsearch (opens new window) with typesense-instantsearch-adapter (opens new window) for making search queries to Typesense.

Live Demo (opens new window) | Source Code (opens new window)

Key Highlights

• Here's (opens new window) how to configure the typesense-instantsearch-adapter for geo search.
• Here's (opens new window) how to render the results returned from Typesense as custom markers on Google Maps.
• Here's (opens new window) how to perform the search when the user pans the map.
• Here's (opens new window) how to automatically pan the map to first match from search results.
• Here's (opens new window) how to read map bounds from the URL on first page load when routing is enabled on react-instantsearch to store search parameters in the URL.
• Here's (opens new window) how to use refinement lists for filtering.
• Here's (opens new window) how to use range sliders for filtering.