Geospatial – News

ngeo: a library combining AngularJS and OpenLayers 3

24 März 2015

This blog post presents ngeo, an Open Source JavaScript library combining AngularJS and OpenLayers 3.

With ngeo, Camptocamp’s objective is to facilitate and make efficient the development of applications based on AngularJS and OpenLayers 3. We are developing a feature-rich and flexible library that can be used for as many use cases as possible.

ngeo provides a set of AngularJS « directives » and « services ». Our initial objective is not to provide high-level, out-of-the-box, components. Instead, our initial objective is to provide a set of elementary components that can be combined together in different ways, based on the application’s specific needs.

The source code on ngeo is available on GitHub. Usage examples are available on Camptocamp’s space.

Other Open Source libraries combining AngularJS and OpenLayers 3 are available.

The most visible and complete is probably « angular-openlayers-directive ». The approach taken with ngeo is very different from that of angular-openlayers-directive. Indeed, angular-openlayers-directive provides a declarative API for creating OpenLayers 3 maps and interacting with these maps. For example, with angular-openlayers-directive, the OpenLayers 3 map instance is not created by the application, but by the „openlayers“ directive provided by angular-openlayers-directive, based on attribute values specified in the application HTML code. So angular-openlayers-directive offers a declarative overlay above OpenLayers 3. In other words, it provides a different way to use OpenLayers 3.

In contrast to angular-openlayers-directive, ngeo doesn’t aim at providing such a declarative layer on top of OpenLayers 3. With ngeo, the application is responsible for creating the OpenLayers 3 map. The map is created imperatively in a controller of the application. The objective of ngeo is not to define another way to use OpenLayers 3 but to provide the building blocks necessary for developing rich web mapping applications, and a way to combine AngularJS and OpenLayers 3 in an application.

As OpenLayers 3, the ngeo code uses Closure Library and is compiled with Closure Compiler. ngeo is developed in a way that the applications themselves can benefit both from Closure Compiler and Closure Library. Closure Compiler « statically » verifies the JavaScript code and compresses the code with very good compression rates. Our experience has shown that Closure Compiler is a precious tool for developing big applications with strong performance constraints.

With ngeo, Camptocamp targets a library that is very flexible, functionally rich and of high quality. We hope this blog post has triggered your interest. Feel free to post questions or comments on the ngeo-discuss mailing list.

Hinterlassen Sie einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.