DEV Community

Cover image for Project 46 of 100 - Simple Interactive Map Component
James Hubert
James Hubert

Posted on

Project 46 of 100 - Simple Interactive Map Component

Hey! I'm on a mission to make 100 React.js projects ending March 31st. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!

Link to the deployed project: Link
Link to the repo: github

Just made a map today- was sort of feeling it as an extension of my project from yesterday. First tried Google Maps API but discovered I needed to submit credentials and be approved even for a test app. Nah.

Then tried react-mapbox-gl because I do love Mapbox. Built the whole app and discovered it does not compile properly because of a conflict with the default webpack version bundled with Create React App.

Tried some workarounds. Nothing worked.

Then ripped out react-mapbox-gl and the component I had made in favor of react-map-gl, a Mapbox-based map maintained by Uber. The map looks like an Uber map but other than that it looks pretty swell.

Wrestled with nodenv for a few minuted before realizing you have to put REACT_APP_ before an environment variable in a React app. Then was able to build and commit properly.

That's how you turn a 45 minute project that was supposed to be quick so you could run errands and go to bed early into a 5 hour project that forces you to skip your errands and get too little sleep!

Curious how other project-builders get around debugging on a defined timeline. What if you build and it doesn't work? Ditch the schedule and keep working or ditch the project until tomorrow?

If you want to make a map fast in React sign up for a Mapbox account, get the API token, then follow the awesome, detailed docs for react-map-gl. You won't regret it.

Peace and love. As always find me on Twitter :)

Top comments (0)