Repository files navigation

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

magicbox-maps is aReact front-end application thatserves data from themagicbox-open-api. magicbox-mapsworks with different types of data sets, so you can show relationships betweendifferent data sets in a geographic map. These data sets include school locationand 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 acrossOpenStreetMap leaflets. The countries displayed areorganized bygeospatial shapefiles,provided by various sources, likeGADM.

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 ofdisease outbreak (e.g. Zika, Dengue fever, cholera, etc.), mobility data helpscountries develop deeper insights to disease prevention and response withvaccination campaigns or moving response resources into place. For sudden, massmovement of people (e.g. refugee crisis), mobility data helps local governmentsanticipate an influx of people in advance and to respond appropriately withrelief resources.

This section documents a development environment, not a production instance.Please reach out to@UNICEFinnovate onTwitter for more information about usingMagicBox in production.

• Nodejs 8.x.x
• Running instance ofmagicbox-open-api

Clone repo, copy sample config:

git clone https://github.com/unicef/magicbox-maps.gitcd 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 inreact-app/src/config.js. Asampleconfigis 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 typesemail_contact_mobility:process.env.email_contact_mobility||'',email_contact_schools:process.env.email_contact_schools||'',// Endpoints configured for magicbox-open-api by defaultinitial_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-endmagicbox_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. Seehow to set it upin the APIREADME.

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

Run the server:

cd magicbox-maps/npm start

Run the front-end:

cd magicbox-maps/react-appnpm start

Interested in contributing? Read ourcontributionguidelinesfor help on getting started.

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

This project is licensed under theBSD 3-ClauseLicense.