OpenLayers Blog

All the maps that are fit to blog

OpenLayers 3 Lausanne Sprint Summary

March 18th, 2013 by Eric Lemoine · 6 Comments

A group of nine developers gathered in Lausanne or participated remotely in an OpenLayers 3 sprint just over a week ago. This was an intensive, productive, and fun week. There’s still a long way to go, but we think OpenLayers 3 is looking great already! This post reports on the code sprint’s achievements and discussions.

Vector

During the sprint, work continued on the vector branch – including a new vector layer canvas renderer, vector feature and geometry objects, GeoJSON parsing, rule-based styling with expressions in symbolizers, and WebGL friendly geometry storage.

After a presentation of the current state of the vector branch, we had a long discussion on the architecture and functionality, and talked about efficient geometry storage for WebGL rendering. Our ongoing challenge is to find solutions that enable both rich functionality (complex styling, feature editing, etc.) and displaying lots (millions) of vector features with WebGL.

A few days after the sprint, the vector branch was merged into master, and work has started on the WebGL renderer.

The current state of vector functionality can be summarized as follows:

  • GeoJSON format support. See the vector layer example
  • Tile-based rendering of vector geometries to a 2D canvas.
  • Rendering of points with a circle symbol or icons from image files.
  • Stroke symbolizers (color, width, opacity) for lines and polygons.
  • Fill symbolizers (color, opacity) for polygons.
  • Rule based styling with filters and access to feature data, including support for multiple symbolizers per feature (see the rule-based styling example).
  • Fast rendering thanks to spatial R-Tree indexing and rendering of geometries with the same symbolizer in a single pass.

Parsers

OpenLayers 2 is well known for the various parsers/formats it offers. OpenLayers 3 will be no different. We’ve already ported a number of formats from OpenLayers 2: OGC Exception Report, OGC OWS Common, OGC WMS Capabilities, OGC WMTS Capabilities, and GeoJSON. We’ve also started working on a KML parser, which is not yet merged at time of this writing.

Also, right after the code sprint, we received a great contribution from Tobias Bieniek, who wrote a parser for Google’s Encoded Polyline Format. (Tobias also ported the test suite to Mocha from Jasmine.) Many thanks Tobias!

WMTS layer

We’ve added a new tile source: WMTS. This new source allows displaying tiles served by OGC WMTS services, which is now supported by the major open-source tile servers, like GeoWebCache and MapProxy.

See the WMTS example for a live demo.

OpenLayers 3 also supports creating WMTS source objects from WMTS Capabilities documents (read with the WMTS Capabilities parser mentioned above).

New controls

We have added two new controls: a zoom slider control, and a scale line control. Both are entirely customizable through CSS. See zoom slider and scale line control examples.

The scale line control can work with various units, and it gracefully handles different map projections. Open the scale-line example in your browser, and note that the scale line changes as you zoom, and move to or from the poles. (On mobile it will also change while pinching!)

Interaction improvements

Interactions are objects that make interacting with the map possible. Examples of interactions include DragPan, TouchPan, and TouchZoom, to name a few.

We made a number of improvements to the interactions during the code sprint. The main improvements involve animating every type of interaction. For example, zooming with the mouse wheel is now animated, snapping to the closest zoom level after pinching is now animated.

Speaking about animations, make sure you check out our new animation example.

Canvas renderer

OpenLayers 3 currently has three renderers: DOM, Canvas, and WebGL. We wrote the DOM and WebGL renderers first. Later we added the Canvas renderer because of FireFox and Chrome bugs causing white lines between tiles when zooming and rotating with the DOM renderer. By using Canvas to render tiles the visual artifacts are all gone.

To get very good performance from Canvas we still need to optimize our Canvas renderer implementation. We started work in that area during the code sprint, which involved not redrawing the entire Canvas each time the map is moved or zoomed. There are more optimizations to come.

We believe that we can get very good performance out of the Canvas renderer. Think mobile with many layers, which is known to not work well using the one DOM div per layer paradigm.

For a lot of our examples the renderer can be explicitly set by setting the “renderer” parameter in the URL. For example, the following loads the Stamen example using the Canvas renderer:

http://openlayers.github.com/ol3/master/examples/stamen.html?renderer=canvas

API work

We all know and agree that we need to improve the API, and the code sprint was a good opportunity to talk about, and work on, the API.

It is now possible to pass an array of layers to the map constructor. We also changed the way controls are passed to the map. And finally we made it possible to use strings to specify projections throughout the API. This may sound like small improvements, but designing a consistent and convenient API requires a lot of thinking, discussion around code snippets and developer feedback.

You can browse our examples follow the “source” link to see what the current API looks like.

For example, this is how a map with two Stamen layers is currently created:

var map = new ol.Map({
  layers: [
    new ol.layer.TileLayer({
      source: new ol.source.Stamen({
        layer: 'watercolor'
      })
    }),
    new ol.layer.TileLayer({
      source: new ol.source.Stamen({
        layer: 'terrain-labels'
      })
    })
  ],
  target: 'map',
  view: new ol.View2D({
    center: ol.projection.transform(
        new ol.Coordinate(-122.416667, 37.783333), 'EPSG:4326', 'EPSG:3857'),
    zoom: 12
  })
});

We’re still actively working on the API.

Continuous integration

OpenLayers 3 is very serious with Continuous Integration. We use Travis CI to run and and check a ton of things for us.

During the code sprint we added a check-examples hook that checks that our examples’ HTML pages load without error. Should an example use a symbol that’s not exported by the Closure Compiler the check-examples hook will catch it. Should an example use a WMS that is currently down the check-examples hook will also catch it.

OpenLayers 3 will include lots of examples, so this kind of automated processes is key to maintaining working examples. It is now quite clear that, as we develop OpenLayers 3, we’ll more and more rely on continuous integration.

Examples with Bootstrap

The examples index page and the example pages themselves now use Twitter Bootstrap. This gives us nice-looking pages, and responsive design for accommodating various screen sizes.

For example, open the zoom slider in a mobile browser, and note that the maps are stacked on one another to accommodate the screen size.

Tags: Sprint

6 responses so far ↓

  • 1 Simon // Mar 19, 2013 at 10:30 am

    Fantastic work, and great to see such good examples for OL3. Working examples are the best manual one could wish for.

  • 2 Patzi // Mar 21, 2013 at 9:26 am

    Looks really good. I think I need to dig more into ol3, before I only knew that there is going to be a huge improvement compared to ol2 but now you can really see and feel it. Thanks guys.

  • 3 GV // Mar 22, 2013 at 1:44 pm

    My old interaction dream is to have OL managed drag&drop support. To drag features around (integrated with map navigation like Google maps correction of directions) and even more, to drag features out of the map – to drop on web page places which could do interesting things with notifications of such kind.

  • 4 Open Layers 3 Sprint Code a Losanna | Cesare Gerbino GIS Blog // Apr 8, 2013 at 5:07 pm

    [...] 3 Sprint Code a Losanna 8 aprile 2013 cesaregerbino Lascia un commento Go to comments Direttamente dal blog di OpenLayers รจ stato riportato un sommario di un recente spint code di OpenLayers [...]

  • 5 Tim-Hinnerk Heuer // Apr 17, 2013 at 5:18 am

    Great news guys! I like everything I saw here, especially the new renderers.

    The zoom slider didn’t work for me on my desktop machine though. Only when I used my mouse wheel. Is it a mobile feature only?

  • 6 Eric Lemoine // Apr 17, 2013 at 5:43 am

    Hi Tim

    Thanks for your feedback.

    The zoom slider issue is known, and being addressed in https://github.com/openlayers/ol3/pull/553.