MagicBox is a full-stack application. While the back-end API (magicbox-open-api) serves the data and makes it available for querying, the magicbox-maps application visualizes the data inside a world map.
How we do it¶
magicbox-maps draws the plot points using OpenStreetMap Leaflet and WebGL. WebGL allows us to render up to 16 million clickable points at once.
To do this inside of a React application like
magicbox-maps, we created react-webgl-leaflet.
This React module enables us to render several plot points simultaneously, like we use for the school mapping data.
Every school is represented with a unique, clickable point.
This is currently used for magicbox-maps.
Why we do it¶
Originally, we began using Leaflet markers. This worked well for Mauritania with 2,936 schools. However, when we moved to Colombia with 49,020 schools, performance took a significant hit. We experimented with a few other options, like heatmaps and clustering.
In the end, we decided on using WebGL, as explained above.