Map Search

If you're an avid hiker or just looking for a new adventure, Trailhawk is the perfect app for you. Trailhawk lets you discover the best of the U.S. State Parks and National Parks. From casual hiking trails to treks spanning over 2000 miles, Trailhawk has you covered.

Available Locations

Hiking Trail/State Park	State	Est. Distance	Annual Visitors
Starved Rock State Park	Illinois	13 Miles	2,100,000
Matthiessen State Park	Illinois	5 Miles	3,000,000
Ferne Clyffe State Park	Illinois	75 Miles	200,000
Crater Rim Trail	Hawaii	21 Miles	15,000
Red Rock Canyon	Nevada	13 Miles	4,000,000
Great Smokey Mountains	Tennessee	500 Miles	14,137,812
Pictured Rocks National Lakeshore	Michigan	42 Miles	1,200,000
Yellowstone National Park	Wyoming	900 Miles	3,000,000
Rubicon Trail	California	22 Miles	~5,000,000
Grand Teton	Wyoming	35 Miles	3,000,000
Point Lobos State Natural Reserve	California	5 Miles	600,000
Haleakala National Park	Hawaii	11 Miles	853,181
Rocky Mountain National Park	Colorado	350 Miles	4,500,000
Zion National Park	Utah	90 Miles	4,500,000
Bryce Canyon	Utah	20 Miles	1,500,000
Glacier National Park	Montana	700 Miles	2,908,458
Grand Canyon	Arizona	21 Miles	4,730,000
Badlands National Park	South Dakota	80 Miles	1,006,809
Joshua Tree National Park	California	60 Miles	3,064,400
Continental Divide Trail	New Mexico	3100 Miles	100,000
Appalachian Trail	Vermont	2198 Miles	3,000,000
Pacific Crest Trail	California	2650 Miles	400,000
Smith Rock State Park	Oregon	3 Miles	747,000
John Muir Trail	California	219 Miles	10,000
Mt. Whitney Trail	California	22 Miles	4,000,000
Yosemite National Park	California	750 Miles	3,667,550
Tongass National Park	Alaska	700 Miles	1,881,000

Getting Started

To run the application locally, follow the steps below

1. Create an empty directory on your desktop

2. Clone the repository into the folder locally by using git clone:

   git clone https://github.com/bartswierz/map-search.git
   

3. Navigate into the directory

   cd map-search
   

4. Navigate into the directory

   npm install
   

5. You can run this app now with(Google Map Dev Mode)

   npm run dev
   

   Optional: If you would like to experience the app with the best experience you can add a GOOGLE API KEY to remove the Developer Mode Overlay:

   1. Get An Google API Key(~1-2 Minutes)

      https://developers.google.com/maps/documentation/javascript/get-api-key
      

   2. Create an .env file at the root directory

   3. Paste your API KEY inside .env

      VITE_GOOGLE_API_KEY=YOUR_API_KEY
      

   4. The google map will now be displayed without the developer mode overlay! Enjoy!

Built With

• React.js
• Tailwind CSS
• Redux
• Chart.js

Individual Packages & Resources Used

• React-Leaflet Installation - https://react-leaflet.js.org/docs/start-installation/
• Startup Code - https://react-leaflet.js.org/docs/start-setup/

npm install react react-dom leaflet react-leaflet

React-Leaflet-Google-Layer - Required to use google maps. Pass the API KEY within the ReactLeafletGoogleLayer component

npm install --save react-leaflet-google-layer

Tailwind Installation - VITE: https://tailwindcss.com/docs/guides/vite

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Redux Installation - https://redux-toolkit.js.org/tutorials/quick-start

npm install @reduxjs/toolkit react-redux

CHART.JS Installation - https://www.chartjs.org/docs/latest/getting-started/installation.html

npm install chart.js react-chartjs-2

GOOGLE MAPS API - https://developers.google.com/maps/documentation/javascript/overview

Possible Future Features:

• Favorites: Allow users to save the hiking trails they liked from the results list. This would require a unique id for each hiking trail and a database(would also require a sign in feature to keep track of user data) or local storage to persist the data when user closes the application.

• Suggest Me Something: A useful option for an eager hiker who is having a difficult time deciding between all the great hiking trails and state parks. This would select a hiking trail at random from the available locations for them if they can't decide.