universityofnottingham / mapbox-components

A Project to contain and document reusable Mapbox components

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.

mapbox-components's Issues

Refactor mapbox css into our own format

It's necessary to include the mapbox CSS to properly display the map. This means we occasionally need to use !important in our own CSS to override behaviour.

Go over the mapbox CSS and refactor into our own version that works better with our own code.

Note: mapbox uses a lot of inline CSS updated by JavaScript so it's unlikely we'll be able to totally avoid nasty overrides.

Add eslint task to gulpfile

Once we have determined JavaScript coding standards, add the eslint config to this project.

Look at storing data on Mapbox Studio

Could the data stored in mapbox studio be editable without code changes?

Rewrite with Mapbox GL.

Replace mapbox.js with Mapbox GL.

Update Story Map to use GeoJSON for narrative

The narrative text on the Story Map example is currently hard coded. Update so this is pulled from the GeoJSON along with the map data.

In MOAS, the intention is to create a WordPress REST API custom end point that will return GeoJOSN from a custom post type using advanced custom fields.

Add MOAS feature: Grouped pins

Where there is a high concentration of pins in a small area, group the pins and show a marker with a pin count.