Magic Box Kepler App architecture
This article is documentation on the Magic Box front-end application. Its purpose is to enable UNICEF staff to create and save useful maps. It was originally forked from the example app in the kepler.gl repo. We added a server back-end to make some external datasets available within the app.
There are two react-app repositories:
- unicef/magicbox-kepler-app
- unicef/magicbox-msal-graph-service (for authentication)
This article will focus on magicbox-kepler-app.
Clone this repository and check out dev branch.
In root directory there are two apps:
- client
- server
The first dataset we added were country boundaries. Browse to this demo. Then click “Select shapefile”. You’ll see a list of countries. Click on Indonesia, and then select admin level 2, wait a moment, and you’ll see this:
If you run the project locally you’ll only see a single country, Sierra Leone. This is because the server app checks if you have cloud credentials in a config file, and if not, shapefiles are served from the public dir.
If you had our creds, then the list of available countries would come from here:
However, the cloud credentials will be set to dummy values in the sample configs, and so your list of available countries will come from public -> shapefiles -> countries.
Credits
Developers:
- Marcella Maki
- Thoa Ta
- Courage Angeh
