At the end of 2013, Les Affaires carried out an investigation about contaminated sites in Quebec. Once completed, a traditional article presenting the results would have done the trick, but the author wanted to go further by using an online interactive map as a way to browse and consult the information.

Mandate

37e Avenue and Les Affaires called upon the Mapgears team for their skills in the webmapping world to produce an interactive map presenting the results of the investigation.

The map had to allow site selection on mouse click, which would then display its information, such as its name, address and a list of contaminants ordered by categories and sub-categories. A search tool was also needed to quickly find any site by typing its name or address.

The original data source was under an Excel format, which had to be converted in a geospatial format.

Objectives

The application had to be fast, simple of use and compatible with both modern desktop browsers and mobile device browsers. It also had to allow easy interactions between the user, the map and the data it would contain.

The map

Application

The map combines open source tecnologies, such as MapServer, OpenLayers, PostGIS, jQuery Mobile and ScribeUI. It also contains some base layers from GoogleMaps as well as raster imagery from StreetView, which is availabe when a site is nearby.

Adaptation for mobile devices

Preview

The interface was made “responsive” depending on the type of device visiting the application, which means it adapts itself by minimizing some components and saving the limited space available on mobile devices. A simple use case of the application could have been for example a user who, while drinking his morning coffee, read his Les Affaires newspaper and noticed the article mentioning the map. Using his cellphone, he would have then visited the application to browse the map.

References

See also: