Using Leaflet with Next.js to Track Taken Vacation Routes

Building an interactive map application to track and share travel routes across Taiwan, Korea, and Japan using Next.js, Leaflet, and OpenStreetMap

I recently got back from a summer trip to three countries in eastern Asia: Taiwan, Korea, and Japan. Each place offered such a fantastic and soul warming experience that I wish I had stayed longer. When I got back to the states I wanted to be able to track where I have gone as a momento. This is when I started working on sunlandgin.com.

Sunlandgin Homepage

My goal with sunlandgin.com is to provide a place where I can share my travels with friends and families. I think I have achieved some of this goal but I still have many plans on improving the site for better user experience.

Tech Stack

• Next.js
• Leaflet (react-leaflet)
• OpenStreetMap

I used Next.js as my site framework just because it is the one I am most familiar with. I used Leaflet to display the maps and OpenStreetMap for the actual map tiles. I believe this is the simplest way to set up a map application so that is what I stuck with.

Geojson Data

Leaflet uses geojson data to render the routes and I got my geojson data from MyMaps by Google. MyMaps only export to KML or KMZ and I had to export that to geojson. For subway and train routes, I download the complete geojson route from OpenStreetMap using Overpass Turbo and created a page where others could download specified routes between two or more subway/train stations at sunlandgin.com/get-geojson-data.

Sunlandgin Get Geojson Data

Future Considerations

I would love to host my own map tiles so I dont have to use Leaflet to generate the routes client side which is somewhat clumsy and non-performative.