PROGRAMOVÁNÍ

Která knihovna je lepší? Leaflet, OpenLayers nebo MapBox GL? V diskuzi na Hacker News se dozvíte detaily

open-layers-knihovna-diskuze-hacker-news


Začátkem listopadu 2019 byla vydána nová verze knihovny OpenLayers, aktuálně ve verzi 6.1.1. V polovině prosince na to upozornil někdo na Hacker News a hned se rozjela sofistikovaná diskuse, jak kterou knihovnu používat na co. K dispozici v podstatě přicházejí tři hlavní knihovny: Leaflet, OpenLayers a MapBox GL.

 

mourner 

Leaflet author here! Just wanted to note that if you haven’t looked into OpenLayers in a few years, you absolutely should — it’s astonishing how much it progressed: from something that I was so frustrated with that it prompted me to write Leaflet in the first place (11 years ago) to a modern, fast, well-engineered and lovingly maintained library.It’s especially great when you’re doing complex GIS stuff and need a ton of features and formats supported out of the box. As for other libraries, I’d recommend Leaflet for simple maps, and Mapbox GL for rich, highly interactive apps that benefit from vector rendering tech (I’m biased since I contributed to both), but it’s great to have OpenLayers in the mix — there’s a library for anyone’s needs, cross-inspiration moves all three forward, and the mapping software landscape in general is greater than it has ever been.

guu

Thanks for creating Leaflet and Mapbox GL!Do you have any specific examples of „complex GIS stuff“ (Uses OpenLayers) or a „highly interactive app“ (Uses MapBox GL)?

Are there any big feature gaps from leaflet->mapbox-gl that developers should consider when choosing a mapping library?

mourner

Note: I didn’t create Mapbox GL, I’m just a part of the core team: https://github.com/mapbox/mapbox-gl-js/graphs/contributorsDon’t have any particular OpenLayers examples in mind at the moment but it’s very heavily used in government, enterprise and academics — sectors that often need advanced projections, use various obscure formats / protocols and prefer all the features to be packed in one product and maintained consistently by one team.

For Mapbox, here’s a showcase https://www.mapbox.com/showcase. It especially shines in apps that need to render hundreds of thousands of features at once, maximum customization in how the map looks and feels, updating map appearance dynamically in real time, or some cool animations.

In terms of features, Leaflet has a huge plugin community and there’s a plugin for pretty much any feature since it has been around for 8 years, although their quality varies (the core is top-notch though). Mapbox GL will need to catch up on that front certainly, but on the other hand, there are things that are simply not possible with raster-based mapping libraries — things like making any feature you see interactive, changing the map appearance in real time, rendering millions of features (with high perf viz features like clustering, heatmaps, advanced labeling etc.), and general smoothness of user experience (smooth zoom transitions, labels adjusting to rotation and pitch, etc.). 

claylimo

To answer your question: Leaflet.draw is superior to mapbox-gl-draw. mapbox-gl-draw is very lightly maintained and is not as full featured as Leaflet.draw. mapbox-gl-draw sounds like it may also be no longer maintained by Mapbox in the future either – refer to the recent GitHub issue on the repos that hints at this.There are mapbox-gl-draw plugins to make it comparable to Leaflet.draw but these are features IMO that mapbox-gl-draw probably should have had in the first place.

So, as someone who works with mapbox-gl-js a lot, that is something I see as a gap.

segheysens

What are the biggest features gaps you think are missing from Leaflet.draw -> gl-draw? definitely hear you on the „very lightly maintained“ front, but I may be interested in submitting some PRs to gl-draw that mirror Leaflet.draw functionality if there’s specific functionality folks are looking for

jdance

For complex GIS stuff in OpenLayers, you can do stuff like connect to a GeoServer instance and edit features with a ready made protocol like WFS-T. I have been involved in making these kind of tools for enterprises, like editing address points and routing paths in the browser, with transactions and edit sets and things like that.When I was working with this stuff, Leaflet was more „view only“ and not so much editing. This was back in the „have to support IE6“ days. I remember trying Leaflet for a simple project, but gave up since I could not set a bounding box for panning (the map was only supposed to show a limited area of the world), while OpenLayers seemed had every API feature one could wish. Although more bloated, less polished 🙂

CalRobert

Thank you for building leaflet. It (and scrapy) are how I wound up finding the house I live in now – a quirky, dirt cheap cottage I’d never have taken note of without the tools to filter and visualize a whole country’s listings.

fartcannon

You wouldn’t happen to have the tools to still do that, would you?

