Skip to content

dft street manager spike 0006 leaflet openlayers

Jump to bottom
stevenalexander edited this page Jan 16, 2018 · 18 revisions

Technical spike - Leaflet vs OpenLayers

Author(s) - Steven Alexander, Síona Murray

Introduction

Comparison of frontend mapping frameworks used to create dynamic maps for users to interact with.

Expected Beta requirements are:

  • Ability to display dynamic and static maps showing UK (England/Wales only) road network with high resolution
  • Overlay street works data onto map that can be filtered by area/datetime
  • Ability to draw Polygons, lines and points to mark areas for street works
  • Possible complex controls such as "snap to", to work with Vector street data
  • Work with a reasonable set of browsers (Land Registry supports IE 11+ and Webkit)

Leaflet

Small and fast mapping library, with a focus on performance and mobile-friendly maps.

Leaflet is used by City of Gottenburg works project.

Browser support:

  • Desktop
    • Chrome
    • Firefox
    • Safari 5+
    • Opera 12+
    • IE 7–11 / Edge
  • Mobile
    • Safari for iOS 7+
    • Android browser 2.2+, 3.1+, 4+
    • Chrome for mobile
    • Firefox for mobile
    • IE10+ for Win8 devices

Advantages

  • Good browser and mobile support
  • Fast and lightweight
  • Drawing plugins available
  • Modern and simple API
  • City of Gothenburg have example implementation of leaflet including plugins fully documented
  • Coding patterns seem to be more concise than OpenLayers. Easy to understand and get up and running very rapidly

Disadvantages

  • Less commonly used compared to OpenLayers
  • Plugins not always available or mature
  • Doesn't have native support for changing marker/pin colour - need to use third party libraries to achieve this
  • WMS handling in Leaflet seems to be basic
  • Consensus is that Leaflet lacks features required for more complex mapping applications

PoC

See here.

For Leaflet UX PoC with layers implementation see here and source here.

OpenLayers

Mature mapping library with a very large feature set.

Used by Land Registry LLC service project.

Browser support (all HTML5 and ECMAScript 5+):

  • Desktop
    • Chrome
    • Firefox
    • Safari
    • IE 11 / Edge
  • Mobile
    • Unknown, issues with older Android

IE 9/10 and Android 4.x requires pollyfill to function, no support for IE 7-8.

Advantages

  • Mature and commonly used
  • Land Registry used for mapping tools and passed Alpha assessment
  • More fully featured - so less need for additional plugins
  • Well documented, with good examples and comprehensive API documentation
  • Ability to change marker/pin colour OOTB

Disadvantages

  • Less browser support (if IE 9 or lower is required this could be a problem)
  • Larger library, potentially worse performance, especially on mobile
  • Coding patterns verbose in comparison with Leaflet

PoC

See here.

For OpenLayers UX PoC with layers implementation see here and source here.

Conclusion

Both Leaflet and OpenLayers offer functionality that could meet Beta requirements.

I believe we have three main options:

  • OpenLayers implementation based around Land Registry design patterns
  • Leaflet implementation forked or using City of Gothenburg implementation
  • Leaflet implementation using plugins mirroring Land Registry design patterns

The fact that Land Registry have passed Alpha assessment using OpenLayers is a large factor in it's favour, as we could either copy or base the implementation of the mapping controls on theirs. This would reduce effort and risk in the mapping screens, particularly around new design patterns for displaying/editing dynamic map information.

Leaflet seems like the more modern library, but seems a riskier option. City of Gothenburg works project (Nystart) is potentially an example of what we are trying to do but is smaller scale and may not meet GDS standards.

Browser and mobile support is most likely not a large factor, as the main mapping users will be planners/utility workers using desktops.

Considering all the information we currently have I believe the best solution is an OpenLayers implementation. It is well documented, mature and has been tried and tested in the GDS Alpha assessment.

Outstanding questions

  • Can we re-use Land Registry mapping code or base around their implementation? (currently closed source but was originally open)
    • OPEN
    • Andrew Jackson to check this out with HMLC and get back to us
  • What would the effort be in adapting the City of Gothenburg approach to GDS standards?
    • OPEN
  • Can we fork/use City of Gothenburg implementation?
    • OPEN
    • No indication to answer the above online - repo I found for Gotmap appears to be empty
    • While City of Gothenburg implementation looks to be good, the documentation is not complete/comprehensive. Some areas are in Swedish
    • City of Gothenburg also provides less examples than both Leaflet and OpenLayers
    • Some features of City of Gothenburg implementation (e.g. WMS image export) don't work - would create additional overhead if we required these features
    • I think with the effort required to understand/subsequently edit the City of Gothenburg implementation our time would be better invested in creating our own implementation in OpenLayers/Leaflet
    • Will likely have a more concrete answer on this following meeting with City of Gothenburg
  • Can we rule out IE <=9 use in Local Authorities
    • OPEN
    • More information will be received when the NFR survey results become available

Useful links and references

Comments

  • [SA 16/1/2018] - reviewed, will update with comments from City of Gothenburg after meeting for outstanding questions

Clone this wiki locally