--- title: Pathfinder: A Modern Mapping App with Next.js 15 and... description: Pathfinder is an open-source mapping application built with Next.js 15, MapboxGL, and TypeScript. It features real-time weather data, 3D building... canonical: https://daily.dev/posts/pathfinder-a-modern-mapping-app-with-next-js-15-and-mapboxgl-zwgcfg5ie twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Pathfinder: A Modern Mapping App with Next.js 15 and MapboxGL | daily.dev og:description: Pathfinder is an open-source mapping application built with Next.js 15, MapboxGL, and TypeScript. It features real-time weather data, 3D building... og:url: https://daily.dev/posts/pathfinder-a-modern-mapping-app-with-next-js-15-and-mapboxgl-zwgcfg5ie og:image: https://api.daily.dev/og/posts/ZwGcfG5ie.png og:image:alt: Pathfinder: A Modern Mapping App with Next.js 15 and MapboxGL og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Pathfinder: A Modern Mapping App with Next.js 15 and MapboxGL **[NextJS](https://daily.dev/sources/nextjs)** · [@shadowoff09](https://daily.dev/shadowoff09) · 1 min read · 100 upvotes · 6 comments ## Summary Pathfinder is an open-source mapping application built with Next.js 15, MapboxGL, and TypeScript. It features real-time weather data, 3D building visualization, dark/light mode support, a street/satellite toggle, and a fully responsive design. ## Content Hey devs! 👋 Excited to share Pathfinder - an open-source mapping application combining Next.js 15, MapboxGL, and TypeScript. ✨ Highlights: • Real-time weather data • 3D building visualization • Dark/Light mode support • Street/Satellite toggle • Fully responsive design 🛠️ Built with: Next.js 15, TypeScript, MapboxGL, Tailwind CSS, and shadcn/ui. [Demo](https://pathfinder.shadowdev.xyz) [Github](https://github.com/shadowoff09/pathfinder) #nextjs #typescript #mapbox #opensource ## Community discussion Top comments from developers on daily.dev. **@kleeviissx** · 4 upvotes > Such a great app. One suggestion from my side: I would not fetch weather for any map movement. Instead I would set a threshold based on coordinates and if the movement surpasses this threshold then weather can be prefetched :D GREAT JOBB!!! **@kabirjaipal** · 0 upvotes > great app **@ksrsquare** · 0 upvotes > Nice piece. Colors in Satellite mode were brilliant. > An improvement: In Satellite mode, try to make the zoom clarity better like it's getting faded out after 18.5* Zoom **@jamalhussain** · 0 upvotes > loved it **@xcarter93** · 0 upvotes > Any thoughts on other features you want to add to this? As it is today it works great but curious to hear what else you're planning to add to it! --- Tags: [#open-source](https://daily.dev/tags/open-source), [#typescript](https://daily.dev/tags/typescript), [#nextjs](https://daily.dev/tags/nextjs), [#tailwind-css](https://daily.dev/tags/tailwind-css) [View this post on daily.dev](https://daily.dev/posts/pathfinder-a-modern-mapping-app-with-next-js-15-and-mapboxgl-zwgcfg5ie) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/pathfinder-a-modern-mapping-app-with-next-js-15-and-mapboxgl-zwgcfg5ie","headline":"Pathfinder: A Modern Mapping App with Next.js 15 and MapboxGL","text":"Pathfinder is an open-source mapping application built with Next.js 15, MapboxGL, and TypeScript. It features real-time weather data, 3D building visualization, dark/light mode support, a street/satellite toggle, and a fully responsive design.","url":"https://daily.dev/posts/pathfinder-a-modern-mapping-app-with-next-js-15-and-mapboxgl-zwgcfg5ie","datePublished":"2025-02-19T15:27:26.216Z","dateModified":"2025-02-19T15:27:36.822Z","author":{"@type":"Person","name":"Diogo Gaspar","url":"https://daily.dev/shadowoff09","image":"https://media.daily.dev/image/upload/s--Zc8YTsCo--/f_auto/v1741205765/avatars/avatar_IFhotDxkCAoRvvTQDoViF","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":160}},"image":"https://media.daily.dev/image/upload/s--FHn8UIfA--/f_auto/v1739926635/posts/Yv5Ryl4A2","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":100},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":6}],"comment":[{"@type":"Comment","text":"Such a great app. One suggestion from my side: I would not fetch weather for any map movement. Instead I would set a threshold based on coordinates and if the movement surpasses this threshold then weather can be prefetched :D GREAT JOBB!!!","datePublished":"2025-02-22T13:13:34.797Z","url":"https://daily.dev/posts/ZwGcfG5ie#c-jjYfwgCJz","author":{"@type":"Person","name":"Klev","url":"https://daily.dev/kleeviissx","image":"https://avatars.githubusercontent.com/u/37313988?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}},{"@type":"Comment","text":"great app","datePublished":"2025-02-28T05:34:04.186Z","url":"https://daily.dev/posts/ZwGcfG5ie#c-BGJFNyslU","author":{"@type":"Person","name":"Kabir Jaipal","url":"https://daily.dev/kabirjaipal","image":"https://media.daily.dev/image/upload/s--PIEReGHR--/f_auto/v1738642815/avatars/avatar_35qUasbBrnuObCMSEptPN"}},{"@type":"Comment","text":"Nice piece. Colors in Satellite mode were brilliant.\nAn improvement: In Satellite mode, try to make the zoom clarity better like it’s getting faded out after 18.5* Zoom","datePublished":"2025-03-14T17:23:33.535Z","url":"https://daily.dev/posts/ZwGcfG5ie#c-6d78sn8K1","author":{"@type":"Person","name":"KSR Square","url":"https://daily.dev/ksrsquare","image":"https://lh3.googleusercontent.com/a/ACg8ocJBwsoVah_BpR983du53rcJadiDPLFjYz6Uuu4OQbIoH7AALbG_=s96-c"}},{"@type":"Comment","text":"loved it","datePublished":"2025-02-24T16:23:29.188Z","url":"https://daily.dev/posts/ZwGcfG5ie#c-rvEQE2Ggd","author":{"@type":"Person","name":"Jamal Hussain","url":"https://daily.dev/jamalhussain","image":"https://lh3.googleusercontent.com/a/AAcHTtdyrdkeND3DYAMeSHMJgWPRcR0MxFB2jGINAg58-G0-Xvg=s96-c"}},{"@type":"Comment","text":"Any thoughts on other features you want to add to this? As it is today it works great but curious to hear what else you’re planning to add to it!","datePublished":"2025-03-15T14:56:25.595Z","url":"https://daily.dev/posts/ZwGcfG5ie#c-VGcLRjqNM","author":{"@type":"Person","name":"Patrick Carter","url":"https://daily.dev/xcarter93","image":"https://lh3.googleusercontent.com/a/ACg8ocILaIxthW2ythr0kc01oISEQMHiIZs-m44wYS8vLrYY5Lo=s96-c"}}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/squads/nextjs","name":"NextJS"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"NextJS","item":"https://daily.dev/squads/nextjs"},{"@type":"ListItem","position":3,"name":"Pathfinder: A Modern Mapping App with Next.js 15 and MapboxGL"}]} ```