React Location Pin Map
Originally published on Medium in 2025, republished here as I move my writing to my own site.
When I was putting together our wedding website I included this interactive map of locations we enjoy in Seattle.

This took me at least 5 hours to make — signing up for MapBox, finding addresses, latitudes and longitudes for my locations, getting ChatGPT to write me MapBox GL code. I wanted to make this far easier for the next person that has to build an interactive map of locations. So I built and published this React Map Component that encapsulated the map logic.
<LocationPinMap
data={geojson_data}
title={"Locations"}
accessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}
style=
/>

Medium doesn’t love iframes but here is a link to see the map in action: radish-map-maker.s3.us-west-2.amazonaws.com/mlb_stadiums.html
This map expects data in geojson. Lately I’ve been finding I lose too much time reformatting data. So I’m working on a map maker which will take users’ data in whatever format they have already. Coming soon!