118

I was debating with one of my collegues on OpenLayers v/s Leaflet. I made a point that OpenLayers is much better API if we wish to build a project, where you need direct connectivity to the Geoserver and PostGIS.

Then I found Open Data Kit, which looks pretty new but has the features of connectivity with the Geoserver and PostGIS.

So my project details are as follows,

  1. Use the map interface to fetch Feature Info
  2. Create a customized tool that takes the lat/lon from user as to where he/she clicks on the map and then fetches the Climate Data from the raster (which is handled by a py script on the server)
  3. Allows user to upload excel, which is sent to the py script, which returns a GeoJSON, which creates Vector Features on the map
  4. Allow user to create vector polygons, which will fetch the Features it intersects from the WFS Layer.
  5. Fetches Layer from the PostGIS Datastore on GeoServer and displays the layers on the map.

So now I am confused on which is better and why using OpenLayers over Leaflet makes more sense or not?

1

8 Answers 8

103

I have used both OpenLayers and Leaflet in my apps. There has been so much discussion on this topic in this forum and others on planet-internet. They usually fall into 2 camps - features and flexibility of OpenLayers versus simplicity of Leaflet. I would not be surprised if someone spawns an "OpenLeaf" initiative soon marrying the best of both worlds!

I found Leaflet very simple to use, a petite 64K size, compared to over 700K Openlayers, and in very few steps you can create apps that have the freshness and eye-candy of today's web and mobile GIS apps. Your stack - GeoServer, PostGIS etc., is a standard stack, so OpenLayers or Leaflet could easily be incorporated.

Having said that, I would still go with OpenLayers for the following reasons

  1. There is just a TON of material around OpenLayers. It is a lot more mature than Leaflet.
  2. Check out the comparison on commits and users.
  3. OpenLayers, GeoServer, PostGIS stack is so proven in the FOSS world that you are going on a path that is solid.
  4. OpenLayers has tad bit more features on Map Controls.
  5. While its a bit more work to create transitions and visual-effects, it can be done in OpenLayers.
3
  • 4
    Things have changed, the difference in bundle size nowadays is not as huge as it used to be. As of the date of this comment, Leaflet is 40.1KB minified + Gzipped and OpenLayers is 66.5KB minified + Gzipped. OpenLayers natively supports vector tiles while Leaflet doesn't. Not advocating for any, just posting some updates. Jun 22, 2020 at 23:59
  • @CharmingRobot Actually OL is >200KB minified+gzipped as per the release page which currently links to cdn.jsdelivr.net/npm/[email protected]/dist/ol.js. Leaflet links unpkg.com/[email protected]/dist/leaflet.js which is 45KB. The in-development 2.0 version of leaflet is smaller than the latest 1.9.3. The CSS for OL is 2.5KB and for Leaflet 4KB. I don't know where you got a 67KB OpenLayers JS file, maybe you had a stripped build that didn't include some features that you didn't need?
    – Luc
    Apr 25 at 17:16
  • @Luc Don't remember exactly, it was 3 years ago, maybe things have changed again. I usually check on bundlephobia.com Apr 26 at 16:04
33

Leaflet all the way. I feel like Leaflet is the next step on the evolution of the open-source tile-based browser clients. Ka-Map -> OpenLayers -> Leaflet.

Leaflet is simple to use and does exactly what it says on the tin. OpenLayers has become bloated by trying to be all things to all people, Leaflet does 20% of things that are required 80% of the time.

1
  • What about supporting vector tiles in OpenLayers vs Leaflet?
    – QMaster
    Dec 20, 2020 at 16:17
25

Though I used Leaflet in my webGIS application, OpenLayers has much more advantages over Leaflet. For example if you want to use your application in mobile devices, OpenLayers is a must for the time being.

