OFIS - Code Web Development

OFIS

Olam, one of the largest agri-businesses in the world, asked Code to build a smartphone app and a web based portal to connect their farmers globally. By using technology, the aim was to improve productivity, sustainability and the lives of Olam's farmers. This project is ongoing and has been a huge success for Olam, having been featured on Forbes and heavily in the their latest annual report and video.

Many of the client's key products are grown in remote areas where access to clean water, health and education can be difficult. Olam use OFIS as a means to understand farmer needs by plotting locations of farmers and services, completing surveys and recording transactions and training. All information recorded, over 3.5 million data points and rising, can be analysed within the web portal in a variety of ways, allowing a revolutionary level of insight into the lives of smallholding farmers all over the world. The system is currently live and in use across 8 products and 21 countries.

The Brief

In order to drive business productivity and help improve the welfare of farmers, Olam needed to be able to collect reliable, high quality data from farmers across all regions, which to date had been inconsistent and often captured using pen and paper.

Therefore, the brief was to create a solution with 2 main functions. The first was to build an application to enable Olam to collect consistent, reliable data from the farmers and the second was to create a web based interface where the data could be analysed and interpreted.

Our Solution

Data is collected by a surveyor via an Android mobile app which is used to collect social, financial and production data both online and offline. Using the handsets GPS chip, geographical locations are also recorded and queued for upload, until the surveyor has a sufficient connection to upload the data to the web based application.

The datasets created from this process can be used to provide long-term plans and recommendations which will increase farm productivity and track progress over time.

The web based application is built on the Laravel platform and uses a high-end, JavaScript based charting solution to present data generated through custom reports. Farms surveyed are marked on a Google maps interface with a GPS marker, providing access to farmer profiles along with the data collated from the field, including the perimeter of the farm.

The Result

The result is a multi-lingual, multi-product solution, that has already been used to collate data from tens of thousands of farmers worldwide. This enables Olam to target areas that would benefit from more input, improving the lives and living conditions of the farmers within their sustainability programmes, whilst saving money and increasing both yields and revenue.

Layering Functionality

1. Custom Framework
The web application is built using the Laravel application framework, architected specifically to handle large amounts of data through a complex engine. We use Angular and repositories to keep the code clean, reactive and easily maintainable.

2. Analysis Engine
In to the reporting system we added a drag and drop driven interface, that creates complex queries through a simple UI, enabling users to analyse huge amounts of data in any way they choose.

3. Big Data UX
On top of all the complex framework we layer Bootstrap, AMCharts and Google Maps to give a branded, responsive and highly interactive interface.

Designing the Details

Identifying Icons
Providing good UX when there is a lot of data to be consumed is a complex task. To help with this process we identified a suite of key icons and colours from the Glyphicons icon font provided with Bootstrap. We then customised these with Olam's brand colours, to enable the user to be able to easily identify different types of marker on the map at a glance, even when there are 80,000 pins on the page.

Developers
Corner

Making a map with a very high number of points that is constantly growing is no small feat. So we implemented clustering and tiers in our pins. Based on the zoom level of the map, we either show a cluster using regional and country level geographic data, the markerclusterer extension, a small dot pin which is colour coded or a standard pin with a colour and an icon. This makes it easy to navigate the many thousands of points on display at a glance.

Oboe

We use Oboe.js to stream in our JSON map data, adding markers to the marker clusterer on the fly, making the map more responsive.

JavaScript

Once loaded, the JavaScript monitors the zoom_changed event, and once the relevant threshold is passed, swaps out the markers from dot pins to full markers and back again on zoom out. Once past a certain zoom level, it also monitors panning and zooming to dynamically load in new markers as they become visible in the viewport, reducing the overall load.

Advanced Map Window

Using the zoom_changed event, we observe the map for zooming in, and then react accordingly.

// Listener to swap out normal for small icons on zoom level
google.maps.event.addListener(ofis.mapping.map, 'zoom_changed', function() {
			
	if (ofis.mapping.mapprevzoomlevel < 10 && ofis.mapping.map.getZoom() >= 10 ) {				
		ofis.mapping.updatepoismarkers('icon');
	}
	else if (ofis.mapping.mapprevzoomlevel >= 10 && ofis.mapping.map.getZoom() < 10) {
		ofis.mapping.updatepoismarkers('iconsmall');
	}
	if (ofis.mapping.mapprevzoomlevel <= ofis.mapping.mcmaxzoom && ofis.mapping.map.getZoom() > ofis.mapping.mcmaxzoom) {
		for (var i = 0; i < ofis.mapping.mcpolys.length; i++) {
			ofis.mapping.mcpolys[i].setVisible(true);
		}
	} else if (ofis.mapping.mapprevzoomlevel > ofis.mapping.mcmaxzoom && ofis.mapping.map.getZoom() <= ofis.mapping.mcmaxzoom) {
		for (var x = 0; x < ofis.mapping.mcpolys.length; x++) {
			ofis.mapping.mcpolys[x].setVisible(false);
		}
	}
			
	ofis.mapping.mapprevzoomlevel = ofis.mapping.map.getZoom();
});