Leaflet 1.0 – A JavaScript library for mobile-friendly interactive maps | Hacker News Reader

Leaflet 1.0 – A JavaScript library for mobile-friendly interactive maps

leafletjs.com

628 pointsfreyfogle99 comments

Leaflet is a great library, I never would've guessed that they hadn't reached 1.0 given the completeness (for my use case anyway) of the library, quality of documentation and it's ubiquity.

It might not be build on the latest reactive, functional style but I think it's one of most useful javascript libraries I've used.

I had the same experience and reaction. Leaflet is so nice and clean, it's a constant pleasure to use.

I miss coding maps... ;-) Are there ideas somewhere of things to do...?

Clown locator.

Please.

You could go to the census fact finder, grab some data (scoped at census block level) and a few census block shapefiles for your state, and get to work. Repeat for counties, cities, etc. Census data is seriously cool, and easy to work with.

[0] http://factfinder.census.gov/faces/nav/jsf/pages/index.xhtml

[1] https://www.census.gov/cgi-bin/geo/shapefiles/index.php

Are you familiar with PolicyMap?

https://www.policymap.com/

I haven't heard of them. Looks pretty cool, thanks for sharing.

US election is going to be hot topic soon.

Surely you could do some novel visualizations using maps.

I've been working a bit with open data associated with congressional districts, and I'd like to do a visualization of boundary changes over time. There may be some interesting data features associated with places that have been subject to frequent redistricting.

https://www.census.gov/geo/maps-data/data/tiger-line.html

ftp://ftp2.census.gov/geo/tiger/TIGER2016/CD/

I love Leaflet (and contributed quite a bit over the years).

The layer architecture can be easily combined with React. Just write react-components for the layers, shapes, or markers and use React's lifecycle-hooks to add/remove them from the map.

https://gist.github.com/fab1an/f040edbd939989d3a2557f15d2b9e...

Thanks for the contributions and for the example! I'm just getting started with React and its useful to see examples with integrating non-react JavaScript libraries like leaflet.

https://github.com/PaulLeCam/react-leaflet

Why was this downvoted? Is there something wrong with this approach?

FWIW a recent RxJS book uses leaflet in an example.

I've used Leaflet on not-insignificant-sized projects and had nothing but a great experience. Great docs and really stable!

Although their docs are great some examples on the documented stuff would really be nice. I struggled a bit on some but other than that the simplicity of it is really great. Would definitely recommend for someone who's starting out on maps.

Agreed - working out how to build Leaflet controls was really tricky, and I still didn't advance much past buttons and popups.

Some years ago I created Mapturbate using the Leaflet and the Chaturbate webcam feed. Definitely NSFW.

http://mapturbate.com

Doesn't seem to display anything but the map for me. No points marked on it.

Leaflet is great, but I would steer clear of any library that attempts to wrap it to work with a different API (aka Angular-Leaflet). Several weeks of my life were spent trying to get our Angular app to play nice with Angular-Leaflet, and we ultimately decided Angular-Leaflet was too much of a mess to keep around.

I'm curious what approach you used after giving up on angular-leaflet? I've had a similar experience moving apps to Angular and working with Angular leaflet. Thankfully I work with a great consultant so didn't lose weeks but angular-leaflet is definitely not the clean experience that leaflet.js is.

I ended up writing an Angular directive that modified the DOM via jQuery. It was gross, but it took Angular out of the equation and allowed the implementers of the directive to still use Angular and still have the same functionality they wanted.

Hmm.. I have a small project I'm working on using Angular Material and Leaflet. I had to make one small change to Angular (annoying since I can't use a CDN) but aside from that I'm happy.

If you're curious, you can see an early example at https://www.lanesurfing.com/

agreed. just use it raw. Or with mapbox

Went through the same pain making http://mountains.io a few years back! Definitely use the native library.

Just used Leaflet for a client project - works great. I'm using the Mapbox tiling layer and it is a lot lighter & less cluttered than Google maps.

For the React crowd, check out react-leaflet:

https://github.com/PaulLeCam/react-leaflet

Kudos to Leaflet for putting "an open-source JavaScript library for mobile-friendly interactive maps" right there at the top of the page. So many projects that get release announcements here don't even mention what they do in the linked article, and you've got it right on top, and it's nice to see a project doing the right thing.

A fascinating use of Leaflet is in LibreOffice Online. LOO uses Leaflet to load pixmaps of the document on demand.

https://www.collaboraoffice.com/community-news/libreoffice-o...

Leaflet is fantastic. Once my project got really big, I moved to OpenLayers and havent looked back. But I would start a smaller project using leaflet again. Very approachable library.

What about OpenLayers makes it easier to use for really big projects? I've used leaflet, never used openlayers, would love to hear.

OL3 can do map rotation, has Canvas and WebGL output on top of DOM like Leaflet, the projection with different CRS are better handled, more API to do geo calculation, but it has a bigger size.

