React Location Pin Map

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={{ width: '100%', height: '100%', minHeight: '600px' }}
/>

Medium doesn’t love iframes but here is a link to see the map in action: https://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!