20 ms·

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

628 points by freyfogle 10y ago

jflowers45 10y ago
Is Mapbox moving away from Leaflet as they develop Mapbox GL?
- striking 10y ago
  Looks like it. That's kinda lame. But I guess I understand why they're doing it.
  - takdi 10y ago
    Why are they doing this?
    - vetinari 10y ago
      mapbox-gl-js focuses on vector tiles and webgl rendering. I'm not sure if it even supports raster tiles, canvas and other "legacy".
      - Buetol 10y ago
        Looks like it does support raster tiles: https://www.mapbox.com/mapbox-gl-js/example/map-tiles/ https://www.mapbox.com/mapbox-gl-js/example/map-tiles/
        vetinari 10y ago
        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.
      - ralmeida 10y ago
        It does support raster tiles, using them in production here.
        jbhatab 10y ago
        How would you say it is compared to leaflet? much more complex?
        ralmeida 10y ago
        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.
    - deleted 10y ago
      [deleted]
- vool 10y ago
  Hope they continue to contribute to Leaflet, especially seen as Mourner is on the Mapbox team.
- mourner 10y ago
  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.
  - jflowers45 10y ago
    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.
chickenfries 10y ago
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.
- bambax 10y ago
  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...?
  - reitoei 10y ago
    Clown locator. Please.
  - frikk 10y ago
    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 http://factfinder.census.gov/faces/nav/jsf/pages/index.xhtml [1] https://www.census.gov/cgi-bin/geo/shapefiles/index.php https://www.census.gov/cgi-bin/geo/shapefiles/index.php
    - rch 10y ago
      Are you familiar with PolicyMap? https://www.policymap.com/ https://www.policymap.com/
      - frikk 10y ago
        I haven't heard of them. Looks pretty cool, thanks for sharing.
  - didip 10y ago
Waterluvian 10y ago
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.
- jflowers45 10y ago
  What about OpenLayers makes it easier to use for really big projects? I've used leaflet, never used openlayers, would love to hear.
  - hokkos 10y ago
    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.
    - anc84 10y ago
      You can (and usually should) make your own custom build: http://openlayers.org/en/latest/doc/tutorials/custom-builds.html http://openlayers.org/en/latest/doc/tutorials/custom-builds....
      - nachtigall 10y ago
        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.
        nachtigall 10y ago
        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).
    - 10y ago
weka 10y ago
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 http://rsmap.net
- saddestcatever 10y ago
  Agreed. Fantastic tool. I've used it for everything including live maps, data visualization, and even as a layer for handing image zooming :P
derwildemomo 10y ago
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!
- ultramancool 10y ago
  You might also consider Cesium, which is WebGL based and gets you a globe view too.
- voltagex_ 10y ago
  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.
  - ivansanchez 10y ago
    No, you don't lose access. You just have to work around some nuisances. Have a look at https://gitlab.com/IvanSanchez/Leaflet.GridLayer.GoogleMutant https://gitlab.com/IvanSanchez/Leaflet.GridLayer.GoogleMutan...
    - shthed 10y ago
      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-restrictions 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.
      - shthed 10y ago
        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.
amyjess 10y ago
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.
nachtigall 10y ago
Congrats. As a longterm and happy OpenLayers user (version 3), what are the main advantages of Leaflet over OpenLayers?
- qwertyuiop924 10y ago
  AFAIK, Leaflet is much easier to use. Other than that, I don't really know.
- mourner 10y ago
  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.
- ivansanchez 10y ago
  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 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.
vcarl 10y ago
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.
- mi100hael 10y ago
  At least it's possible. I'm stuck on an old version of ArcGIS JS, and the docs just no longer exist.
- softawre 10y ago
  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.
- mourner 10y ago
  Yeah, sorry for that — now that we're using a much better docs system, and will archive docs for older versions.
netcraft 10y ago
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.
- honkhonkpants 10y ago
  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.
  - netcraft 10y ago
    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.
qwertyuiop924 10y ago
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.
sccxy 10y ago
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/ http://gis.ee/meri/ For that map Leaflet is perfect, because its lightweight, fast, mobile friendly.
rburhum 10y ago
Can't say enough great things about Leaflet. I have been using it for years as a lightweight replacement of OpenLayers.
Kiro 10y ago
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 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).
- IshKebab 10y ago
  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.
  - Kiro 10y ago
    Thanks. What's the difference though? I don't want to show it inside the game. It will be on a separate website.
    - Mchl 10y ago
      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)
  - davojta 10y ago
    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/ https://ru.wargaming.net/globalmap/ . It's turn based strategy for clan leaders in worldoftanks universe.
honkhonkpants 10y ago
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/ http://leaflet-extras.github.io/leaflet-providers/preview/ 2: http://pasteboard.co/8bnyEPXGC.png http://pasteboard.co/8bnyEPXGC.png
- mourner 10y ago
  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.
