Add All Store Locations to a React Leaflet Map with Location Data From GraphCMS

Displaying a list of physical locations is helpful, but showing them on a map, giving your potential customers the ability to see how close each store really is to their location is even better.

GraphCMS supports adding coordinates as a field to our data models, where we can dynamically pull those coordinates in and add them to a map.

We'll walk through how we can loop through our store locations and add each one to a new React Leaflet map. We'll also learn about some pitfalls of using React Leaflet in an app framework like Next.js and how we can solve it with dynamic imports and manual image imports.

• Dynamic Import - nextjs.org
• Leaflet Map Marker Rendering - github.com

I also have a whole course on how to Build Maps using React Leaflet if you want a further dive on the topic.