Leaflet: An open-source JavaScript library for mobile-friendly interactive maps | Hacker News Reader

Leaflet: An open-source JavaScript library for mobile-friendly interactive maps

leafletjs.com

321 pointsvmorgulis71 comments

Leaflet is an amazingly powerful tool. As others have mentioned, it makes it easy to use a variety of sources for the underlying map tiles; in my case I was able to replace the modern-day base map with a map of the Roman Empire for an interactive academic publication[1].

Another great feature that doesn't get as much attention is Leaflet's ability to handle non-geographic images. In the same publication I'm also using it as a general-purpose deep zoom viewer for displaying artifacts[2]. It's great to just use a single library to handle all of this.

Kudos to the Leaflet developers for continuing to improve such a great library!

[1]: http://www.getty.edu/publications/romanmosaics/catalogue/ita... [2]: http://www.getty.edu/publications/romanmosaics/catalogue/1/

Museum tech roll call! I picked up leaflet for the same purpose and it's worked great - http://collections.artsmia.org/art/1218/olive-trees-vincent-...

The Rijksmuseum "Rijksstudio" site has been around for a few years and adopted leaflet very early on for image viewing: https://www.rijksmuseum.nl/en/rijksstudio/artists/rembrandt-...

Perhaps of interest to this sub-thread is "IIIF" (the international image interoperability framework), an attempt to standardize access to images (and collections of images) with a JSON(-LD) metadata model: http://iiif.io/

Nice project!

RE: IIIF, we're interested in going in that direction as well. Fortunately it looks like someone already wrote a plugin for it: https://github.com/mejackreed/Leaflet-IIIF

PS - Hey Kjell! This is Eric from the Getty. It's nice to see there are other museum folks on HN!

Yep - I figured based on the projects, but didn't want to call out your real ID in case that mattered. Lunch out on your plaza sounds pretty appealing right now compared to the weather up here!

Very impressive achievement! Even compare to Google Institute: https://www.google.com/culturalinstitute/beta/asset/olive-tr...

That's awesome as an art history guy I never considered using leaflet for zooming like this. Ingenious keep up the fantastic work!

LeafletJS is awesome. It's an important open source offering within the OpenStreetMap ecosystem. If you're looking for an "OpenStreetMap API" for embedding a map, then you're looking for LeafletJS! ...or another one called OpenLayers, or various other lesser used options. You have a choice! With OpenStreetMap you also have a choice of where you get your map "tiles" from, or you can render and host them yourself. Check out this website which explains a lot more about the various options for making the switch to OpenStreetMap:

http://switch2osm.org

Leaflet author here. Thanks for the kind words everyone! A few core developers are here too. Ask us anything. :)

Any plan to support webgl in the future as mapbox gl does?

From a user perspective the difference is huge

