Map mobility data in a NodeJS + React front-end application with data served by magicbox-open-api
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


License Chat on Gitter Build Status Maintainability

Map mobility data in a NodeJS + React front-end application with data served by magicbox-open-api


What is it?

magicbox-maps is a React front-end application that serves data from the magicbox-open-api. magicbox-maps works with different types of data sets, so you can show relationships between different data sets in a geographic map. These data sets include school location and other key attributes as well as information on school Internet connectivity, both in terms of speed (Mbs) and type (2G and 3G).

magicbox-maps uses WebGL and a component of React to render plot points across OpenStreetMap leaflets. The countries displayed are organized by geospatial shapefiles, provided by various sources, like GADM.

How we use it

The UNICEF Office of Innovation uses magicbox-maps for two purposes:

  1. Mapping schools globally (demo)
  2. Mapping mobility of people globally (demo)

Mapping schools helps us understand…

Mapping mobility of people helps us understand movement patterns. In the case of disease outbreak (e.g. Zika, Dengue fever, cholera, etc.), mobility data helps countries develop deeper insights to disease prevention and response with vaccination campaigns or moving response resources into place. For sudden, mass movement of people (e.g. refugee crisis), mobility data helps local governments anticipate an influx of people in advance and to respond appropriately with relief resources.


This section documents a development environment, not a production instance. Please reach out to @UNICEFinnovate on Twitter for more information about using MagicBox in production.



Clone repo, copy sample config:

git clone
cd magicbox-maps/
cp react-app/src/config-sample.js react-app/src/config.js

Install dependencies for server back-end:

npm install

Install dependencies for React front-end:

cd react-app/
npm install


The configuration file goes in react-app/src/config.js. A sample config is included (see below).

module.exports = {
  countries_with_school_connectivity: process.env.countries_with_school_connectivity || '{"COL": 1, "BRA": 1, "MRT": 1}',

  // 'schools' or 'mobility'
  mode: process.env.REACT_APP_MODE || 'mobility',

  // Email contact info for map types
  email_contact_mobility: process.env.email_contact_mobility || '',
  email_contact_schools: process.env.email_contact_schools || '',

  // Endpoints configured for magicbox-open-api by default
  initial_url_key: {
    mobility: process.env.REACT_APP_MOBILITY_ENDPOINT || 'mobility',
    schools: process.env.REACT_APP_SCHOOLS_ENDPOINT || 'schools'

  // Require login?
  login_required: (process.env.REACT_APP_LOGIN_REQUIRED==='true'),

  // Address of magicbox-open-api back-end
  magicbox_url: process.env.MAGICBOX_URL || 'MAGICBOX_API_URL',

  // Tokens needed to access private data (e.g. school mappings)
  rfUrl: process.env.RF_URL || 'REFRESH_TOKEN_URL',
  refreshToken: process.env.REFRESH_TOKEN || 'REFRESH_TOKEN'


magicbox-maps only works if a valid magicbox-open-api instance is running. See how to set it up in the API README.

The magicbox-maps back-end server and front-end React application must be running at the same time.

Run the server:

cd magicbox-maps/
npm start

Run the front-end:

cd magicbox-maps/react-app
npm start


Interested in contributing? Read our contribution guidelines for help on getting started.

Our team tries to review new contributions and issues on a weekly basis. Expect a response on new pull requests within five business days (Mon-Fri). If you don't receive any feedback, please follow up with a new comment!



This project is licensed under the BSD 3-Clause License.