CalRobert

I used them to make gaffologist.com if you happen to be in Ireland.

fartcannon

I don’t, but well done all the same.

anomie31

What country and how did you get their listings

CalRobert

Ireland (helps that it’s small!) And Scrapy

ughitsaaron

Thank you so much for all the work you put into creating and maintaining Leaflet. It’s pretty remarkable how much time and energy you (and others, of course) put into making something so complex so intuitive.

iguessthislldo

I’m gonna hop on the bandwagon and thank you as well. My senior project was built with Leaflet.

rickette

When compared to the other two major OSS libraries I would say:– Leaflet. Widely known, suitable for mostly simple use cases.

– Mapbox GL JS. State of the art library based on WebGL. Mapbox started off with a fork/extension of Leaflet called Mapbox.js but over time has moved on and created the Mapbox GL JS library from the ground up. Very fast, but requires a GPU due to WebGL.

– OpenLayers. Often used by more professional users. Probably the most features complete library. Also usable without a GPU.

giancarlostoro

Thank you so much for this, I was wondering what the differences were. I’ve used Leaflet, but not OpenLayers or Mapbox.

baroffoos

What do you mean requires a gpu? Doesn’t all computing with a gui require some kind of GPU?

bmn__

He means a GPU with 3D acceleration.

atombender

Speaking of, does anyone know a cheaper service than Mapbox and Google Maps for raster tiles?I have an app that uses Leaflet for rendering, and Mapbox purely for its raster tiles (both plain maps and satellite required). Mapbox has been cheap for us, at about $50/mo. But with the new pricing structure taking effect in December, it’s now about $450/mo. I believe Google and Bing are both more expensive than that.

I’ve been considering setting up OSM, but I’d like to avoid having to run and maintain it.

bransonf

If you can find the time to set it up, OpenMapTiles [0] is the way to go. In the long run, you’ll probably save more money than the time it takes to manage.[0] https://openmaptiles.org/

atombender
Interesting, thanks. Unfortunately, those tiles are pretty ugly compared to Mapbox, but it might be an option if I can’t find anything else.Edit: Also it’s $1,000 for commercial use, even to use with OSM data?
bransonf

You can style the tiles or use your own.Where did you find the $1000 quote? I know you can have them hosted unlimited for $245/month but I was fairly sure it was free for self-hosted use.

reply

atombender

Update: So if you run the server locally and select maps, you’re presented with this screen, saying you need a key from openmaptiles.com: https://i.imgur.com/NTb5zIL.jpg.If you select „commercial product or company web“, you’re asked to pay for it: https://i.imgur.com/TrAmju4.jpg

If you select any of the non-commercial ones, the newest map data you get is from 2017 (!).

I’m not against paying, but it’s not free!

kylebarron

Docs for building the tiles yourself are here [0,1]. It’s worked really well for me so far. If you want a visual example of self hosted tiles, you can check out my (in progress) website [2]. The tiles are all hosted statically in S3 with cloudflare as a proxy, so it was pretty cheap.[0]: https://github.com/openmaptiles/openmaptiles/blob/master/REA… [1]: https://github.com/openmaptiles/openmaptiles/blob/master/QUI… [2]: https://nst.guide

vetinari

The point is to generate your own; the purchasing option is if you don’t want to generate your own, but want something done for you and packaged.See here: https://openmaptiles.org/docs/generate/generate-openmaptiles…

atombender

Thanks, I will look into that. It’s not altogether clear from their site — their Docker image basically implies that you’re supposed to use their pre-existing datasets, which aren’t free.

mycall
atombender

It’s a little unclear to me. But from what I can gather, the basic software can download data from OSM, but if you want hillshading or satellite, you have to get that separately, and it’s part of the $1,000 „production package“ [1], which is actually $2,048 for businesses, plus $1,024/year for updates.[1] https://openmaptiles.com/production-package/

kylebarron

I have a couple open source repos for generating hillshade and contours (raster and vector, respectively) that I use with my self hosted tiles at nst.guide. The data sources I’m using are US only, though SRTM is a common choice for international Digital Elevation Models.[0]: https://github.com/nst-guide/hillshade [1]: https://github.com/nst-guide/contours

atombender

Awesome, thanks

atombender

Forgot to answer about styling. Yes, looks like custom styles with the production package (which has hillshading, which ends up making the maps look much nicer) is much better. For some reason their main demos don’t show off their best map styles.

dwnoble

It’s only $20/mo for their commercial cloud offering: https://www.maptiler.com/cloud/plans/

