ExploreTracks is a fully responsive interactive global map platform for wildlife enthusiasts. It combines live nature cameras from explore.org with real-time animal tracking telemetry from Movebank, letting you observe wildlife in real-time across the globe on any device.
Live Demo: explore-tracks.vercel.app
- Interactive Global Map — Multiple base-map styles (Dark, Voyager, Light, Satellite), powered by MapLibre GL JS and CartoDB.
- Live Wildlife Cameras — Up to 50 concurrent live streams from explore.org, automatically geo-located via a title-keyword dictionary.
- Desktop: draggable, resizable floating video windows (up to 12 open simultaneously).
- Mobile: full-width bottom tray with tab switching between open cameras.
- Real-Time Animal Tracks — GPS movement tracks from Movebank (bears, eagles, etc.) and OBIS (Ocean Biodiversity Information System for marine species like whales, sharks, penguins). Data is dynamically fetched with robust caching and offline static fallbacks to avoid API rate limits.
- Danmaku Overlay — YouTube Live Chat messages float across the video as danmaku (toggleable, default off).
- Global Chat Room — Desktop: draggable resizable floating window. Mobile: slide-up bottom sheet.
- Filter and Search — Filter by camera category or animal type; free-text search by name or location.
- Fully Responsive (RWD) — Optimised for phones, tablets, and desktops with a hamburger navigation on mobile.
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router, React Server Components) |
| Styling | Tailwind CSS |
| Map Engine | MapLibre GL JS |
| Base Maps | CartoDB (free, no API key required) |
| Live Cameras | YouTube Data API v3 |
| Animal Telemetry | Movebank REST API |
| Floating UI | react-rnd |
| Data Fetching | SWR |
| Deployment | Vercel |
git clone https://github.com/Onyzelabs/ExploreTracks.git
cd ExploreTracksnpm installCreate a .env.local file in the root directory:
# YouTube Data API v3 key (for fetching live cameras and danmaku chat)
YOUTUBE_API_KEY=your_youtube_api_key
# Movebank credentials (for fetching animal telemetry tracks)
MOVEBANK_USERNAME=your_movebank_username
MOVEBANK_PASSWORD=your_movebank_password
MOVEBANK_STUDY_IDS=2911040,21231406,9651291
# Google Analytics Measurement ID (Optional)
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXXNote: Both services have graceful fallbacks. Without
YOUTUBE_API_KEYor when the daily quota (100 Search queries) is exhausted, the app falls back tosrc/data/seed-cameras.json— a snapshot of the last successful 50-camera fetch. Movebank tracks are always served directly fromsrc/data/seed-tracks.json. You only need Movebank credentials when you manually run the script to refresh the data.
npm run devOpen http://localhost:3000 in your browser.
- Import your GitHub repository to Vercel.
- In Project Settings > Environment Variables, add all keys from your
.env.local. - Click Deploy.
Next.js API routes proxy all credentials server-side, so API keys are never exposed to the browser.
When the YouTube API quota resets (midnight PT) and cameras are loading correctly, run the following to update the fallback snapshot committed to the repository:
node scripts/refresh-seed-cameras.js
git add src/data/seed-cameras.json
git commit -m "chore: refresh seed cameras snapshot"
git pushAnimal tracking data is fetched from the Movebank API and the OBIS API. Because Movebank has aggressive rate limiting, the primary data is baked into a static JSON seed file. The API route will attempt to fetch dynamic OBIS data on the fly, but you can manually update the seed snapshot by running:
npm run update-tracks
git add src/data/seed-tracks.json
git commit -m "chore: update animal tracks data"
git push| Endpoint | Daily Limit | Usage per request |
|---|---|---|
| YouTube Search | 100 queries | 1 query per cache miss (TTL: 60 min) |
| YouTube Videos | 10,000 queries | 1 query per open video (danmaku) |
| Movebank | Rate-limited | 0 at runtime (updated offline via script) |
Open-source. Map data copyright OpenStreetMap contributors and CartoDB. Animal telemetry copyright Movebank. Live streams copyright explore.org.