
Leaflet: An open-source JavaScript library for mobile-friendly interactive maps - vmorgulis
http://leafletjs.com/
======
katabasis
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...](http://www.getty.edu/publications/romanmosaics/catalogue/italy/)
[2]:
[http://www.getty.edu/publications/romanmosaics/catalogue/1/](http://www.getty.edu/publications/romanmosaics/catalogue/1/)

~~~
kjell
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-...](http://collections.artsmia.org/art/1218/olive-trees-vincent-van-
gogh)

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-...](https://www.rijksmuseum.nl/en/rijksstudio/artists/rembrandt-
harmensz-van-rijn)

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/](http://iiif.io/)

~~~
katabasis
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](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!

~~~
kjell
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!

------
harry-wood
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](http://switch2osm.org)

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

~~~
mickael-kerjean
Any plan to support webgl in the future as mapbox gl does?

From a user perspective the difference is huge

~~~
mourner
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.

~~~
ivansanchez
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.

------
kh_hk
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](https://citybik.es)

~~~
leonatan
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.

~~~
Doctor_Fegg
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.

------
nathcd
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/](https://webtorrent.io/)

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

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

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

------
buckhx
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.

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

~~~
buckhx
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...](https://drive.google.com/file/d/0BwPUV--
rEjyiVDc4UXBzUnhhMDA/view)

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

------
nezza-_-
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.

~~~
iraklism
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.

------
Waterluvian
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.

~~~
knz
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!

~~~
anc84
Lots of stuff, starting with nicer projections.
[http://openlayers.org/en/latest/examples/](http://openlayers.org/en/latest/examples/)

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

------
simopaa
I've been using Leaflet for about a year now for my map editor project
([http://makemaps.online/](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.

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

[http://scribblegrid.com/maps/origin/](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.

------
CalRobert
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.

------
verandaguy
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.

------
socmag
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.

------
abustamam
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?

------
danielbeeke
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](https://green-giraffe.eu/projects)
[http://www.danielbeeke.nl/inbraken-in-uw-
buurt/#12/52.0553/5...](http://www.danielbeeke.nl/inbraken-in-uw-
buurt/#12/52.0553/5.0376)

------
jxm262
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](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

------
chillly
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.

~~~
stevekemp
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.

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

~~~
mickael-kerjean
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

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

~~~
andrewljohnson
For the US, NOAA serves depth charts for free
[http://www.charts.noaa.gov](http://www.charts.noaa.gov)

------
mickael-kerjean
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?

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

~~~
mourner
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).

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

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

~~~
harry-wood
Do you mean the leaflet website, or the leaflet maps library itself?

I see the [http://leafletjs.com](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...](http://harrywood.co.uk/maps/examples/leaflet/1-just-
map.view.html) 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...](http://harrywood.co.uk/maps/examples/leaflet/1b-local-
osm.view.html)

Those links working for you?