You can (and usually should) make your own custom build: http://openlayers.org/en/latest/doc/tutorials/custom-builds....

Even a custom OL3 build which only has the canvas renderer, a WMS layer for background and a Vector layer for POIs does not get smaller than 200k. I think leaflet is half the size.

And I find this to be even more astonishing as OL3 uses Googles Closure compiler who's very advantage should have been better JS minification (not only minimizing/uglifying but actually removing JS parts that are not needed).

Leaflet maintainer here. There is some work on a rotation code branch, plus I've been working on something called "Leaflet.GL" to do WebGL rendering. The OL3 folks just have more time and resources, you know. Also Leaflet must still work with IE8 (OL3 doesn't, there are some cases where that's needed).

We have a friendly relationship with the OL3 folks, even though sometimes we're jealous of their WebGL rendering, and sometimes they're jealous of our lower learning curve.

There's a better separation of concerns that makes it easier to customize specific pieces of the project.

For example, OpenLayers divides fetching data (Source), parsing data (Format) and interacting with data (Layer) into individual pieces. So it's relatively straightforward to handle a case where someone decided to go invent their own data format without having to subclass half the system and patch it.

For smaller projects leaflet is significantly smaller and simpler, and definitely is the right approach. But if you need to do "a lot" with a mapping system OL3 probably has it built in and supported instead of maybe available as an extension.

Thanks for the info, much appreciated! As a general aside, I feel like there would be a good audience for a blowout article comparing the top mapping library pros/cons.

That's a brilliant idea. I wish I had that article years ago. I'd even consider writing it but I've never blogged and feel it would just be a murky mess. I'd happily collaborate though. =)

Is Mapbox moving away from Leaflet as they develop Mapbox GL?

Looks like it. That's kinda lame. But I guess I understand why they're doing it.

Why are they doing this?

mapbox-gl-js focuses on vector tiles and webgl rendering. I'm not sure if it even supports raster tiles, canvas and other "legacy".

Looks like it does support raster tiles: https://www.mapbox.com/mapbox-gl-js/example/map-tiles/

You are right.

It came to me, that after all, they have to, if they want to display ortophoto or satellite tiles.

I was thinking more in the terms of street maps or thematic maps, where mapbox-gl-js displays them in a very nice way using vector tiles.

It does support raster tiles, using them in production here.

How would you say it is compared to leaflet? much more complex?

We chose it mostly because at the time, it looked like it had more active maintenance from the people at Mapbox, and it eventually looked like it was going to pass Leaflet.

I wouldn't say it's more complex. mapbox-gl favors a more declarative style (look into "Map Style" in the docs), but the concepts are not that different than Leaflet.

Web GL features (such as video support) is an obvious advantage, and part of why we chose it. We don't use plugins for this project, so can't say much about that.

Hope they continue to contribute to Leaflet, especially seen as Mourner is on the Mapbox team.

Disclaimer: I'm the Leaflet author and I also work on Mapbox GL.

It's true that Mapbox currently focuses its efforts on GL, but they are not "moving away from Leaflet" — Leaflet will continue to be supported as one of the first-class clients to be used with Mapbox services (and GL-based styles have a raster tiles fallback). Leaflet is very mature, has a huge community, is suited for most simple mapping needs, is very easy to learn, and doesn't require a lot of development effort from the Mapbox side to support.

Mapbox GL on the other hand represents a vector rendering technology, which is very different. It is much more powerful than conventional raster tile based clients, and enables applications never seen before in the online mapping industry, but it's also many times heavier, more complex, and much harder to learn. Rendering vector data on the client is something Mapbox bets on as the future of mapping, but it's incredibly challenging to build, so it requires a lot of focus.

I'll continue to maintain both libraries — while they have some overlap, there's a place for both.

I love that I can ask a question like this here on HN and get an answer from the Leaflet author. Thanks for taking the time to respond.

Congrats. As a longterm and happy OpenLayers user (version 3), what are the main advantages of Leaflet over OpenLayers?

AFAIK, Leaflet is much easier to use. Other than that, I don't really know.

Leaflet focuses on being lightweight, fast, easy to use and suitable for most mapping apps, while OpenLayers is more geared towards GIS/academics with its vast built-in support for different formats and standards.