atombender

Only if you’re below 500k raster tile downloads per month. The app I need this for is at 5.5m/mo, so it’d be a little more than $245/mo. Still better than Mapbox, though.

TomMarius

Could you send an example of a great looking map?

atombender

Mapbox’s tiles are very good. I particularly like the hybrid terrain + road mode, which you can see here: https://homes.stltoday.com/search

kylebarron

I agree that layer is gorgeous.I think the best open vector map style is OSM liberty [0]. My fork, which includes my generated hillshade and contours, is here [1].

[0]: https://github.com/maputnik/osm-liberty [1]: https://github.com/nst-guide/osm-liberty/blob/gh-pages/style…

sciurus

For anyone curious like me about Mapbox’s new pricing structure taking effect now, they’re at https://blog.mapbox.com/new-pricing-46b7c26166e7

baroffoos

Those prices look good. I remember last time I checked they had a very good free plan but you had to jump right up to the very expensive enterprise plan if you had an internal app even if it was tiny.

lukeqsee

We built Stadia Maps to save you the trouble and the expense.https://stadiamaps.com

Happy to answer any questions! (I’m a cofounder.)

echelon

Really unfortunate that Google Stadia has a name collision with y’all. 🙁You don’t even show up in the „stadia“ search results without the term „maps“ added.

If it wasn’t scary and expensive to sue Google for a name change, this seems like a case of Google (probably unwittingly) crushing your brand and trademark with their own.

Have y’all noticed a decrease in search traffic (or general brand/product awareness) since Google Stadia launched? And if so, do you plan to do anything about it?

Really cool product! Your maps look slick and super clean. 🙂

lukeqsee

Thanks for the kind words! We appreciate it.> Have y’all noticed a decrease in search traffic (or general brand/product awareness) since Google Stadia launched?

We’ve actually seen an uptick because of badly placed keyword searches for Stadia.

We also aren’t exactly sure the best way to counter it, but we’re working on figuring out the best way. We don’t really have a legal resource, either, given we didn’t have a trademark before Google Stadia came along.

baroffoos

Its ok. Stadia is a google product, it wont exist by the end of 2020.

atombender

Cool, thanks. Pricing looks good. I’m not able to check out your product because your service appears to be down right now…?

  $ curl 'https://tiles.stadiamaps.com/styles/alidade_smooth.json'
  <html><body><h1>502 Bad Gateway</h1>
  The server returned an invalid or incomplete response.
  </body></html>

Tried from multiple locations to make sure.

lukeqsee

Yeah… 🙁Very unfortunate timing there. We had a cache server wedge, and the failover mechanism didn’t detect it quickly enough. We’ve diverted traffic manually and are working on bringing the bad region back into the mix after it went down.

Things should be working again now, at least.

atombender

Confirmed. Thanks!

mdasen

https://stadiamaps.comStadia Maps is pretty cheap. $25 gets you 25,000 map views per day or around 750k/month. $100 gets you 250k/day or around 7.5M per month.

CalRobert

I’ve been very happy with Thunderforest and they’re pretty cheap. https://www.thunderforest.com/pricing/

ruffrey

We are hosting about 150GB of map data, raster and vector, with the following stack: – MapProxy with Redis cache – MapServer for rendering – PostGIS for data storage

Shakahs

I went through the various providers and ended up using MapTiler Cloud, it is the cheapest option I know of besides generating and serving your own tiles.https://www.maptiler.com/cloud/plans/

joe-mapbox

Hey, @atombender.Joe here from the Mapbox billing support team. Feel free to reach out to help@mapbox.com. We can dig into your implementation with you to see if there are ways to limit your API consumption (and reduce your overall bills).

Things like limiting panning/zooming can help limit the number of tiles your end users load. Fewer tiles -> cheaper invoices

https://docs.mapbox.com/mapbox.js/example/v1.0.0/maxbounds/

There are other options as well. That said, it’s hard to know exactly without taking a look at your map specifically. Let us know!

roelschroeven

You might have a look at HERE. If your needs fit comfortably in their Freemium plan, it should cost not very much at all.Their website is quite confusing though, if you ask me. A starting point might be https://developer.here.com/sign-up?create=Freemium-Basic&kee…

durkie

I’m in a similar boat, looking to generate my own vector tile static images (basically raster tiles with fractional zoom levels). I use a fair amount of these, and there’s no service that lets you cache them (of course). Seems like Mapbox and Maptiler are the only games in town.

geuis

