Name: magicbox-maps
Owner: unicef
Description: Map mobility data in a NodeJS + React front-end application with data served by magicbox-open-api
Created: 2018-01-04 17:23:14.0
Updated: 2018-05-25 00:25:48.0
Pushed: 2018-05-25 00:25:46.0
Homepage: http://magicbox-maps-development.azurewebsites.net
Size: 11060
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
Map mobility data in a NodeJS + React front-end application with data served by magicbox-open-api
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.
The UNICEF Office of Innovation uses magicbox-maps for two purposes:
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:
clone https://github.com/unicef/magicbox-maps.git
agicbox-maps/
eact-app/src/config-sample.js react-app/src/config.js
Install dependencies for server back-end:
install
Install dependencies for React front-end:
eact-app/
install
The configuration file goes in react-app/src/config.js. A sample config
is included (see below).
le.exports = {
untries_with_school_connectivity: process.env.countries_with_school_connectivity || '{"COL": 1, "BRA": 1, "MRT": 1}',
'schools' or 'mobility'
de: process.env.REACT_APP_MODE || 'mobility',
Email contact info for map types
ail_contact_mobility: process.env.email_contact_mobility || '',
ail_contact_schools: process.env.email_contact_schools || '',
Endpoints configured for magicbox-open-api by default
itial_url_key: {
mobility: process.env.REACT_APP_MOBILITY_ENDPOINT || 'mobility',
schools: process.env.REACT_APP_SCHOOLS_ENDPOINT || 'schools'
Require login?
gin_required: (process.env.REACT_APP_LOGIN_REQUIRED==='true'),
Address of magicbox-open-api back-end
gicbox_url: process.env.MAGICBOX_URL || 'MAGICBOX_API_URL',
Tokens needed to access private data (e.g. school mappings)
Url: process.env.RF_URL || 'REFRESH_TOKEN_URL',
freshToken: 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:
agicbox-maps/
start
Run the front-end:
agicbox-maps/react-app
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.