There are lots of resources related with OpenLayers, however I think developing application with Leaflet is easier than OpenLayers (it is easier to read a code and understand the structure). If you have a time limitation and have a little experience with JavaScript, using Leaflet might be a better solution to get it done faster. Or if you want to develop a very simple application, Leaflet can be much easier to adapt at first.

But after I developed an application with Leaflet, now I say I wish I had used OpenLayers at the beginning. Because when your application becomes complex (such as calling complex layers from a database, developing a robust mobile application, etc.), Leaflet starts to limit your abilities. So, I think spending a little more time to understand and learn OpenLayers structure at the learning stage will eventually worth it.

As the project details considered;

  1. Use the map interface to fetch Feature Info:

    Both Leaflet and OpenLayers can perfectly do that. The point here is to get the click event's coordinates and send request to the server. The request link will be the same for both applications.

  2. Create a customized tool that takes the lat/lon from user as to where he/she clicks on the map and then fetches the Climate Data from the raster (which is handled by a py script on the server):

    I achieved that myself in Leaflet (I was also calling the climate data by the way). I wasn't fetching the raster data from a server but the point here is to create a request link, which is easy for both applications. However if you want to select a polygon at this stage it is a bit hard on Leaflet to achieve.

  3. Allows user to upload excel, which is sent to the py script, which returns a GeoJSON, which creates Vector Features on the map:

    Approximately the same line of work for both Leaflet and OpenLayers. I can't say which one is better.

  4. Allow user to create vector polygons, which will fetch the Features it intersects from the WFS Layer:

    I have no idea about OpenLayers editing abilities but Leaflet has a plugin called Leaflet Draw, which is easy to use and manipulate the drawings (on javascript side) after drawing is completed. Also Leaflet has a WFS-T support if you want to manipulate the spatial data on WFS server. OpenLayers might be better than that, I don't know.

  5. Fetches Layer from the PostGIS Datastore on GeoServer and displays the layers on the map:

    Definitely OpenLayers is better for this job as it is easier to connect PostGIS server.

By the way, there is an application suite called OpenGeo Suite that includes OpenLayers, GeoServer and PostGIS; which will solve all the problems a web based GIS application developer has.

0
14

There is a great comparison on the two frameworks in this presentation:

Leaflet vs OpenLayers

And another article also has a great summary:

Customers often ask us, “Which is the best client-side JavaScript mapping library to use when building a modern web app with the Map Suite WebAPI Edition?” Like a lot of things in Software Development, the answer isn’t always clear. The answer depends on your requirements and development preferences. Since both frameworks are well documented and work solidly on mobile devices, we usually ask the following questions to help our customers make the right decision.

How simple is mapping portion of the app you are building?

The simpler the mapping requirements, the more we lean toward using Leaflet. Leaflet does a fantastic job of handling the most common mapping tasks like consuming base map tiles, panning, and zooming, and its API is easy to understand and simple to use. Once you go beyond the common tasks, however, you need to use Leaflet Plugins and this where things become more complicated. There might be functionality that you are looking for that unfortunately doesn’t exist.

If you have a feature rich application with lots of functionality, we gravitate toward using OpenLayers 3. OpenLayers 3 has a larger and more complex API that will allow you to do all of the common mapping functions that Leaflet does plus many more. For example, if your application has requirements involving map projection, OpenLayers 3 will allow you to accomplish these requirements more easily than if you are using Leaflet. Of course, with a more robust API comes a steeper learning curve, so keep that in mind when providing estimates to your project stakeholders.

How much JavaScript code do you want to write?

Since Leaflet is a higher level API than OpenLayers 3, it usually takes less JavaScript code to get it up and running. Once you want to deviate from the standard functionality that Leaflet provides, however, it is likely that you will end up writing a lot of code unless there is a plug-in that meets your exact needs. On the other hand, OpenLayers 3 is a lower level API which requires more JavaScript coding to initialize and set up the map. This can be convenient when you have customized and complex requirements, as the API allows more control over the map and your data.

Summary

