Skip to content

A template for having a list of things in a sidebar connected to map events.

License

Notifications You must be signed in to change notification settings

mpmckenna8/eventmapbox

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

Build Status

Mapbox Maps

A user-friendly interface for Mapbox maps

screen shot 2017-03-29 at 5 11 20 pm

Building a map interface from scratch

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.

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. 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.

Tech

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.

Do it yourself!

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 install

Then 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 start

The server will start on port 3000.

Feel free to fork and contribute, or open issues if you notice a bug or missing feature.

Icons and sprites

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-sprites

The spritesheet is generated automatically when building the project in whole (npm run build or npm run deploy).

What's next?

  • Adding tests, I've been lazy
  • More traffic-related features
  • Turn-by-turn directions
  • Ads (just kidding)

About

A template for having a list of things in a sidebar connected to map events.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published