dboreham 10y ago
We used it on an analytic dashboard project: so far so good -- overall positive experience.
XCSme 10y ago
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.
alexbanks 10y ago
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.
- knz 10y ago
  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.
  - alexbanks 10y ago
    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.
- CalRobert 10y ago
  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/ https://www.lanesurfing.com/
- jbhatab 10y ago
  agreed. just use it raw. Or with mapbox
- mcjiggerlog 10y ago
  Went through the same pain making http://mountains.io http://mountains.io a few years back! Definitely use the native library.
ghull95 10y ago
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/ https://data.humdata.org/).
dopeboy 10y ago
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 https://github.com/PaulLeCam/react-leaflet
oever 10y ago
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-online-questions-answered-what-who-how-and-when/ https://www.collaboraoffice.com/community-news/libreoffice-o...
oever 10y ago
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-online-questions-answered-what-who-how-and-when/ https://www.collaboraoffice.com/community-news/libreoffice-o...
oever 10y ago
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-online-questions-answered-what-who-how-and-when/ https://www.collaboraoffice.com/community-news/libreoffice-o...
mck- 10y ago
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.
- lobster_johnson 10y ago
  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 https://github.com/pelias/pelias
diegocerdan 10y ago
Some years ago I created Mapturbate using the Leaflet and the Chaturbate webcam feed. Definitely NSFW. http://mapturbate.com http://mapturbate.com
- d33 10y ago
  Doesn't seem to display anything but the map for me. No points marked on it.
Mchl 10y ago
Here's my simple project utilizing leaflet (1.0-RC1 actually) to display a procedurally generated infinite heightmap. https://github.com/Mchl/simplexnoisemapgenerator 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.
nodesocket 10y ago
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 https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.js
- state 10y ago
  I first noticed that in Google Maps: https://www.google.com/maps/@37.7903791,-122.4318703,15z https://www.google.com/maps/@37.7903791,-122.4318703,15z
- Arnavion 10y ago
  https://url.spec.whatwg.org/#url-code-points https://url.spec.whatwg.org/#url-code-points Used in step 2.1 of https://url.spec.whatwg.org/#path-state https://url.spec.whatwg.org/#path-state
robot 10y ago
It is one of the best things engineered I have seen for a long time.
jbhatab 10y ago
Is mapbox going to work immediately with leaflet 1.0?
mgalka 10y ago
- 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
- ganset 10y ago
  Author of leaflet works on Mapbox GL, so that makes sense.
jasongrout 10y ago
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 https://github.com/Leaflet/Leaflet/issues/4849.
- mourner 10y ago
  Getting fixed in 1.0.1, to be out today.
voltagex_ 10y ago
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/ https://www.mapbox.com/gallery/
- jflowers45 10y ago
  there's more nuance to it - see this comment thread https://news.ycombinator.com/item?id=12589647 https://news.ycombinator.com/item?id=12589647
Achorny 10y ago
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.
accraze 10y ago
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.
iandanforth 10y ago
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.

628 points by freyfogle 10y ago

jflowers45 10y ago

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

striking 10y ago
Looks like it. That's kinda lame. But I guess I understand why they're doing it.
- takdi 10y ago
  Why are they doing this?
  - vetinari 10y ago
    mapbox-gl-js focuses on vector tiles and webgl rendering. I'm not sure if it even supports raster tiles, canvas and other "legacy".
    - Buetol 10y ago
      Looks like it does support raster tiles: https://www.mapbox.com/mapbox-gl-js/example/map-tiles/ https://www.mapbox.com/mapbox-gl-js/example/map-tiles/
      - vetinari 10y ago
        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.
    - ralmeida 10y ago
      It does support raster tiles, using them in production here.
      - jbhatab 10y ago
        How would you say it is compared to leaflet? much more complex?
        ralmeida 10y ago
        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.
  - deleted 10y ago
    [deleted]
vool 10y ago
Hope they continue to contribute to Leaflet, especially seen as Mourner is on the Mapbox team.
mourner 10y ago
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.
- jflowers45 10y ago
  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.

chickenfries 10y ago

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.

bambax 10y ago
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...?
- reitoei 10y ago
  Clown locator. Please.
- frikk 10y ago
  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 http://factfinder.census.gov/faces/nav/jsf/pages/index.xhtml [1] https://www.census.gov/cgi-bin/geo/shapefiles/index.php https://www.census.gov/cgi-bin/geo/shapefiles/index.php
  - rch 10y ago
    Are you familiar with PolicyMap? https://www.policymap.com/ https://www.policymap.com/
    - frikk 10y ago
      I haven't heard of them. Looks pretty cool, thanks for sharing.
- didip 10y ago

Waterluvian 10y ago

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.

