Last I checked, IE11 is the last official holdout (with bugfixes and support) and it has less than 5% marketshare. That gives ES6 somewhere close to 95% marketshare for users that aren't running 3-6 year old insecure and outdated browsers.
You will pretty much always have to pay for the tileserver service though. The main benefit I saw was that you could trivially switch to any other tile service without being tied in to a particular one like if you used the google maps library.
You still have to pay for the server you host it yourself on. Which usually means generating the tiles from scratch rather than relying on some precached ones. The prices for something like mapbox are not outrageous for what they provide.
> You still have to pay for the server you host it yourself on.
I mean, I guess? Can't it be presumed that if you have a web site upon which you wish to place a map, you've already got a web server set up one way or another?
> Which usually means generating the tiles from scratch rather than relying on some precached ones.
Well, yes. The way I've set it up for my client is basically that we start from a large image which will be the map at its maximum "zoom in level" and run a script which scales the map 50% smaller, dices the image into 256x256 tiles, and saves those tiles with a pre-defined naming scheme (something like Xcoord_Ycoord_Zoomlevel.png - I can't recall the details), then scales the original map by 25%, creates tiles from that, and repeats until the entire map can fit into four tiles (512x512). It's not terribly difficult stuff for a reasonably capable developer to do, though working with the larger maps can eat up a lot of RAM on the system we run this script on.
If you want to roll your own tiles, you get tons of flexibility with your own tileserver, which is great if you want to change naming rules/styles/etc.. It is a rabbit hole to go down, since mapping is inherently fun.
http://maps.stamen.com/#toner/12/37.7706/-122.3782 - they have free tile servers (obviously, donate if you use them) that are relatively styled. They don't get updated and may not be 100%, but for small scale uses, they are good enough versus risking going over the free tiers at Mapbox or getting stuck in the Google ecosystem.
I've used it and it's nice for use cases that match very closely to what they support and provide documentation/examples for. As a quick drop-in map widget on a web page, it's quite nice.
I've also used Mapbox which provides a much fancier OpenGL map with fancy things like continuous (smooth) zoom levels. Mapbox feels a lot more like a modern Google Maps-esque mapping widget. https://docs.mapbox.com/mapbox-gl-js/example/
Just a heads up, if you are looking into using this in your project: The popup onclick triggers are currently broken in the latest version under Safari, using an older version solves it.
Other than that this is an awesome library with tons of great plugins that I’ve used for years now.
LeafletJS is not just limited to mapping applications, it is used in LibreOffice online [1] to present pixmaps of rendered documents in the web client.
If you're looking for an actual demo of the product, it seems that the weather map on https://www.msn.com/en-us/weather/maps?lat=47.6032&lon=-122.... is powered by leaflet. I really like the work they've done with the wind animations and historical air quality maps
https://automuseums.info/ is using leaflet, it is also doing some server side geoclustering. It's a mostly out of the box Drupal 9 site, there's custom code but very very little.
Leaflet is fantastic. One of the more interesting use cases I've seen for it is the Guild Wars 2 wiki. They use it heavily to display the game map for regions, areas of interests etc. It's quite impressive, and very useful as a player!
I'm a freelance web developer for https://gamerguides.com/ which also uses Leaflet for video game maps. It's a little weird to get working with at first but it turns out it's well suited for that sort of use case. I love it.
This got me wondering if my favorite game as a kid, RuneScape, also uses Leaflet on their world map for Old School RuneScape (the version I am more familiar with). It turns out they do. Cool!
It's not even just video games! Leaflet's great for real-world non-video games maps of the whole world. It's by far the easiest system to make any random old image zoomable and pinchable.
My brother and I created a map of our local Costco in Figma and just put it up at https://costcomap.com/
Right, leaflet can be used also outside the map context. We used it to reimplement a "Pick Your Own Seat" component (originally implemented in flash), where the user picks its own seats while buying tickets!
Leaflet for R is fantastic as well. It has been a while since I have used R so there might be something better now, but I have fond memories of that package.
I used leaflet for a previous project involving maps of users (https://tagmap.io/tag/slatestarcodex is an example of one), and my experience with it was wonderful; I'd be happy to use it again next time the need arises. The best part about it for me was perhaps how easily configurable it is, including easily adding additional plugins (for example, we used one called MarkerCluster to cluster markers for users if there were hundreds or thousands in the same area. Changing the style of markers, adding new ones, and so on, was also trivial). Nice library and experience in general.
LeafletJS is great! I've been using it successfully with multiple tile layers and a few additional plugins as well (such as leaflet-ruler[0] and RotatedMarker[1]) as the foundation for the map display in my virtual sailing project. Here's a sample of what that looks like: https://i.postimg.cc/8z7DMz3T/leaflet-sample.png
* Leaflet is based completely on the web platform. It achieves a zoomable slippy map experience by animating DOM elements - usually image tiles.
* MapLibre GL JS is a BSD licensed fork of Mapbox GL JS version 1. Instead of consuming bitmap image tiles, it consumes tiles corresponding to the same coordinate extents as the above tiles, but containing tagged geometry features. So instead of sending a PNG image you're sending what is essentially an SVG, but in binary format and with some domain-specific compression.
* The GL JS renderers also rasterize those vector tiles using WebGL, which means that all the geometry data exists in GPU memory and can be scaled, rotated, and recolored etc in realtime efficiently, and also implement their own limited text rendering so even labels can be rotated in realtime.
I’ve used Leaflet a ton and love it. But I recently tried using it with a vector-based render method (as opposed to the rastered tiles Leaflet uses by default) and couldn’t find anything that worked anywhere near as easily and simply as Leaflet’s standard rendering.
I don’t blame the Leaflet folks for this really, rendering map data locally via WebGL is not a simple task. But it’s been depressing to see folks like MapBox close off their vector-based library (and Google’s isn’t open either). There’s an open source of Mapbox’s library but it still feels like the open source world is being left out in the cold compared to how things were just a few years ago.
Yeah Leaflet never really made the jump to vector tiles. There are various ways to add vector drawing to it but as you've noted none of them are quite easy or simple enough.
MapLibre.org gives me hope. It's a fork of the MapBox GL JS code that intends to be fully open source and independent.
Another option for open source vector mapping was Mapzen's Tangram. Mapzen shut down, what, two years ago? But they open source released everything. I'm not sure if Tangram has a life of its own.
I'm the original author of Leaflet and also (as of last 8 years) core developer of Mapbox GL JS. Not pursuing vector rendering in Leaflet is intentional — it's designed to be extremely small, simple and lightweight. Vector map rendering is so incredibly difficult to do right that it's pretty much impossible without many years of team effort by top engineers and millions in investment.
Leaflet avoids all the complexity by relying on all the rendering done on the server, while all it has to do is load images.
Rendering vector data on the browser with the level of detalization necessary for modern cartography (hundreds of thousands of points in a single view) is not possible with the usual technologies like Canvas & SVG. The only option is WebGL, which is basically a very efficient way to draw triangles. You have to implement all the logic of turning all the data into triangles (tessellating lines, breaking down polygons, implementing anti-aliasing, figuring out collision detection between labels) from scratch, reimplementing difficult computer graphics algorithms from decades ago. This is a MASSIVE amount of work, and hard to do in a performant way.
Moreover, client-side vector rendering has even more complexity than server-side technologies like Mapnik, because you can't just render something once — you have to do it in real time, 60 frames per second, considering context, making fluid animations when zooming, panning and loading data, etc.
In a previous life I used Leaflet in some digital art-history publications for the Getty Museum in LA [1]. Leaflet was the MVP of our static-website software stack ("JAMstack" before that was a thing). We used Leaflet to provide maps of the Roman Empire as well as deep-zoom functionality for images of artwork. The library is a gem of open-source web technology, versatile and reliable.
OT, but I really love the Getty Museum. Definitely one of the few places worth the trip in LA. If anyone reading has access and hasn't been, consider checking it out. It's not often you see such a large collection of beautiful antiquities, particularly not in such a nice setting.
For all you React users (Reactionaries?) out there, there's React Leaflet. I'm in the process of making a little React portfolio app that randomly generates airports within a user-defined distance of each other (for all the indecisive Flight Sim users), and with this library it took all of about 20 minutes to put the airports on a map, draw a line between them, and center the map on them. Really neat stuff.
A great library. I use it daily for web work. But recently I used it in an ionic framework mobile app. Simple cross-platform mobile map from a single code base? Yes please!
The first time I used it was to map parks and facilities for a state parks department, must have been in the early 2010s?
The design and data called for thousands of nested POIs all searchable by a range of filters (facilities, activities, etc), with pop-up info boxes and automatic clustering groups, with a custom layer from their XML-based geoserver full of park boundaries (polygons) which could filter the POIs within. By design this all required a round-trip to their geoserver which did a spatial query. The specification pushed one of the more popular JS mapping heavyweights of the day (I forget which) which due to the specific mix of required features ended up being painful, slow, janky, and with mobile-responsive becoming the frontend de-jure, a battle against nested layers of opinionated templating abstractions, all of which added up to a couple of hundred KB of dependencies and endless fragile callback-induced race-conditions, slow round-trips to their geoserver, and XML parsing issues. The mapping became a blocker on the project as the weeks wore on - hammer down one gopher, and another head would pop up. Design compromises were being considered to get the job over the line.
Enter Leaflet which was considered risky and new at the time, but on a whim and my own time I threw together a quick demo and got permission to spend a few days on it. I replaced weeks of frustrating spaghetti code and rebuilt a faster and more stable solution in a couple of days, polished it up after getting the "nod" and the site was finally ready to launch a couple of days later. Leaflet enabled the solution by being compact, only did the thing it was designed to do and didn't interfere elsewhere, and the plugins were tiny, did their job, and did it much more transparently. The main thing I had to do was transform their XML into GeoJSON on our webserver (their backend had only rudimentary GeoJSON support at the time - I think their internal teams either refused or were not allowed to update it?).
Anyway didn't mean to write a mini-blog post shilling Leaflet, it's a great library, my first experience of it was that it saved a seemingly doomed project, it does exactly what it says on the box and not much else, which is perfect when it's just a small component of a much larger and more complex project. It's my first go-to for interactive map rendering and even non-map stuff, like zoomable gigapixel photos.
I’m working on a writing prep web app that will have an interactive map feature. How nice for this to show up on the hn front page, I assumed I’d be making something custom in threejs until now.
It’s called plotbinder - the app and it’s website (plotbinder.com, currently nothing is hosted) should go online sometime in September
90 comments
[ 2.8 ms ] story [ 187 ms ] threadhttps://seagl.org/maps/2019
Source: https://github.com/SeaGL/seagl.github.io/pull/148
I mean, I guess? Can't it be presumed that if you have a web site upon which you wish to place a map, you've already got a web server set up one way or another?
> Which usually means generating the tiles from scratch rather than relying on some precached ones.
Well, yes. The way I've set it up for my client is basically that we start from a large image which will be the map at its maximum "zoom in level" and run a script which scales the map 50% smaller, dices the image into 256x256 tiles, and saves those tiles with a pre-defined naming scheme (something like Xcoord_Ycoord_Zoomlevel.png - I can't recall the details), then scales the original map by 25%, creates tiles from that, and repeats until the entire map can fit into four tiles (512x512). It's not terribly difficult stuff for a reasonably capable developer to do, though working with the larger maps can eat up a lot of RAM on the system we run this script on.
http://maps.stamen.com/#toner/12/37.7706/-122.3782 - they have free tile servers (obviously, donate if you use them) that are relatively styled. They don't get updated and may not be 100%, but for small scale uses, they are good enough versus risking going over the free tiers at Mapbox or getting stuck in the Google ecosystem.
I've also used Mapbox which provides a much fancier OpenGL map with fancy things like continuous (smooth) zoom levels. Mapbox feels a lot more like a modern Google Maps-esque mapping widget. https://docs.mapbox.com/mapbox-gl-js/example/
Other than that this is an awesome library with tons of great plugins that I’ve used for years now.
1. Rotation not supported.
2. Debug source (leaflet-src.is) reports stale number: “1.6.0” for 1.7.1
[1] https://git.libreoffice.org/online/+/master/loleaflet/README
So it can be used in pretty much any native desktop application. Including desktop games that use DX11, DX12, Vulkan or Metal graphics.
[1] https://sciter.com
How to Make Maps Using Leaflet.js, PostGIS and Chicago Open Data - https://news.ycombinator.com/item?id=19784355 - April 2019 (20 comments)
Leaflet – A JavaScript library for mobile-friendly interactive maps - https://news.ycombinator.com/item?id=16149725 - Jan 2018 (36 comments)
Leaflet: An open-source JavaScript library for mobile-friendly interactive maps - https://news.ycombinator.com/item?id=13095390 - Dec 2016 (71 comments)
Leaflet 1.0 – A JavaScript library for mobile-friendly interactive maps - https://news.ycombinator.com/item?id=12589447 - Sept 2016 (99 comments)
D3 and Leaflet maps (2012) - https://news.ycombinator.com/item?id=11017763 - Feb 2016 (8 comments)
Show HN: Lens Battle – Make comparing lenses easier (with leaflet.js) - https://news.ycombinator.com/item?id=10279358 - Sept 2015 (11 comments)
Show HN: Quizzity – a geographical quiz built on top of a Leaflet map - https://news.ycombinator.com/item?id=8981162 - Feb 2015 (6 comments)
Show HN: Traverse City Platmap with Leaflet and D3 - https://news.ycombinator.com/item?id=8164315 - Aug 2014 (6 comments)
Testing web map APIs – Google vs OpenLayers vs Leaflet - https://news.ycombinator.com/item?id=7451375 - March 2014 (12 comments)
Show HN: Earthquakes on Leaflet, Crossfilter and D3 - https://news.ycombinator.com/item?id=5157054 - Feb 2013 (7 comments)
Leaftlet - A Lightweight JavaScript Library for Interactive Maps - https://news.ycombinator.com/item?id=2746178 - July 2011 (21 comments)
https://www.windy.com
https://github.com/windycom/leaflet-kml
Example: https://55pl.us/nursing-homes/27a052/
https://wiki.guildwars2.com/wiki/Kryta#Interactive_Map
https://oldschool.tools/world-map
My brother and I created a map of our local Costco in Figma and just put it up at https://costcomap.com/
https://rstudio.github.io/leaflet/map_widget.html
[0] https://github.com/gokertanrisever/leaflet-ruler
[1] https://github.com/bbecquet/Leaflet.RotatedMarker
https://github.com/maplibre/maplibre-gl-js
* MapLibre GL JS is a BSD licensed fork of Mapbox GL JS version 1. Instead of consuming bitmap image tiles, it consumes tiles corresponding to the same coordinate extents as the above tiles, but containing tagged geometry features. So instead of sending a PNG image you're sending what is essentially an SVG, but in binary format and with some domain-specific compression.
* The GL JS renderers also rasterize those vector tiles using WebGL, which means that all the geometry data exists in GPU memory and can be scaled, rotated, and recolored etc in realtime efficiently, and also implement their own limited text rendering so even labels can be rotated in realtime.
I don’t blame the Leaflet folks for this really, rendering map data locally via WebGL is not a simple task. But it’s been depressing to see folks like MapBox close off their vector-based library (and Google’s isn’t open either). There’s an open source of Mapbox’s library but it still feels like the open source world is being left out in the cold compared to how things were just a few years ago.
http://github.com/protomaps/protomaps.js
so it would be valuable to know if it can get closer to what you wanted to accomplish.
MapLibre.org gives me hope. It's a fork of the MapBox GL JS code that intends to be fully open source and independent.
Another option for open source vector mapping was Mapzen's Tangram. Mapzen shut down, what, two years ago? But they open source released everything. I'm not sure if Tangram has a life of its own.
Rendering vector data on the browser with the level of detalization necessary for modern cartography (hundreds of thousands of points in a single view) is not possible with the usual technologies like Canvas & SVG. The only option is WebGL, which is basically a very efficient way to draw triangles. You have to implement all the logic of turning all the data into triangles (tessellating lines, breaking down polygons, implementing anti-aliasing, figuring out collision detection between labels) from scratch, reimplementing difficult computer graphics algorithms from decades ago. This is a MASSIVE amount of work, and hard to do in a performant way.
Moreover, client-side vector rendering has even more complexity than server-side technologies like Mapnik, because you can't just render something once — you have to do it in real time, 60 frames per second, considering context, making fluid animations when zooming, panning and loading data, etc.
You can learn more details about this in my presentation on vector maps e.g. here: https://youtu.be/v-V8SS14R48
Cool to see leaflet mentioned as I’ve been using it this week :P
[1] https://www.getty.edu/publications/romanmosaics/
https://react-leaflet.js.org/
https://pigeon-maps.js.org
Though you miss out on the wide range of Leaflet plugins!
It’s an excellent library.
The design and data called for thousands of nested POIs all searchable by a range of filters (facilities, activities, etc), with pop-up info boxes and automatic clustering groups, with a custom layer from their XML-based geoserver full of park boundaries (polygons) which could filter the POIs within. By design this all required a round-trip to their geoserver which did a spatial query. The specification pushed one of the more popular JS mapping heavyweights of the day (I forget which) which due to the specific mix of required features ended up being painful, slow, janky, and with mobile-responsive becoming the frontend de-jure, a battle against nested layers of opinionated templating abstractions, all of which added up to a couple of hundred KB of dependencies and endless fragile callback-induced race-conditions, slow round-trips to their geoserver, and XML parsing issues. The mapping became a blocker on the project as the weeks wore on - hammer down one gopher, and another head would pop up. Design compromises were being considered to get the job over the line.
Enter Leaflet which was considered risky and new at the time, but on a whim and my own time I threw together a quick demo and got permission to spend a few days on it. I replaced weeks of frustrating spaghetti code and rebuilt a faster and more stable solution in a couple of days, polished it up after getting the "nod" and the site was finally ready to launch a couple of days later. Leaflet enabled the solution by being compact, only did the thing it was designed to do and didn't interfere elsewhere, and the plugins were tiny, did their job, and did it much more transparently. The main thing I had to do was transform their XML into GeoJSON on our webserver (their backend had only rudimentary GeoJSON support at the time - I think their internal teams either refused or were not allowed to update it?).
Anyway didn't mean to write a mini-blog post shilling Leaflet, it's a great library, my first experience of it was that it saved a seemingly doomed project, it does exactly what it says on the box and not much else, which is perfect when it's just a small component of a much larger and more complex project. It's my first go-to for interactive map rendering and even non-map stuff, like zoomable gigapixel photos.
It’s called plotbinder - the app and it’s website (plotbinder.com, currently nothing is hosted) should go online sometime in September