In closing, there are times when it’s best to use Leaflet and times when OpenLayers 3 wins out. If your mapping requirements are simple, it’s in your best interest to check out Leaflet first. But if you’re looking for a mapping library that is more customizable and don’t mind getting dirty with JavaScript development, reach for OpenLayers 3.

Since both libraries have their strengths, we have included code samples for both Leaflet and OpenLayers 3 with the Map Suite WebAPI Edition that can be downloaded through Product Center or viewed on the ThinkGeo Wiki. These samples are useful resources when deciding which client-side Javascript mapping library to use for your app because you can see first-hand the different user experiences and coding requirements between the two libraries.

From http://blog.thinkgeo.com/2015/09/08/leaflet-vs-openlayers-3-which-is-the-better-client-side-javascript-mapping-library/

6

I've just gone through this decision for my new mobile project and the clear winner is OpenLayers. Leaflet, as of this writing, was rather sluggish on mobile. The transitions for pan/zoom did not feel smooth and it was disorienting at times. Short of going native, I tried OpenLayers and the experience is much better. Still not as good as native, but definitely usable and a real option.

5
  • 1
    Interesting. I would have expected Leaflet to be lighter and smoother on a mobile device. Thanks for sharing this experience.
    – LarsH
    Sep 10, 2014 at 23:29
  • @Christian Fritz - was your experience with OL3 or OL2?
    – sfletche
    Sep 11, 2014 at 20:04
  • 2
    @sfletche the comparison was between OL3 and leaflet 0.7.3 Sep 11, 2014 at 23:02
  • 2
    Three years later, how do you feel about Leaflet & mobile devices? Any improvement? Aug 7, 2019 at 12:50
  • 3
    yes, definitely. We use leaflet in production and don't see any issues on mobile. Aug 9, 2019 at 19:07
5

It depends on what you are trying to do. Leaflet is simpler and faster for 80% of web map projects.

The same way you don't need a spaceship to go around your neighborhood, most of the time I found OpenLayers way too complex to do really simple things, specially from Version 3.

For example, creating a layer selector takes maybe 5-6 lines of code in Leaflet while in OpenLayers 4 you have to build it from scratch. You have awesome tools to do it, but most of the time you don't want a customised layer selector, just one that works fine.

Another important thing to consider is that most of the information, tutorials and debates around the internet are about OpenLayers 2. They are out of date, as Version 3 is not compatible with Version 2. And we're now on Version 4. Version 2 had a lot of simple stuff like layers selector, popups, etc. along with more complex functions; but for whatever reason they just deleted those kinds of things in order to evolve towards a complex and very powerful system. Furthermore, there is a lot more information now about Leaflet than in 2012, and it's a more mature technology.

As a conclusion, ask yourself if you need a car or a spaceship. You won't fly with a car, but driving a spaceship to go shopping can be really complicated.

3

I'd say check the API documentation for both. For me it seems that OpenLayers offers an extensive bunch of features, however the development/debugging time is longer.

Leaflet is sexier and much more easy going rather than the OL, however if you want to do a lot with your map, I think someday you might need a feature which is not implemented in Leaflet yet!

I really recommend to take a look at APIs! OpenLayers & Leaflet

Also you might need to consider that current stable release for Leaflet is 0.5.1 but it's 2.12 for OpenLayers.

P.S. If I want to develop a mobile application, I think I might go for Leaflet.

3

There is a basic tutorial that compares the APIs of both OpenLayers 3 and Leaflet by having you build the same thing in both of them. It is written by Astun Technology and the tutorial tasks are:

  • Basic map with OSM tiles
  • OS-GB Map with Ordnance Survey tiles
  • GeoJSON layer with markers
    • Info for GeoJSON layer
  • WMS layer
    • Info for WMS layer

Here's the link: https://astuntechnology.github.io/osgis-ol3-leaflet/index.html

0

Not the answer you're looking for? Browse other questions tagged or ask your own question.