The web mapping application mockup that Mapgears and its partners SiGéO and SCSI proposed to the city of Noumea, New Caledonia.

The original requirement

During the fall of 2012, the city of Noumea located in New Caledonia was in the process of updating its website to give it a fresh new look. At the same time, they wanted to have a web mapping application to publish their geospatial data to the general public.

Mapgears was invited to produce a proof of concept for this component in partnership with SiGéO and SCSI, local companies from New Caledonia.

Technologies used

The application is built entirely with open source technologies. The web part is based on OpenLayers as its geographic core component in addition to GeoExt and ExtJS to provide advanced mapping tools such as the opacity and zoom sliders.

On the server side, MapServer is used to render the map and legend. The maps are cached by MapCache for improved performance. A vector layer used to display road construction sites is served by TinyOWS and editable using the WFS-T protocol from OGC. The routing tool uses pgRouting to calculate directions using the original road network data from Noumea in addition to avoiding constuction sites when possible. Finally, the MapFish Print module allows exporting the map as a PDF document.

The end result is very impressive!

Cool features

Here are more details regarding some features of the application that are particularly interesting.

Points of interest browsing and searching

The city’s points of interest browsing method is very intuitive. They are organized in categories that are accessibles using buttons with drop down menus in the toolbar located at the top of the map. In a few clicks, we get a filtered list of locations of a given type. A click on a record recenters the map to its location, which is also highlighted, and a popup displays more information about it.

One more way to find locations is to use the search text box at the top of the application. The text search results are displayed the same way as previously explained.

The last query method is a geospatial search tool, which is available at the top right of the interface. The slider position determines the radius of the search in meters from the center of the current map view. The search region is highlighted on the map and the results are displayed as a list and accessible the same way as with the other search mechanisms.

Routing

Once the routing tool gets activated, a first click on the map sets the starting location and the second click the ending location. The shortest route is computed and rendered on the map. One interesting thing to point out is the fact that the tool takes the presence of road construction sites into account and includes them in its calculations. In the example below, the Rue du Pasteur Maurice LEENHARDT street is under repair as indicated by the marker’s presence. So, the tool considers that taking a detour to avoid the street repairs is a better route.

MapServer tricks

As usual, high quality map rendering was produced by MapServer, including the use of a fade to white color gradient effect on the shorelines and SVG symbology. Simon Mercier explains in more details the recipe to Produce a color gradient effect with MapServer in his blog (in French). The SVG Symbology is a new feature in MapServer 6.2 and greatly enhances the quality of the map symbols.

See the application in action

You can see the application in action and get a feeling of its high professionalism level. You can also watch this video that provides an overview of its various functionalities and awesome features.

Please note that both the application and the video are in French.

References

To find out more about the technologies used in this application, visit their websites: ExtJS, GeoExt, OpenLayers, MapFish Print, MapServer, MapCache, pgRouting and TinyOWS.