Last summer we went on a family road trip in the USA with an RV. That was awesome! For fun and to keep everyone up to date at home, I wanted to create a travel blog (rroadtrips.com) with a map to show the route.
I wanted to build something with Astro and was very time limited. 😅 So I was looking for a simple solution to display a map. Because Astro works with all kind of components/frameworks, I thought it would be easy to drop-in an existing React component and then just go with it...
Ultimately I implemented a simple Preact component with the Leaflet libary using OpenStreetMap. Mostly based on this answer on stackoverflow.com. Then used the attribute
client:only="preact" to render the component on the client-side. I had set it up as TypeScript component, and I had to import the component with the ".tsx" extension. Then it worked! 🥳
Map at rroadtrips.com
While I was looking for components and map solutions I also stumbled upon other nice map/location resources. So I just list them here mainly for myself but well, maybe it's usefull for others too! 😜
Useful React components
These are some of the components I tried before setting up the Preact component decribed above. ⬆️
Pigeon Maps (React/OpenStreetMap)
Started with this one in Astro, worked very well, a bit limited
React Simple Maps (React/d3-geo/topojson)
Tried it but it had old dependencies and warnings, so quickly moved to the next...
React Leaflet (React/Leaflet)
Worked, but was too much for this use case
Mapbox GL JS
react-map-gl (React/Mapbox GL JS)
Library to provide basic geospatial operations like distance calculation, conversion of decimal coordinates to sexagesimal and vice versa, etc.
Advanced geospatial analysis for browsers and Node.js
A map tool with real-time collaboration
Open-source maps made for self-hosting