Don’t know about cheaper, but Planet (planet.com) offers daily imagery. Worked there a few years ago.

andrewshadura

OpenLayers was one of the first open source libraries of this kind; sadly it’s lost some development momentum back when everyone was using it in 2008 or so, and nearly everyone switched to (then faster) alternatives like Leaflet.

jackinloadup

Anyone know how OpenLayers compares to Leaflet today?

Waterluvian

Not to blow my own horn but my background is very intimately in Web-GIS (Bachelor’s and Master’s in geography), my career for 7 years has been in robotics and building web-UIs for real-time robotics GIS, so I think I’m probably an expert here.I’ve used Leaflet for a few years and now OpenLayers for about 5 years to author UIs for monitoring robot fleets in real-time as well as build Web-GIS applications for mapping and configuring, autogenerating, validating the spatial datasets (fiducials, SLAM data, navigable positions, „zones“, „pathways“, etc.)

Leaflet is what I’d say will fit most people’s needs when it comes to your standard web-map use cases. It’s a beautifully designed library with a good level of modularity and lots of plugins. The API is great.

OpenLayers shines when you get into a lot more complex stuff. The symbology engine is phenomenally powerful and I found that the API plugs into more complex Redux-style state management in a more easy way than Leaflet.

I also found performance when doing high-volume, high-frequency data updates and interactions to be faster with OpenLayers.

That being said, I haven’t dug deeply into Leaflet in about a year and things can change quite quickly!

I suspect the overwhelming majority of developers aren’t doing anything all that novel or complicated. They’re not making Web-GIS applications and probably will do just fine with either.

jackinloadup

Thanks for your perspective

bransonf

Well, I think it has better (official) WebGL support than leaflet, but most all the developers I know are jumping to Mapbox by default.EDIT: My favorite open source library right now is maptalks. Basically mapbox sort of functionality and rendering, but totally free.

Demiurge

In what way is mapbox-gl not free? It’s developed in the open, and works with all types of layers. I switched to mapbox-gl the moment it came out, because I already was making my own vector tiles as needed for interactive maps.There is only one issue I encountered in the short few years it’s been my go-to choice, which is that there are no plugins to integrate Google Streetmaps or Streetview. There are however, for leaflet as Google Mutant and Leaflet Pegman.

What is the level of maptalks integration with Google layers? How is it better than mapbox-gl?

EDIT: There is an issue with the zooming and baselayer being completely out of sync with the buildings here: https://maptalks.org/gallery/extrude-buildings/index.html

bransonf

Maybe I misunderstood, do you only pay for the tiles on mapbox? I’m just accustomed to having to use a restricted api key with mapbox.If that’s the case I’m totally ditching maptalks for all it’s quirks.

And I don’t know of any libraries for google street view integration, but a dev I work with has done a fantastic job of integrating street view with map box. I’ll try to dig up some of his code

Demiurge

For some layers my projects do pay for MapBox tile service, but for other projects I use OSM extracts and self-made vector tiles. Mapbox charges only for the tile services, and there are multiple data sources out there, with which mapbox-gl works. It honestly the smart thing to do, as without such flexibility, I wouldn’t be using their services or libraries at all.> but a dev I work with has done a fantastic job of integrating street view with map box. I’ll try to dig up some of his code

This would be a pretty popular library, I am sure! The issue is that the Google EULA prohibits the use of their data directly, it has to be accessed using Google Maps SDK. So Google Mutant Leaflet plugin has to use the API to download the tiles and then exposes the Google Layer a custom Leaflet Layer, but it works 🙂 On the mapbox issue tracker, they close all issues inquiring for help in implementing such a custom layer, so if your coworker did this, I’m sure it was a non-trivial exercise, kudos to him! 🙂

nkoren