Leaflet maintainer here. AFAIK, Leaflet still has a nicer learning curve compared to OpenLayers (which doesn't affect long-term OL users like you, obviously), and a plugin ecosystem which allows for smaller library size.

The OL3 folks have been working hard on making OL3 leaner (see the "Faster, smaller, better" talk from FOSS4G Bonn here: http://video.foss4g.org/foss4g2016/videos/index.html), but I feel Leaflet still has an edge on that regard.

Also, OL3 depended on the Closure compiler for a long time, which made it difficult to interoperate with other frameworks, which is why a lot of React/Ractive/R/Django/Vue users choose Leaflet.

Other than that, there's no clear obvious advantage of a library over the other one. We have a friendly relationship with the OL3 folks, we try to copy some of their features, they try to copy some of ours, everything gets better in the end.

I've used Leaflet in the past with superb results. [1] It truly is an amazing library. People have never had an issue with my map. I agree with chickenfries's comment. Leaflet has won that that niche silently with its A+ in every important facet they've tackled.

[1] http://rsmap.net

Agreed. Fantastic tool. I've used it for everything including live maps, data visualization, and even as a layer for handing image zooming :P

Just recently I had to choose between Google's map offerings and Leaflet.

Performance wise, Leaflet is an order of magnitude faster when it comes to frequent bounds/location updates, speaking for itself. Great work!

You might also consider Cesium, which is WebGL based and gets you a globe view too.

Which basemap did you use? The biggest disadvantage of using Leaflet is that you lose access to Google's maps and APIs. That said, Leaflet is much much easier to debug than Google.

No, you don't lose access. You just have to work around some nuisances. Have a look at https://gitlab.com/IvanSanchez/Leaflet.GridLayer.GoogleMutan...

some nuisances? like having to load and use the google maps api.

I'm interested to know if this doesn't actually violate the google maps terms of service:

https://developers.google.com/maps/terms#10-license-restrict...

10.4(e): No use of Content with a non-Google map. You must not use the Content in a Maps API Implementation that contains a non-Google map.

That Terms contains some interesting junk.. for example is a webpage considered "software"?

10.5(f): No incorporating Google software into other software. You will not incorporate any software provided as part of the Service into other software.

Yeah, at that point I wouldn't be comfortable touching it.

My only complaint with Leaflet is that they haven't done anything to support older versions. At an old workplace, we were stuck on an older version for a while due to incompatibilities, and having never used Leaflet before I needed to see how to use the specific version we were on.

I ended up having to clone the repo where the docs were, checkout the commit released for that version and build the docs myself. Maybe I'm spoiled by react-router's phenomenal handling of outdated docs, but it was a pretty terrible experience.

At least it's possible. I'm stuck on an old version of ArcGIS JS, and the docs just no longer exist.

I agree that's not great. But I've seen much worse - where the docs weren't checked into the repo, and you're stuck with wayback-machine and a doc file that's only a few versions off of what you need.

Yeah, sorry for that — now that we're using a much better docs system, and will archive docs for older versions.

Leaflet is fantastic. I was going to use it for a project, but then I didn't do the project, so I haven't had a need for it yet, but the system is incredibly approachable and friendly.

If you're wondering what the project was: I was trying to integrate a Pokemon Gen 2 (G/S/C)-style battle system into a Go style map. Why? because I really wish that Pokemon Go was less disapointing, and G/S/C was a nice middle ground between interesting and incredibly difficult to implement.

Great news!

But upgrading all my maps to Leaflet 1.0 will take more time, because lots of broken plugins need to be fixed or replaced.

One of my maps for local realtime weather observation for sailing/surfing: http://gis.ee/meri/

For that map Leaflet is perfect, because its lightweight, fast, mobile friendly.

Haven't used leaflet in just over a year - is it still limited to north-up only? Because I find it difficult to describe any map library as "mobile-friendly" if you can't rotate it to match the direction you're facing.

Leaflet is amazing. The documentation is very straightforward and Leaflet makes it easy to produce high-quality maps in a short period of time.

I was doing most of my mapping work in R, but needed something interactive to use for a website and am very pleased with Leaflet so far. If you're interested in mapping I'd definitely try it out (interesting datasets would be city crime data and humanitarian data from here: https://data.humdata.org/).

So can I use this for the map in my game or should I look at something else?

EDIT: Looks like I can: http://leafletjs.com/examples/crs-simple/crs-simple.html

Is Leaflet the best option for this though? I just want to show an interactive map on the web of a really big PNG I have (much bigger than the one in that example).

I don't think it's really designed for games. It's more for stuff like event maps, theme park maps, office maps, transit maps, etc.

Thanks. What's the difference though? I don't want to show it inside the game. It will be on a separate website.

Personally I think it should be great for such use, especially with some improvements version 1.0 has (like the crs-simple) you mention. You will have to split your PNG image into tiles though, and ideally have different zoom levels available too (leaflet won't do that for you, but there are tools floating around)

It's really possible to use in online web games. I have participated in development of global map in wargaming: https://ru.wargaming.net/globalmap/ . It's turn based strategy for clan leaders in worldoftanks universe.

This makes interesting claims about performance but doesn't describe them. Are they all based on client-side javascript and graphics efficiency? I ask because it seems to me that the most important thing in map client performance is the ability of the tile server to quickly and consistently deliver tiles. Especially important is the tail latency. To experience this for yourself go to the Leaflet preview page[1] and change the base layer provider. It will be several seconds before all the tiles are drawn, even for several identical tiles in the middle of the ocean. Most of the tiles arrive in the first second but out of a hundred tiles on the screen there are the inevitable stragglers. And sometimes it just doesn't serve at all[2].

1: http://leaflet-extras.github.io/leaflet-providers/preview/ 2: http://pasteboard.co/8bnyEPXGC.png

Of course the performance claims only relate to Leaflet itself, not the server performance — Leaflet is server-agnostic (you can use it with any tile provider). The improvements will be noticeable in dynamic map apps with lots of vector data, markers, tooltips etc. on top of the map.

We recently decided to move away from leaflet for our indoor mapping component. There are some things that we discovered that leaflet is not good for:

1. Drawing annotations

There are plugin options but Leaflet editable is quite buggy and convoluted, and leaflet draw is still on 0.7 and we couldn't wait for their 1.0 upgrade.

2. Large image overlays

There is an awkward space between an image that the browser should be able to handle even if it's quite large, and one that requires tiling. We fell into that space and there are some seriously nasty bugs in Chrome when imgs are huge. Since leaflet just uses an <img> tag for overlays this was a killer.

3. Lack of map rotation

There is a fork that implements rotation, but we couldn't rely on that to stay up to date with mainline.

Overall I still really like leaflet and would use it in a heartbeat for any more normal mapping application.

Awesome! Congratulations!

FYI, if you are trying to use this with Webpack and Webpack's css-loader, you'll probably run into the problem noted at https://github.com/Leaflet/Leaflet/issues/4849.

Getting fixed in 1.0.1, to be out today.

Awesome. The one thing that is missing in the open source mapping community is a good geocoder.

Once we have that, adoption will come in waves. At the moment, nothing beats Google Maps, and their terms require you to use their maps.

Pelias [1], from Mapzen, is supposed to be good, if you can accept the dependency on Elasticsearch.

Last I checked it wasn't great for autocompletion, and it lacked some important features that Google's has (the "bounds" attribute in the geocoding result, for example, which is super useful if you want to determine the precision of your match), but maybe it's improved since.

[1] https://github.com/pelias/pelias

somewhat tangental to the topic, but are there any examples of applications using a flat mapping like this or google maps or openstreetmap that allow an avatar to explore it like you would a game - not jumping around but linearly, with control of speed? I've got an idea but I can't come up with a good way to control the movement that seems intuitive and easy. Clicking with a mouse on your desired destination and progressively routing would work, but curious if someone else is already doing something similar.

What you describe sounds close to what you get from google maps using the arrow key navigation. Is that a reasonable starting place? It sounds like maybe you want the "avatar" to stay on streets instead of moving freely, which could be interesting.

right, something like a character walking down streets the way you would walk down a hallway in a top down game. Trouble with arrow navigation is how to interact with intersections, especially complicated ones - roundabouts, more than 3 exits, etc.

Here's my simple project utilizing leaflet (1.0-RC1 actually) to display a procedurally generated infinite heightmap.

https://github.com/Mchl/simplexnoisemapgenerator

There's a link to a demo, but the machine it's running on is not really powerful, so expect poor experience. You'll do a lot better downloading and running the code on your own.

Glad to see Leaflet is still being developed. AFAICT, the main developer was MapBox, who's now using a WebGL based stack instead of Leaflet [1].

1: https://www.mapbox.com/gallery/

there's more nuance to it - see this comment thread https://news.ycombinator.com/item?id=12589647

- New L.Tooltip class for all your dynamic labeling needs.

- Flyover animations (zooming and panning in a curve with map.flyTo).

- Fractional zoom level support (map.setZoom(12.34)).

- Much better tile loading algorithm with less flickering.

Seems like a lot of features come straight from Mapbox GL

Author of leaflet works on Mapbox GL, so that makes sense.

Leaflet is incredible, I've had to switch to using google maps for my last few gigs, but I still haven't found any other libraries that are as painless for mobile as Leaflet can be.

It is one of the best things engineered I have seen for a long time.

Yay, I'm mostly excited about this: "Much better tile loading algorithm with less flickering" as it means it's much more suitable for games now.

Can't say enough great things about Leaflet. I have been using it for years as a lightweight replacement of OpenLayers.

We used it on an analytic dashboard project: so far so good -- overall positive experience.

Can you really have @ in urls? This is the first time I've seen this.

Their JS file url: https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.js

I first noticed that in Google Maps: https://www.google.com/maps/@37.7903791,-122.4318703,15z

https://url.spec.whatwg.org/#url-code-points

Used in step 2.1 of https://url.spec.whatwg.org/#path-state

Is mapbox going to work immediately with leaflet 1.0?

Reply on news.ycombinator.com