WebGL is notoriously hard to use and requires tons of code for even simple things like drawing lines and polygons. (Disclaimer: I'm also one of the core developers of Mapbox GL JS)

One of our core devs (Ivan) works on Leaflet WebGL renderer, but I'd like it to remain a plugin, so that Leaflet stays true to its goal — to be as small and simple as possible.

Indeed! From my point of view, WebGL rendering for Leaflet makes sense, but it's very important to not remove support for browsers which don't implement WebGL right now.

MapboxGL is very performant, but it changes all the abstractions to the map elements, which is something I'm particularly not very happy with. Thus Leaflet.GL.

I really appreciate the work you do! It's great to be out of Google's ecosystem for this, as it is not extensible enough for my needs.

Is there any plan to add NPM support anytime soon? I tried using the NPM library but icons did not work (got invalid path error) so I was forced to use div icons.

The leaflet/npm ecosystem goes out the window when you take into account plug-ins as well, As they require script tags.

Thanks for all your hard work!

If the icons don't work when you use Leaflet through NPM, please report a bug at https://github.com/Leaflet/Leaflet/issues. This is certainly not an expected behavior. It might have regressed in recent versions.

I actually got it to work using DivIcons, but I felt it was kind of hacky (it was a div containing an image with a url to my marker).

Interestingly enough, the bug I was getting (can't seem to repro anymore) was already solved... by you! https://github.com/Leaflet/Leaflet/issues/766#issuecomment-7...

None of the fixes on that page worked, but using DivIcons did. If I can repro, I will definitely make an issue. Thanks!

Thanks so much for an amazing work. You guys certainly did mine much easier!

I just want to say that I have been using leaflet for visualizing datasets and appreciate your efforts.

Hey, again great stuff.

I have a small question while you are here...

In my application, when a user zooms the map.. the tiles and markers seem to get get zoomed at different rates, then finally snap back together at the end of the zoom.

Is this something I'm doing wrong. Is there anyway to mitigate that effect?

Thanks again.

Does this effect happen on the Leaflet frontpage example? You could be using an older version Leaflet CSS with a newer version JS.

Hey @mourner... so it works great with pinch zoom. Still have the same issue if using the mouse wheel to zoom. Just FYI.

The CSS wasn't mismatched, but I've upgraded to the latest leaflet and now it works super. Thanks!

Ah maybe.. I will double check and report back. Thanks a lot for the suggestion!

In my experience the best thing about Leaflet is the possibility of using CSS to style, transform and animate markers.

Shameless plug, see for instance this map using css 'explosions': https://citybik.es

I'm not so sure this is a great reference. On a brand new iPhone 6S with pretty much nothing else open, the performance of scrolling that map is terrible.

My bad, the site does not degrade correctly to mobile devices. There's a nasty hack for hijacking focus on the map in order to keep it as a hero and being able to scroll down that has not been tested enough. Also note this is keeping a websocket connection open and receives streaming data for changes.

Maybe a direct map works better https://citybik.es/map/citi-bike-nyc

In any case, I just wanted to show how markers with 'DivIcon' [1] as they are called in leaflet can be used to create cool looking marker styling without resorting to images / svg / canvas.

[1]: http://leafletjs.com/reference.html#divicon

On an iPhone 7 Plus, the maps on citybik.es looks terribly pixilated. I am getting a feel that either openstreetmaps does not properly support retina tiles, or no one actually bothers to use them. Not sure which is worse.

OpenStreetMap.org's tileservers don't supply retina tiles. But OSM's tileservers are effectively a tech demo and a resource for mappers, not a user-facing service. If you're building a consumer-grade product, you're expected either to use OSM data to render your own tiles, or use a third-party provider which provides tiles based on OSM data (such as Thunderforest, Geofabrik or Mapbox). Leaflet, as the client-side JS part of your mapping solution, can happily show retina tiles from such a provider or your own tileserver.

As a note, these are not OSM tiles but mapbox. Last I checked I couldn't use vector tiles from mapbox using upstream leaflet, so decided against it for now until I find a better solution.

Pretty neat - are your numbers for bikes taken/bikes left live or just estimations based on averages?

Hey, thanks!

The numbers are real, although the timing might not be. There's an endpoint diffing our data by the minute and distributing the changes over that minute to give it the real-ish impression. A green explosion means somebody took a bike from an station, and a red one means somebody left one.

From experience working with these endpoints, data is reliable at around a window of 5 minutes.

Really cool, love it!

Is there an open data feed for this stuff then? I love open data, there is so much available now.

We do offer an API through https://api.citybik.es with as many feeds as we can gather. Note though that no more than 10% of the feeds on citybikes are what one would consider 'open data'.

If you are interested in the actual sources, these are available on the data files that compose pybikes[1]

[1]: https://github.com/eskerda/pybikes/tree/master/pybikes/data

Oh that's good to hear. No, I'm not doing anything with cycling right now, and looks like you pretty much have it covered, but always nice to know good data-sets. Thanks!

Here are three things I'd like to do with Leaflet, or generally just have from an online mapping tool:

1. Use WebTorrent[1] as the tile provider (would probably need a canonical WebTorrent server so that all tiles would always have at least one seeder).

2. A Progressive Web Map (teehee) so that users can store tiles offline and use the mapping service while offline. Obviously not a new concept but AFAIK there isn't a map provider that does it in the browser.

3. Client-side routing/navigation. This could start as a simple Dijkstra in JavaScript (like is demonstrated in [2]), but maybe could be made more powerful and capable soon with WebAssembly.

Is anybody working on these sorts of things? Is anybody interested in them? I've heard of peermaps[3] but it hasn't been updated in over 6 months. I'd be interested in contributing or teaming up with others on these sorts of things.

[1] https://webtorrent.io/

[2] https://christophercliff.com/dijkstra/

[3] https://peermaps.github.io/

For offline mapping, it's best to use vector rather than bitmap tiles. Look at the ecosystem around Mapbox GL (which is open source).

Service Workers can cache map tiles, if you need a quick solution that works in Chrome and Firefox at least.

Would the latency of torrents be very hard to overcome for web-mapping?

One of my favorite tricks with leaflet is to tie into the ontileload event. You can index your data by tile id or quadkey and seamlessly load your data in for the specific data that is in view.

Oh that is a really good tip! Good one. Do you have a demo?

Here's a screencast of a side project that used that technique. The top artists are bound to quadkeys and are loaded via the ontileload event via a websocket. Going to get back into some map work in the next few months and might write out a blog post about this technique.

https://drive.google.com/file/d/0BwPUV--rEjyiVDc4UXBzUnhhMDA...

Hah, wow that is really great. Super fun application and the UX is awesome. Nice job

Works quite well (on iOS), really good work! Here is a small issue I experience on a lot of mobile sites with embedded maps and also on yours:

If I zoom the page outside of the map and then scroll so that the map fills the full screen there is no way to zoom out/get away from the map again. You will just scroll and zoom the map and eventually will have to reload the page. It also allows to scroll far out of bounds of the world which can be a bit confusing.

This happens with other UI elements as well like those instructive subscribe pop ups.

I'm not up to speed with the latest JS and browser features, but unless there is some sort of zoom reset from the browser itself I don't think there is an easy solution without making arbitrary decisions like "user has scrolled up 10 times, move entire page up"

For instance , if I shake my mobile (think google maps) or 3 finger Zoom out, then the browser resets the zoom level.

This is a problem I've noticed with a number of mobile-friendly sites that offer a full width map, regardless of how it is implemented. However recently, there have been a number of occasions where embedded Google Maps instances have insisted (on iOS) the use of two fingers to scroll, helping solve the issues of being stranded within a map.

I believe this is a relatively recent problem caused by mobile safari removing the ability for sites to opt out of pinch zooming (because many sites were ignoring the accessibility importance of allowing users to zoom in).

Leaflet is awesome and what I'd recommend for any starter or simpler project. But also be aware of the existence of OpenLayers when your needs start to grow considerably. I find it much more featured and closer to a GIS than just a mapping interface.

Can you elaborate more on what features OpenLayers has or does better than Leaflet?

We recently replaced an app built with GeoServer for one with Leaflet and Angular. My employer had previously used OpenLayers so we considered it but Leaflet is just so easy (we pushed most of the complexity to the API/database and kept the UI as a lightweight tile/geojson renderer). I'm curious about what we missed out on by not using OpenLayers!

Lots of stuff, starting with nicer projections. http://openlayers.org/en/latest/examples/

But if Leaflet does what you need, just use it.

I've been using Leaflet for about a year now for my map editor project (http://makemaps.online/) and it's been a pleasure. The community and the plugins are awesome, and the library itself is built well and performs nicely.

Leaflet is really nice. I used it to render a big map of my drawing game ScribbleGrid:

http://scribblegrid.com/maps/origin/

I used Node.js Canvas to render a file of each room, ImageMagick morgify/montage to add grid borders as well as combine them into one big image and GDAL2Tiles to split the image up into parts in a "z / x / y" folder structure for Leaflet to fetch.

I'm working on a project right now and using ui-leaflet for Angular, which sadly is getting pretty stale. I suppose it's not a huge surprise for an Angular 1 project, but it's still worth checking out if you use Angular and Leaflet.

I worked on a Leaflet project a while back (about a year and a half ago). While the project didn't rely on Leaflet heavily enough to use all of its features, I've gotta say, it's ridiculously easy to use if you want to get something useful up and running.

Yes Leaflet is just awesome. Vlad (Mourner) and the other contributors have done an amazing job at keeping focused on making leaflet super lightweight and really easy to use.

The stuff they are doing with MapBox is super awesome as well, especially the OpenGL work.

Deeply appreciate the effort.

I really love Leaflet as a tool, and the ecosystem is amazing, but I find integrating it within a React environment to be quite tough. I can integrate the react leaflet components pretty well but once I start doing things like using plug-ins (for edge markers or heat maps or something) then it's no longer easy to use, primarily because very few leaflet plug-ins use npm.

Is there an easy way to integrate leaflet plug-ins using react? My best attempt was to download the plug-in script and modify it such that it takes the Leaflet object as a parameter (instead of the IIFE) but this causes a lot of overhead for using plug-ins.

Any tips from a fellow react developer?

I like it very much, also the underlaying structure of extending and monkey patching inside the plugins is very useful.

Here are some maps we have made: https://green-giraffe.eu/projects http://www.danielbeeke.nl/inbraken-in-uw-buurt/#12/52.0553/5...

I made a Scala.js facade of this recently for my work :) It's still not _completely_ done, but covers alot of the API. If anyone's interested in Scala on the front end and would like to check it out - https://github.com/cibotech/leaflet-facade

Most of the stuff I saw online was for previous versions of Leaflet, I wanted to make something that uses this new release

I've just used Leaflet to create a map for a music festival. It was a joy to use, works well on mobile devices easy to deploy and has been well recieved. Thanks to @mourner and the team for superb library. Small, neat, well documented and changes are improvements not bloat.

Same here. I used it on a site that needed a map, and although I didn't try an alternatives it was well-documented and worked immediately.

I can't say how well it competes with alternatives, but for my use-case it was ideal and very easy to get started with.

Anybody using Mapbox GL JS? Basically Leaflet with WebGL and some other useful tricks.

Yes I do and from a user perspective its much better as it tends to be lighter in term of network request and smoother as you don't need to load new tiles for every single level of zoom.

I just hope leaflet will be there one day with smooth degradation for browser that don't have webgl enabled

I've been following it. The last time I tried it was a bit slow for my use case at the moment but maybe it has come along since then. I'm wondering if the C++ port that MapBox are building turned into WebAssembly might end up being the winner there.

Yeah I'd love to know about people using it as well. Certainly the features would be really useful.

We've been looking for a good bathymetric layer (with depth contours) for Leaflet. Has anyone done this?

For the US, NOAA serves depth charts for free http://www.charts.noaa.gov

I used to be heavy user of leaflet but the lack of webgl support is a non starter anymore comparing to mapbox gl. any plan to support this in the future?

Am I the only one not getting retina tiles? On an iPhone 7 Plus, the map on leaflets.com looks terrible.

Leaflet supports retina tiles, they're just not used on the frontpage example because default OSM tile service doesn't provide them, and we don't use other providers on that example for the sake of simplicity (to keep it as short as possible).

Same on Nexus 10, very pixelated tiles.

Really great. Especially if you've ever gotten stuck using an old, busted library like Polymaps.

Doesn't work at all on desktop with blocked Twitter / Google

Do you mean the leaflet website, or the leaflet maps library itself?

I see the http://leafletjs.com website uses some google fonts, and google analytics, but I would have thought it would degrade gracefully if those things are blocked.

As for the leaflet maps library itself, this will definitely operate independently of google or twitter. Try here for a simple example embedded on my website (with no googleness) http://harrywood.co.uk/maps/examples/leaflet/1-just-map.view... or even better, try here where I'm loading it from locally hosted javascript: http://harrywood.co.uk/maps/examples/leaflet/1b-local-osm.vi...

Those links working for you?

You are likely blocking something else, possibly unpkg.com, which is the CDN the demo page loads the lib from. Blocking all Twitter/Facebook/Google domains the page still works for me.

Works for me with chromium / ghostery / uBlock Origin

Reply on news.ycombinator.com