Trail AI Ontario

Trail AI Ontario is a React, TypeScript, and Vite web app for finding hiking trails across Ontario. It combines an interactive Leaflet map, trail filters, weather forecasts, optional elevation data, and OpenAI-powered recommendations to help users choose trails that fit their plans.

Project Review

This project is a practical trail discovery tool rather than a static directory. Users can search Ontario trail data, filter by distance, length, estimated time, elevation gain, difficulty, trail type, features, and crowd level, then view matching trails on a map and in a recommendation panel.

The strongest part of the app is the recommendation flow: local trail data is filtered first, weather is fetched for trail candidates, and OpenAI is used to rank a small set of relevant trails with short explanations. That keeps the AI focused on real candidate trails instead of inventing results. The app also includes caching and request queueing for external data, which helps keep the interface responsive.

The main thing to watch is that the OpenAI API key is currently used through a Vite client environment variable. This is convenient for development, but any VITE_ variable is exposed to browser code. For production, move OpenAI calls behind a backend endpoint so the key is not shipped to users.

Features

• Interactive Ontario trail map powered by Leaflet and React Leaflet
• Search and filtering for trail preferences
• AI-assisted trail ranking using OpenAI
• Weather forecast data from Open-Meteo
• Optional local elevation service support
• Trail detail modal with route information
• Responsive side panels for filters and recommendations

Tech Stack

• React 19
• TypeScript
• Vite
• Leaflet and React Leaflet
• OpenAI Chat Completions API
• Open-Meteo weather API

Prerequisites

• Node.js 20.19 or newer, or Node.js 22.12 or newer
• npm
• An OpenAI API key

Setup

1. Install dependencies

npm install

2. Create a .env file

Create a .env file in the project root:

touch .env

Add your OpenAI API key:

VITE_OPENAI_API_KEY=your_openai_api_key_here

Restart the dev server after changing .env values.

3. Download the trail dataset

Download the Ontario Trail Network segment data from one of these official sources:

• Ontario Trail Network - Ontario Data Catalogue
• Ontario Trail Network (OTN) Segment - ArcGIS

Export or download the segment dataset as GeoJSON, then place it in the public folder with this exact filename:

public/Ontario_Trail_Network_(OTN)_Segment.geojson

The app looks for that file when loading trail data.

4. Run the development server

npm run dev

Vite will print a local URL, usually:

http://localhost:5173

Open that URL in your browser.

Available Scripts

npm run dev

Starts the local Vite development server.

npm run build

Type-checks the project and creates a production build.

npm run preview

Serves the production build locally for previewing.

npm run lint

Runs ESLint.

npm run preprocess:elevation

Runs the elevation preprocessing script.

Optional Elevation Service

The repository includes elevation-related files:

• elevation_service.py
• Dockerfile.opentopodata
• docker-compose.yml
• ELEVATION_SETUP.md

For elevation setup details, see ELEVATION_SETUP.md.

Troubleshooting

If AI recommendations are unavailable, check that:

• .env exists in the project root
• VITE_OPENAI_API_KEY is spelled exactly as shown
• the dev server was restarted after editing .env
• the API key is valid and has access to the model used by src/services/openaiService.js

If the app fails to build or start with a Vite or node:util error, check your Node version:

node --version

Use Node.js 20.19 or newer, or Node.js 22.12 or newer.

If weather data is unavailable, the app can still be used without weather-enhanced recommendations.