Les Affaires newspaper published on January 30th 2014 an article about the contaminated sites in Quebec in which the interactive map has been produced by the Mapgears team.

The 37e Avenue agency and the Les Affaires newspaper asked the Mapgears team for help for its expertise in the field of web mapping to produce an interactive map showing the results of the investigation.

Adding an interactive map to the article complements the broadcasting of the information in a practical, simple and intuitive way for any user wishing to browse the information.

In the following lines, you will discover the bleeding edge technologies used during the conception of the application as well as the methods that were used to transform simple data into rich geospatial data.

The Data and Map Engine

The dataset originally being under an Excel format, a first processing was required to transform it into a geospatial format. The data has been imported into a PostgreSQL database with the PostGIS extension.

The MapServer map engine has then been used to render the points representing the contaminated sites. Thanks to the clustering feature available in MapServer, these points are grouped into a single feature when the map is browsed at small scales, which makes it much more beautiful and readable than if a cloud of points was shown instead.

Also, it should be noted that the style of the map is relative to the zoom level, i.e. the style is dynamically set to best fit the level that is currently being viewed. In order to make this kind of complex configuration easier, the ScribeUI tool was used to manage the creation of the Mapfile.

The Map

Preview

The GoogleMaps tiles were chosen as base layers and a customized style has been applied to them to reduce their opacity. This increases the visibility of the layer of points representing the contaminated sites overlaid on top of the map. The StreetView module is also available when a site is close enough to pictures taken by Google.

Preview

The choice of the libraries used to build the application was made according to its needs. The points had to be interactive, i.e. they had to show informations about a site when clicked. Instead of going with a vector based solution, where the points would have been drawn by the browser, which would have made them directly interactive but slower to render at the same time, the Mapgears team chose to use the UTFGrid format that is newly available in the MapServer development version. This feature allows interactions to be quick, and simple and allows the task to be made on server-side, which is faster than if it had been made by the browser. It should be noted that the dataset contained more than 6000 points!

The OpenLayers web mapping library, which supports the UTFGrid format, was chosen as navigation engine for the client side.

The app had to have some advanced user interface features, like a tree listing the categories and sub-categories of contaminants, a search tool, etc. In addition, a responsive design was required to make sure the interface was optimized for users visiting the page on mobile devices. For these reasons, the jQueryMobile library was chosen to handle of the interface features.

The search tool

In addition to the tree containing the categories and sub-categorieuss that allows the sites to be filtered on the map, a fast and simple search tool allows the user to efficiently find a specific site. By typing just a few letters, the map is refreshed to show only the results of the search. The 5 first records found are also displayed in a small list to allow them to be quickly selected on click. Regardless of its simplicity, the tool allows searches to be fast, whether by using name or address.

Technology at your fingertips

Most of the technologies used in this application are open source and used by the Mapgears team with many of its customers. Furthermore, the team also contributes actively to their development and have been supporting their users for several years. If you have questions regarding the application or any technology used in it, please contact the Mapgears team and they will be pleased to help.

You can also see the interactive map in action at the address terrainscontamines.lesaffaires.com.