Mapbox Components

A Project to contain and document reusable Mapbox components.

Dependencies

• Node.
• Yarn.
• Gulp installed globally: npm i -g gulp.

Getting started

• From the project root, run yarn to get dependancies from NPM.
• Run gulp watch or npm start to start the project.
• This will start on localhost:3000 and automatically reload when any changes are made using BrowserSync.

Structure

This project provides a platform on which to build with Mapbox in components to promote reuse. It uses:

• Gulp, to run our build tasks.
• Browserify, to allow us to write our JavaScript in components and require Mapbox (or any other libraries) directly.
• SASS, with Autoprefixer to allow us to write CSS in pre-processed components using ITCSS.
• Sourcemaps, so we can see see which component a line of JavaScript or CSS comes from when debugging.

Adding components

• Create independent view(s) (in src/views), JavaScript (in src/js/components) and SASS (in src/sass/components).
• When using the _file-header.hbs partial, pass a bodyClass parameter to add a class name to the body, then use this class name to override CSS on the body tag in _base.scs.
• Add comments to all JavaScript that uses the Mapbox API, and any vanilla javaScript or SASS/CSS that may need some explanation.
• Name files consistently so it's clear which module they belong to.
• Add a link to the component with a description to the project index including any code used that should be noted.
• Add the components to this readme.

Updating components

If it's necessary to add to or amend a component to make it work for your project, update the component in this repo where appropriate.

It may be necessary to revisit components as browser support requirements change and ES6 and new CSS features can be used more freely.

Components

See index.html for a full list of components and associated notes.