Hot new features in OpenLayers 3

Introduction

OpenLayers 3 will be the proud successor of the widely used OpenLayers 2 map visualization JavaScript library. It makes heavy use of the new capabilities of modern Web browsers (Canvas, WebGL) and opens a whole new world of possibilities like client-side vector rendering, integration of 3D data, and many more.

OpenLayers 3 has been under heavy development for over a year. After months of silent hard work, we are now not far away from the first release candidate, paving the way for a final stable release in a few weeks.

This blog post discusses the recent changes that have just landed into the master branch of OpenLayers 3. This merge is the result of four months of intensive work. The main intent of this work was an overhaul of the vector architecture to support WebGL, but also an addition of new features, including high-DPI/retina support and rendering hooks.

Vector architecture

With the reworked vector architecture, vector features are redrawn whenever the map is redrawn, typically 30 or 60 frames per second while the user is interacting with the map. This results in higher-quality rendering of vector data, as the vector features are drawn at the exact instantaneous resolution and rotation of the map, instead of being scaled from raster images. Features are also redrawn during animations and interactions. Open the vector-layer example, and rotate and zoom in on the map to see this in action (use SHIFT+ALT drag to rotate the map).

To our knowledge OpenLayers 3 is the only library that re-draws features during animations and interactions – while “pinch-zooming”, for example.

Under the hood, the new vector renderer simplifies geometries before rendering. This enables better rendering performance (there’s less to draw), as well as better rendering quality (the data is better adapted to the screen resolution). The benefits of geometry simplification can be observed in the IGC example. Zoom in on the tracks to see more detail (the paragliders turn in circles to gain height).

The library now exposes an API for drawing geometries and features to the output canvas without using a vector layer. This is convenient and efficient for a number of use-cases, drawing zoom boxes for example, which you can do on any ol3 map by using SHIFT drag on the map. The draw API can also be used to draw dynamic data. The dynamic-data example demonstrates this.

The vector architecture has been re-designed with WebGL in mind. For example, we rely on batches to get good rendering performance and implement feature hit detection. We plan to use the same concepts for WebGL.

Format/parser architecture

We have developed a new infrastructure for feature formats (parsers) and formats in general. For example, the new version of the KML format is more accurate and robust. See the KML, GeoJSON, TopoJSON, GPX, and IGC examples. Also, the drag-and-drop example allows for drag-and-dropping GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map.

Hit detection

The new vector implementation includes a technique for detecting features at a given pixel. This technique involves re-rendering features, one by one, in a 1 pixel by 1 pixel canvas, and, for each feature, testing the presence of a color using Canvas’ getImageData function. This technique is very robust (pixel-perfect), and it is proven to be very efficient as well.

Check out the icon, vector-layer, synthetic-points examples to see the hit detection technique at work. The synthetic-points example demonstrates the efficiency of the technique when working with a lot of features (20000 point features here).

High-DPI support

OpenLayers 3 now produces high-quality images on high-DPI (aka retina displays) for vector and WMS layers. This is done by requesting larger images and drawing to larger canvases when window.devicePixelRatio is greater than one.

Open the vector-layer and wms-custom-proj examples in a retina device and enjoy the high-resolution display.

With the high-DPI framework now in place in the library, we can easily add high-DPI to other layer/source types in the future.

Rendering hooks

The map and layers trigger precompose and postcompose events that can be used to intervene into OpenLayers 3’s rendering process. This can be used for layer clipping, swipe and many other things – your imagination is the only limiting factor here.

Have a look at the layer-clipping, layer-clipping-webgl, layer-swipe, and layer-spy examples for demonstrations of what the precompose and postcompose hooks allow.

Conclusion

Camptocamp is fully committed to building a high-performance, next generation, feature-packed JavaScript library for all your current and future mapping needs. Camptocamp will support those who want to build innovative mapping application based on OpenLayers 3. Feel free to contact us if you plan to use OpenLayers 3. Camptocamp can provide OpenLayers development services as well as expertise training and support.