We use OpenLayers extensively in my company (https://www.podaris.com), and we push it really, really hard. It’s the basis for a parametric CAD system, a bunch of GIS tools, and most recently, transport micro-simulation. It had a steep learning curve, but has held up remarkably well over the years, with remarkably few instances where it’s been the bottleneck.Definitely recommended!

maliker

We used openLayers, ran in to performance issues, switched to Leaflet, and couldn’t be happier. Just our experience, for what it’s worth.

zefman

We had the exact opposite problem! We built a custom webgl rendering layer on top of leaflet to get around leaflet’s performance issues. We have now switcher to openlayers and very happy. Guess it depends on the exact use case.

maliker

Sounds like we should do some more OpenLayers testing! Thanks.

k__

I used Leaflet and had to do some things with realtime visuals in D3 as overlay for Leaflet, because of performance issues.

maliker

We switched the opposite direction (D3 to Leaflet) on a different app and got a performance speed up for big sets of vector shapes. Seems like there are tons of ways to engineer these web graphics apps and no clear „best solution“.

Demiurge

What kind of performance/use case did you have? I haven’t touched leaflet since the giant rewrite.

maliker

We were just trying to get a ton of circles (electric vehicle ranges) on a map.We were going to do something to optimize it in OpenLayers by simplifying the shapes, but when we tried it in Leaflet it just worked a lot faster (fast redraws). We think it’s something around how Leaflet dynamically switches to a canvas renderer for big datasets.

pkalinowski

Some time ago I checked out three libraries for my amateur small navigation app:Leaflet – it doesn’t have map rotation, so it was a dealbraker for me. People on Stack Overflow were talking about ugly hacks, I didn’t want to go into the rabbit hole.

Mapbox – I found docs little clunky (again, I’m amateur so it may be the reason I didn’t get it) and couldn’t really work out what’s paid and what’s free. Didn’t spend a lot of time on them, though.

OpenLayers – I think it’s the best one feature-wise, but documentation is rather for more advanced developers. I struggled a lot before finally grasping how it works and still, it’s not easy. Getting started guide like Vue.js has would be immensely helpful.

I ended up with OpenLayers and I’m pretty satisfied for now, despite needing fairly long time to actually implement features properly.

moonfleet

We use OpenLayers at our company. We are building an interactive map with a bunch of tools for measuring distance, calculating routes, drawing features, displaying diagrams right on top of the map, and OpenLayers is doing wonders for us. It has a steep learning curve but once you grasp the fundamentals, you can figure out how to do all kinds of magic tricks with it.

nkoren

What’s your company?

moonfleet

It’s a small company that creates software for the public sector in Kazakhstan.

ghgr

What a coincidence! I discovered OpenLayers yesterday when looking for a way to display a 1 Terapixel image. I got it up and running in a few hours. Kudos to the developers!

degenerate

Are you serving it as a „static image“ or using a different method?https://openlayers.org/en/latest/examples/static-image.html

ghgr

I followed a tiled based approach, as explained here: https://openlayers.org/en/latest/examples/localized-openstre…Although the image is not a map at all, I tiled it and served it as a custom map layer. You can view it at https://finance.alisio-computing.eu

degenerate

Thanks for sharing! One more curiosity – what PNG compression tool was used and how long did it take to crunch 216GB to 17GB? I’m surprised it didn’t crash.

ghgr

I didn’t compress an actual image from 216GB to 17GB. Instead, I created the highest resolution image already as a set of tiles (each one 5000×10000 px). Then I tiled them further in two additional zoom levels, until I got 4×8 square tiles of 1250x1250px. From there I worked backwards merging chunks of 2×2 tiles.The figure 217 GB comes from the cumulative size of all the pandas DataFrames containing the whole dataset (as mgspack files). The lossless compressed figure comes from the total size of the highest zoom level.

It didn’t take that long, it was mostly done overnight (so around 10 hours in a i7 server with 24 GB RAM).

degenerate

Thank you for the detail.

drchickensalad

I don’t think it’d be the static image because that downloads the entire thing. I assume they got some tiling work done to break it up.

mzur

I like OpenLayers. We built a rather complex image annotation tool around it and OpenLayers worked well with all the features we added over the years, recently even a full-blown video annotation tool. The community is nice and active, too. Best of all: It’s still compatible with our old school way of JS development. The only thing I’m missing is the API documentation of older versions which they seem to have dropped at some point.

herogreen

What is the advantage of having the documentation CC-BY 3.0 licensed ? In cases where documentation is generated from the code it seems more convenient to use the same license for both.

n1vz3r

I used OpenLayers back in 2008-2011 for mapping-heavy web application. It was of very high quality, and had great API documentation (using DoxyGen, iirc). Taught me some things about pre-modern-craze Javascript programming (i.e. how to correctly implement inheritance in JS)

kls

just did a port from a custom D3 map solution to OL due to mobile requirements. I can say the OL’s mobile support is first class.

nickik

Can I get topological maps without roads and so on with this? Is their hight data?

widforss

This is a library for presenting map data, you have to specify your map source yourself.

jascii

USGS Topo tiles are available to use with web-mapping libraries: https://basemap.nationalmap.gov/arcgis/rest/services/USGSTop…

 

/ foto Alex Shutin, Unsplash