jflowers45 10y ago
What about OpenLayers makes it easier to use for really big projects? I've used leaflet, never used openlayers, would love to hear.
- hokkos 10y ago
  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.
  - anc84 10y ago
    You can (and usually should) make your own custom build: http://openlayers.org/en/latest/doc/tutorials/custom-builds.html http://openlayers.org/en/latest/doc/tutorials/custom-builds....
    - nachtigall 10y ago
      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.
      - nachtigall 10y ago
        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).
  - 10y ago

weka 10y ago

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 http://rsmap.net

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

derwildemomo 10y ago

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!

ultramancool 10y ago
You might also consider Cesium, which is WebGL based and gets you a globe view too.
voltagex_ 10y ago
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.
- ivansanchez 10y ago
  No, you don't lose access. You just have to work around some nuisances. Have a look at https://gitlab.com/IvanSanchez/Leaflet.GridLayer.GoogleMutant https://gitlab.com/IvanSanchez/Leaflet.GridLayer.GoogleMutan...
  - shthed 10y ago
    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-restrictions 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.
    - shthed 10y ago
      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.

amyjess 10y ago

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.

nachtigall 10y ago

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

qwertyuiop924 10y ago
AFAIK, Leaflet is much easier to use. Other than that, I don't really know.
mourner 10y ago
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.
ivansanchez 10y ago
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 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.

vcarl 10y ago

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.

mi100hael 10y ago
At least it's possible. I'm stuck on an old version of ArcGIS JS, and the docs just no longer exist.
softawre 10y ago
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.
mourner 10y ago
Yeah, sorry for that — now that we're using a much better docs system, and will archive docs for older versions.

netcraft 10y ago

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.

honkhonkpants 10y ago
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.
- netcraft 10y ago
  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.

qwertyuiop924 10y ago

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.

sccxy 10y ago

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/ http://gis.ee/meri/ For that map Leaflet is perfect, because its lightweight, fast, mobile friendly.

rburhum 10y ago

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

Kiro 10y ago

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

IshKebab 10y ago
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.
- Kiro 10y ago
  Thanks. What's the difference though? I don't want to show it inside the game. It will be on a separate website.
  - Mchl 10y ago
    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)
- davojta 10y ago
  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/ https://ru.wargaming.net/globalmap/ . It's turn based strategy for clan leaders in worldoftanks universe.

honkhonkpants 10y ago

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/ http://leaflet-extras.github.io/leaflet-providers/preview/ 2: http://pasteboard.co/8bnyEPXGC.png http://pasteboard.co/8bnyEPXGC.png

mourner 10y ago
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.

dboreham 10y ago

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

XCSme 10y ago

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.

alexbanks 10y ago

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.

knz 10y ago
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.
- alexbanks 10y ago
  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.
CalRobert 10y ago
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/ https://www.lanesurfing.com/
jbhatab 10y ago
agreed. just use it raw. Or with mapbox
mcjiggerlog 10y ago
Went through the same pain making http://mountains.io http://mountains.io a few years back! Definitely use the native library.

ghull95 10y ago

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/ https://data.humdata.org/).

dopeboy 10y ago

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 https://github.com/PaulLeCam/react-leaflet

oever 10y ago

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-online-questions-answered-what-who-how-and-when/ https://www.collaboraoffice.com/community-news/libreoffice-o...

oever 10y ago

mck- 10y ago

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.

lobster_johnson 10y ago
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 https://github.com/pelias/pelias

diegocerdan 10y ago

Some years ago I created Mapturbate using the Leaflet and the Chaturbate webcam feed. Definitely NSFW. http://mapturbate.com http://mapturbate.com

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

Mchl 10y ago

Here's my simple project utilizing leaflet (1.0-RC1 actually) to display a procedurally generated infinite heightmap. https://github.com/Mchl/simplexnoisemapgenerator 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.

nodesocket 10y ago

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 https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.js

state 10y ago
I first noticed that in Google Maps: https://www.google.com/maps/@37.7903791,-122.4318703,15z https://www.google.com/maps/@37.7903791,-122.4318703,15z
Arnavion 10y ago
https://url.spec.whatwg.org/#url-code-points https://url.spec.whatwg.org/#url-code-points Used in step 2.1 of https://url.spec.whatwg.org/#path-state https://url.spec.whatwg.org/#path-state

robot 10y ago

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

jbhatab 10y ago

Is mapbox going to work immediately with leaflet 1.0?

mgalka 10y ago

- 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

ganset 10y ago
Author of leaflet works on Mapbox GL, so that makes sense.

jasongrout 10y ago

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 https://github.com/Leaflet/Leaflet/issues/4849.

mourner 10y ago
Getting fixed in 1.0.1, to be out today.

voltagex_ 10y ago

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/ https://www.mapbox.com/gallery/

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

Achorny 10y ago

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.

accraze 10y ago

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.

iandanforth 10y ago

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.