OpenLayers 3

As a learning exercise, I have attempted to “migrate” my #indyref map from OpenLayers 2.13.1 to OpenLayers 3.0.0. It seemed a good time to learn this, because the OpenLayers website now shows v3 as the default version for people to download and use.

I use the term “migrate” in inverted commas, because, really, OpenLayers 3 is pretty much a rewrite, and accordingly requires coding from scratch, the new map. It has so far taken four times as long to do the conversion, as it did to create the original map, although that is a consequence of learning as I code!

Shortcomings in v3 that I have come across so far:

• No Permalink control. This is unfortunate, particular as “anchor” style permalinks, which update as you move around the map, are very useful for visualisations like DataShine.
• No opacity control on individual styles – only on layers. This means I can’t have the circles with the fill at 80% opacity but the text at 100% opacity. The opacity functionality is mentioned in the current tutorials on the OpenLayers website and appears to have been removed from the codebase very recently, possibly by mistake.
• The online documentation, particularly the apidoc, is very sparse in places. As mentioned above, there is also some mismatching in functionality suggested in the online tutorials, to what is actually available. Another example, the use of “font” instead of “fontSize” and “fontStyle” for styles. This will improve I am sure, and there is at least one book available on OpenLayers 3, but it’s still a little frustrating at this stage.
• Related to the above – no way to specify the font size on a label, without also specifying the font.

Things which I like about the new version:

• Smooth vector resizing/repositioning when zooming in/out.
• Attribution is handled better, it looks nicer.
• No need to have a 100% width/height on the map div any more.
• Resolution-specific styling.

Some gotchas, which got me for a bit:

• You need to link in a new ol.css stylesheet, not just the Javascript library, in order to get the default controls to display and position correctly.
• Attribution information is attached to a source object now, not directly to the layer. Layers contain a source.
• Attribute-based vector styling is a lot more complicated to specify. You need to create a function which you feed in to an attribute. The function has to return a style wrapped in an array.
• Hover/mouseover events are not handled directly by OpenLayers any more – but click events are, so the two event types require quite different setups.