Ben Maps
Why this project?
My day job involves maps. Lots of them. Yet I still open Google Maps on the web whenever I look for a place or need traffic directions. My goal was to create a web interface with enough features to be able to switch my personal usage to it completely, using Mapbox APIs. I wanted to show that it's possible to build a great map experience assembling Mapbox legos, in the open, without any tracking.
Tech
- React
- Redux
- Mapbox GL JS
- Assembly.css
- Mapbox Geocoding API
- Mapbox Directions API
- Wikidata SDK
- Mapillary API
This project was bootstrapped with create-react-app.
I'm using Redux to manage the state, with a middleware component (the api-caller) responsible for all the asynchronous calls.
I use Assembly.css for styling, which shrinks the main CSS code below 60 lines.
The search bar is a fork from react-geocoder, with minor tweaks to be better integrated in the app. When available, additional POI information is retrieved from Wikidata (images, phone numbers, websites, etc.).
The directions are powered by the Directions Traffic API. It leverages anonymous data from millions of users to provide the freshest live traffic information, in order to route you around traffic and give you the best ETAs.
Deployment
This app is deployed with Now.
Map Style and sprites
The sprites and glyphs are hosted on the Mapbox infrastructure.
What's next?
- Adding tests, I've been lazy
- More traffic-related features
- Turn-by-turn directions
- Ads (just kidding)