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!
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/
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!
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:
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.
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.
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?
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.
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.
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.
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.
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]
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.
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.
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.
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!
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.
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.
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.
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.
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.
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?
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).
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.
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.
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/