Leaflet is a great library, I never would've guessed that they hadn't reached 1.0 given the completeness (for my use case anyway) of the library, quality of documentation and it's ubiquity.
It might not be build on the latest reactive, functional style but I think it's one of most useful javascript libraries I've used.
I love Leaflet (and contributed quite a bit over the years).
The layer architecture can be easily combined with React. Just write react-components for the layers, shapes, or markers and use React's lifecycle-hooks to add/remove them from the map.
Thanks for the contributions and for the example! I'm just getting started with React and its useful to see examples with integrating non-react JavaScript libraries like leaflet.
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.
I've been working a bit with open data associated with congressional districts, and I'd like to do a visualization of boundary changes over time. There may be some interesting data features associated with places that have been subject to frequent redistricting.
Although their docs are great some examples on the documented stuff would really be nice. I struggled a bit on some but other than that the simplicity of it is really great. Would definitely recommend for someone who's starting out on maps.
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.
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.
I'm curious what approach you used after giving up on angular-leaflet? I've had a similar experience moving apps to Angular and working with Angular leaflet. Thankfully I work with a great consultant so didn't lose weeks but angular-leaflet is definitely not the clean experience that leaflet.js is.
I ended up writing an Angular directive that modified the DOM via jQuery. It was gross, but it took Angular out of the equation and allowed the implementers of the directive to still use Angular and still have the same functionality they wanted.
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.
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.
There's a better separation of concerns that makes it easier to customize specific pieces of the project.
For example, OpenLayers divides fetching data (Source), parsing data (Format) and interacting with data (Layer) into individual pieces. So it's relatively straightforward to handle a case where someone decided to go invent their own data format without having to subclass half the system and patch it.
For smaller projects leaflet is significantly smaller and simpler, and definitely is the right approach. But if you need to do "a lot" with a mapping system OL3 probably has it built in and supported instead of maybe available as an extension.
Thanks for the info, much appreciated! As a general aside, I feel like there would be a good audience for a blowout article comparing the top mapping library pros/cons.
That's a brilliant idea. I wish I had that article years ago. I'd even consider writing it but I've never blogged and feel it would just be a murky mess. I'd happily collaborate though. =)
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.
Leaflet maintainer here. There is some work on a rotation code branch, plus I've been working on something called "Leaflet.GL" to do WebGL rendering. The OL3 folks just have more time and resources, you know. Also Leaflet must still work with IE8 (OL3 doesn't, there are some cases where that's needed).
We have a friendly relationship with the OL3 folks, even though sometimes we're jealous of their WebGL rendering, and sometimes they're jealous of our lower learning curve.
Even a custom OL3 build which only has the canvas renderer, a WMS layer for background and a Vector layer for POIs does not get smaller than 200k. I think leaflet is half the size.
And I find this to be even more astonishing as OL3 uses Googles Closure compiler who's very advantage should have been better JS minification (not only minimizing/uglifying but actually removing JS parts that are not needed).
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.
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.
Leaflet focuses on being lightweight, fast, easy to use and suitable for most mapping apps, while OpenLayers is more geared towards GIS/academics with its vast built-in support for different formats and standards.
Leaflet maintainer here. AFAIK, Leaflet still has a nicer learning curve compared to OpenLayers (which doesn't affect long-term OL users like you, obviously), and a plugin ecosystem which allows for smaller library size.
The OL3 folks have been working hard on making OL3 leaner (see the "Faster, smaller, better" talk from FOSS4G Bonn here: http://video.foss4g.org/foss4g2016/videos/index.html), but I feel Leaflet still has an edge on that regard.
Also, OL3 depended on the Closure compiler for a long time, which made it difficult to interoperate with other frameworks, which is why a lot of React/Ractive/R/Django/Vue users choose Leaflet.
Other than that, there's no clear obvious advantage of a library over the other one. We have a friendly relationship with the OL3 folks, we try to copy some of their features, they try to copy some of ours, everything gets better in the end.
I've used Leaflet in the past with superb results. [1] It truly is an amazing library. People have never had an issue with my map. I agree with chickenfries's comment. Leaflet has won that that niche silently with its A+ in every important facet they've tackled.
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.
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.
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.
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.
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.
Haven't used leaflet in just over a year - is it still limited to north-up only? Because I find it difficult to describe any map library as "mobile-friendly" if you can't rotate it to match the direction you're facing.
Leaflet is amazing. The documentation is very straightforward and Leaflet makes it easy to produce high-quality maps in a short period of time.
I was doing most of my mapping work in R, but needed something interactive to use for a website and am very pleased with Leaflet so far. If you're interested in mapping I'd definitely try it out (interesting datasets would be city crime data and humanitarian data from here: https://data.humdata.org/).
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).
It's really possible to use in online web games. I have participated in development of global map in wargaming: https://ru.wargaming.net/globalmap/ . It's turn based strategy for clan leaders in worldoftanks universe.
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)
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].
Of course the performance claims only relate to Leaflet itself, not the server performance — Leaflet is server-agnostic (you can use it with any tile provider). The improvements will be noticeable in dynamic map apps with lots of vector data, markers, tooltips etc. on top of the map.
We recently decided to move away from leaflet for our indoor mapping component. There are some things that we discovered that leaflet is not good for:
1. Drawing annotations
There are plugin options but Leaflet editable is quite buggy and convoluted, and leaflet draw is still on 0.7 and we couldn't wait for their 1.0 upgrade.
2. Large image overlays
There is an awkward space between an image that the browser should be able to handle even if it's quite large, and one that requires tiling. We fell into that space and there are some seriously nasty bugs in Chrome when imgs are huge. Since leaflet just uses an <img> tag for overlays this was a killer.
3. Lack of map rotation
There is a fork that implements rotation, but we couldn't rely on that to stay up to date with mainline.
Overall I still really like leaflet and would use it in a heartbeat for any more normal mapping application.
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.
somewhat tangental to the topic, but are there any examples of applications using a flat mapping like this or google maps or openstreetmap that allow an avatar to explore it like you would a game - not jumping around but linearly, with control of speed? I've got an idea but I can't come up with a good way to control the movement that seems intuitive and easy. Clicking with a mouse on your desired destination and progressively routing would work, but curious if someone else is already doing something similar.
What you describe sounds close to what you get from google maps using the arrow key navigation. Is that a reasonable starting place? It sounds like maybe you want the "avatar" to stay on streets instead of moving freely, which could be interesting.
right, something like a character walking down streets the way you would walk down a hallway in a top down game. Trouble with arrow navigation is how to interact with intersections, especially complicated ones - roundabouts, more than 3 exits, etc.
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.
Leaflet is incredible, I've had to switch to using google maps for my last few gigs, but I still haven't found any other libraries that are as painless for mobile as Leaflet can be.
It might not be build on the latest reactive, functional style but I think it's one of most useful javascript libraries I've used.