This is forked from the mapbox-maps repo so see that if you want a cleaner starting template. This template is designed to have a info window with a list that interacts with the map and features on it.
A user-friendly interface for Mapbox maps
tl;dr Working at a mapping company, I was tired of still opening Google Maps when looking for a place or directions. So I built an minimal, open version of a web map interface. It uses open-source libraries and Mapbox services.
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. At Mapbox, we have all the building blocks that allow to build this ourselves. My goal was to create a web interface with enough features to be able to switch my personal usage to it completely.
It was also a great way to learn React and Redux, the new Assembly CSS framework, and finally be on the consumer side of the APIs I build at work.
I wanted to show that it's possible to build a great map experience assembling Mapbox legos, in the open, without any tracking.
The summary:
This project was bootstrapped with create-react-app, which configures all the boring Webpack, Babel, polyfills, etc. for you. Our needs don't require any special configuration, especially because the app that we're building is static - all it does is call Mapbox's and Wikidata's APIs.
I'm using Redux to manage the state, with a middleware component (the api-caller) responsible for all the asynchronous calls.
I used our own Assembly.css framework, which shrinks the main CSS code below 60 lines. I usually don't like CSS, but I kinda enjoyed using this. It delivers on its promise of making the hard parts of web design easy.
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 (powered by data pipelines I'm fortunate to build every day). 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.
This is open-source and MIT licensed. All you need to get this working is a Mapbox access token:
git clone [email protected]:benjamintd/mapbox-maps.git
cd mapbox-maps
npm installThen you should create a .env file at the root that contains the following variables:
REACT_APP_MAPBOX_TOKEN=<your access token>
PUBLIC_URL=https://<your base url>If you deploy to github pages, the url should look something like https://benjamintd.github.io/mapbox-maps.
Then you can start the development server with:
npm startThe server will start on port 3000.
Feel free to fork and contribute, or open issues if you notice a bug or missing feature.
The style uses sprites for icons on the map. The spritesheet is generated automatically from the styles/icons directory with the module @mapbox/spritezero-cli. If you want to generate a new spritesheet from the icons stored in that directory, run the following commands:
$ npm run build-spritesThe spritesheet is generated automatically when building the project in whole (npm run build or npm run deploy).
- Adding tests, I've been lazy
- More traffic-related features
- Turn-by-turn directions
- Ads (just kidding)