9 ms·

LeafletJS: a JavaScript library for interactive maps

361 points by x14km2d 5y ago

hamburgerwah 5y ago
I have used this and it is excellent. It is a tremendous alternative to all the paid GIS/mapping suites.
- hajile 5y ago
  When I used it, I really wished it used JS inheritance rather than its own custom inheritance/mixins.
  - Cyberdog 5y ago
    JavaScript inheritance wasn't really a thing when Leaflet started out, and definitely not widely-supported (is it even now?).
    - hajile 5y ago
      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.
- gkhartman 5y ago
  I'll second this. Highly recommended. It was pleasure to work with and hasn't had any issues while running in a production environment.
- SilverRed 5y ago
  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.
  - deleted 5y ago
    [deleted]
  - smelendez 5y ago
    Depending on the use case, you may be able to host tiles on any web host/cdn
    - SilverRed 5y ago
      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.
      - aendruk 5y ago
        Here’s an example of statically hosting map tiles on GitHub Pages: https://seagl.org/maps/2019 https://seagl.org/maps/2019 Source: https://github.com/SeaGL/seagl.github.io/pull/148 https://github.com/SeaGL/seagl.github.io/pull/148
      - Cyberdog 5y ago
        > 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.
  - vgeek 5y ago
- tshaddox 5y ago
  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/ https://docs.mapbox.com/mapbox-gl-js/example/
  - SahAssar 5y ago
    FYI: MapLibre is a fork of the last version of MapBoxGL that did not require payment/registration even if you don't use mapbox tiles.
  - deleted 5y ago
    [deleted]
beezischillin 5y ago
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.
- everybodyknows 5y ago
  A couple others that may bite: 1. Rotation not supported. 2. Debug source (leaflet-src.is) reports stale number: “1.6.0” for 1.7.1
- mourner 5y ago
  This should be fixed in the master version, we just didn't get our hands on making a patch release yet.
the_third_wave 5y ago
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. [1] https://git.libreoffice.org/online/+/master/loleaflet/README https://git.libreoffice.org/online/+/master/loleaflet/README
- c-smile 5y ago
  Leaflet works as it is in Sciter[1] too. SDK sample: https://github.com/c-smile/sciter-js-sdk/tree/main/samples/leaflet https://github.com/c-smile/sciter-js-sdk/tree/main/samples/l... 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 https://sciter.com
dang 5y ago
Some past related threads: How to Make Maps Using Leaflet.js, PostGIS and Chicago Open Data - https://news.ycombinator.com/item?id=19784355 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 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 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 https://news.ycombinator.com/item?id=12589447 - Sept 2016 (99 comments) D3 and Leaflet maps (2012) - https://news.ycombinator.com/item?id=11017763 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 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 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 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 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 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 https://news.ycombinator.com/item?id=2746178 - July 2011 (21 comments)
- mistrial9 5y ago
  thx dang !
vmarsy 5y ago
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.33&weaext0=%7B%22l%22%3A%22Seattle%22%2C%22r%22%3A%22WA%22%2C%22c%22%3A%22United+States%22%2C%22i%22%3A%22US%22%2C%22t%22%3A102%2C%22g%22%3A%22en-us%22%7D&city=Seattle%2C+WA&type=airquality&animation=1 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
- avel 5y ago
  That's pretty cool, it reminded me of Windy which is also pretty awesome. In fact, peeking at the source of windy, it looks like it also uses Leaflet! https://www.windy.com https://www.windy.com
  - panopticon 5y ago
    I just discovered that the other week when I was looking for a KML plugin for Leaflet. Windy maintains one! https://github.com/windycom/leaflet-kml https://github.com/windycom/leaflet-kml
  - hutch120 5y ago
    Interesting that Windy uses a version from 2018. (v1.4)
    - anakaine 5y ago
      Its very heavily customised.
  - zamadatix 5y ago
    Hot damn, an online weather page that doesn't perform like I'm trying to load the radar view over a 56k modem.
gennarro 5y ago
This is used on https://55pl.us/find/ https://55pl.us/find/ if you want to see it live Example: https://55pl.us/nursing-homes/27a052/ https://55pl.us/nursing-homes/27a052/
chx 5y ago
https://automuseums.info/ 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.
mekkkkkk 5y ago
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! https://wiki.guildwars2.com/wiki/Kryta#Interactive_Map https://wiki.guildwars2.com/wiki/Kryta#Interactive_Map
- Cyberdog 5y ago
  I'm a freelance web developer for https://gamerguides.com/ 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.
- varrock 5y ago
  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! https://oldschool.tools/world-map https://oldschool.tools/world-map
- phsource 5y ago
  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/ https://costcomap.com/
- dante_dev 5y ago
  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!
amcaskill 5y ago
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. https://rstudio.github.io/leaflet/map_widget.html https://rstudio.github.io/leaflet/map_widget.html
ve55 5y ago
I used leaflet for a previous project involving maps of users (https://tagmap.io/tag/slatestarcodex 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.
ls65536 5y ago
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 https://i.postimg.cc/8z7DMz3T/leaflet-sample.png [0] https://github.com/gokertanrisever/leaflet-ruler https://github.com/gokertanrisever/leaflet-ruler [1] https://github.com/bbecquet/Leaflet.RotatedMarker https://github.com/bbecquet/Leaflet.RotatedMarker
benatkin 5y ago
How does it compare to this? https://github.com/maplibre/maplibre-gl-js https://github.com/maplibre/maplibre-gl-js
- bdon 5y ago
  * 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.
  - benatkin 5y ago
    Thanks!
afavour 5y ago
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.
- bebop 5y ago
  Have you looked into OpenLayers? Maybe this is something that could be useful: https://openlayers.org/en/latest/apidoc/module-ol_layer_Vector-VectorLayer.html https://openlayers.org/en/latest/apidoc/module-ol_layer_Vect...
- barnabask 5y ago
  I bet you are going to be so happy to hear about https://maplibre.org https://maplibre.org then.
- bdon 5y ago
  Which vector-based rendering did you use? I'm working on a new attempt at that here, though not WebGL-based: http://github.com/protomaps/protomaps.js http://github.com/protomaps/protomaps.js so it would be valuable to know if it can get closer to what you wanted to accomplish.
- NelsonMinar 5y 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.
- 5y ago
antoniuschan99 5y ago
There’s also react-leaflet for React components Cool to see leaflet mentioned as I’ve been using it this week :P
katabasis 5y ago
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. [1] https://www.getty.edu/publications/romanmosaics/ https://www.getty.edu/publications/romanmosaics/
- ddoolin 5y ago
  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.
braden_lk 5y ago
Leaflet rocks! We use it for https://legendkeeper.com https://legendkeeper.com, CRDT-backed knowledge management for RPG game-masters.
pugets 5y ago
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. https://react-leaflet.js.org/ https://react-leaflet.js.org/
- bdon 5y ago
  React users can take a look at this component called Pigeon Maps to accomplish a similar user experience in more React DOM compatible way: https://pigeon-maps.js.org https://pigeon-maps.js.org Though you miss out on the wide range of Leaflet plugins!
mattrighetti 5y ago
This has nothing to do with JS but if you’re looking for something similar for Python I suggest Folium [1] which uses Leaflet.js to render maps on Jupyter notebooks. You can preview the end result here [2] [1]: https://github.com/python-visualization/folium https://github.com/python-visualization/folium [2]: https://python-visualization.github.io/folium/quickstart.htm https://python-visualization.github.io/folium/quickstart.htm...
Waterluvian 5y ago
Leaflet is great for a lot of rudimentary mapping online (99% of what people need). If you’re doing heavier WebGIS I encourage looking at OpenLayers.
ChrisMarshallNY 5y ago
I know someone that has used this for quite some time. It’s an excellent library.
lpasselin 5y ago
Leaflet is great for polygon annotations. It is used by Labelbox and Supervisely.
math0ne 5y ago
Having worked with leaflet extensively it's a pleasure to use. I've never encountered something I couldn't accomplish in the framework.
shireboy 5y ago
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!
parksy 5y ago
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.
Rd6n6 5y ago
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
LAC-Tech 5y ago
I've done a couple of projects for clients with google maps - what's the advantages/disadvantages of using this?
- alephnan 5y ago
  Google maps which descended from Google Earth provides a map of Earth as seen from a satellite. Museums might want a control of their experience without having to collaborate with Google. Or, Fantastical maps for video game or nerdlore.
- DanAtC 5y ago
  Google Maps prices are now outrageous https://geoawesomeness.com/developers-up-in-arms-over-google-maps-api-insane-price-hike/ https://geoawesomeness.com/developers-up-in-arms-over-google... Not to mention respecting the privacy of your users.
mourner 5y ago
I'm the original author of Leaflet, ask me anything! Very happy every time I see it shared on the HN frontpage. If you're curious about the story behind Leaflet and how and why it was born 10 years ago, here's a short 13-minute presentation on this: https://youtu.be/NLbyHffKQuU https://youtu.be/NLbyHffKQuU
- andion 5y ago
  Thank you for your library and efforts! I always use leaflet when I have to work with maps, and I couldn't be more happy.
  - mourner 5y ago
    Thanks for the kind words, that's really nice to hear!
- 6jQhWNYh 5y ago
  Our company made the switch from Leaflet to OpenLayers as we were unable to reproject rasters with different CRS to the map's CRS in Leaflet. Is there any plan to add on-the-fly reprojection within Leaflet core? Is it even the core's job to deal with projection or should this be done by plugins?
  - mourner 5y ago
    This is definitely something we want to leave to plugins, since it’s technically involved, there are multiple ways to go about it with different trade-offs, and it’s not necessary for most use cases. There are multiple plugins for it though, the most recent one being Arrugator from one of Leaflet’s maintainers Ivan: https://ivan.sanchezortega.es/development/2021/03/08/introducing-arrugator.html https://ivan.sanchezortega.es/development/2021/03/08/introdu...
    - 6jQhWNYh 5y ago
      Thanks for the reply, that's a very interesting plugin!
nobunagato 5y ago
One thing question that I have. If I want to use an image as a source of my tiles. Should I split the image into chunks to load them when user moves the map around? Or is there any other way to do that? Are there any tools that would help split an image into those chunks?
- cdrx 5y ago
  There are a few tools that will "tile" an image for you. libvips dzsave works well, even for really big images: https://libvips.github.io/libvips/API/current/Making-image-pyramids.md.html https://libvips.github.io/libvips/API/current/Making-image-p... There are commercial products in this space too (like Maptiler).
- jfjjfjfjfjfjfjf 5y ago
  Depends on your use case. If it is a very very large image, then yes you should split it into tiles. If the image is simply large and you want to use leaflet as a panning tool, then simply loading it as is should be fine.
theoa 5y ago
https://github.com/mourner/projects https://github.com/mourner/projects The above is a list of awesome open source projects Vladimir Agafonkin is involved in. Vlad's "Earcut" triangulator - embedded in Three.js - and his solar calculator are efforts that have helped me a lot. I am wondering: have Vlad and Ricardo Cabello AKA "Mr.doob" ever hacked some linear algebra together??
alyssaxuu 5y ago
Super handy library. I used it for a real-time collaborative map tool [1], it's especially useful when it comes to customization, plus it has many plugins which add a lot of functionality. Leaflet Geoman [2] for instance is great for creating all sorts of geometries on the map, I've personally used it for my tool so users can designate areas and paths. So good. [1] https://github.com/alyssaxuu/mapus https://github.com/alyssaxuu/mapus [2] https://github.com/geoman-io/leaflet-geoman https://github.com/geoman-io/leaflet-geoman
garminpartenkir 5y ago
LeafletJS looks great, but what's the advantage of using it instead of Deck.GL? LeafletJS doesn't seem to support WebGL rendering, while Deck.GL does
hdersch 5y ago
There are many projects displaying georeferenced photographs using Leaflet, which usually work via precalculated hotspots in image- and mapview. Here's a project that uses photogrammetry to link not just some but all points. Clicking the photograph zooms into the corresponding position in the Leaflet-view and vice-versa. https://hdersch.github.io/app/main.html https://hdersch.github.io/app/main.html
cormacrelf 5y ago
Looks like the pixels it’s painting on my iPhone are double size, 2x2 squares. I might have some weird experimental WebKit features enabled or something but is that an easy mistake to make with Canvas? I suppose so.
jokoon 5y ago
It's pretty awesome and works well, I've used it to test Spatialite. My only wish is that I want to generate my own raster tiles, but I've seen that planet.osm now is 1.4TB, although the .PBF is only about 60GB. I wish I could generate tiles of areas I want, but it seems the software requirements are pretty big, I'd rather use spatialite than postGIS, and I have no idea how to generate those tiles. There are a lot of GIS softwares, and most of them are pretty heavy, not to mention there are a lot of different formats which bloats everything.
deleted 5y ago
[deleted]
gavreh 5y ago
Demonstration of splitting a polygon (GIS concept) using Leaflet: https://gavinr.github.io/split-polygon-demo/ https://gavinr.github.io/split-polygon-demo/

361 points by x14km2d 5y ago

hamburgerwah 5y ago

I have used this and it is excellent. It is a tremendous alternative to all the paid GIS/mapping suites.

hajile 5y ago
When I used it, I really wished it used JS inheritance rather than its own custom inheritance/mixins.
- Cyberdog 5y ago
  JavaScript inheritance wasn't really a thing when Leaflet started out, and definitely not widely-supported (is it even now?).
  - hajile 5y ago
    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.
gkhartman 5y ago
I'll second this. Highly recommended. It was pleasure to work with and hasn't had any issues while running in a production environment.
SilverRed 5y ago
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.
- deleted 5y ago
  [deleted]
- smelendez 5y ago
  Depending on the use case, you may be able to host tiles on any web host/cdn
  - SilverRed 5y ago
    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.
    - aendruk 5y ago
      Here’s an example of statically hosting map tiles on GitHub Pages: https://seagl.org/maps/2019 https://seagl.org/maps/2019 Source: https://github.com/SeaGL/seagl.github.io/pull/148 https://github.com/SeaGL/seagl.github.io/pull/148
    - Cyberdog 5y ago
      > 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.
- vgeek 5y ago
tshaddox 5y ago
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/ https://docs.mapbox.com/mapbox-gl-js/example/
- SahAssar 5y ago
  FYI: MapLibre is a fork of the last version of MapBoxGL that did not require payment/registration even if you don't use mapbox tiles.
- deleted 5y ago
  [deleted]

beezischillin 5y ago

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.

everybodyknows 5y ago
A couple others that may bite: 1. Rotation not supported. 2. Debug source (leaflet-src.is) reports stale number: “1.6.0” for 1.7.1
mourner 5y ago
This should be fixed in the master version, we just didn't get our hands on making a patch release yet.

the_third_wave 5y ago

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. [1] https://git.libreoffice.org/online/+/master/loleaflet/README https://git.libreoffice.org/online/+/master/loleaflet/README

c-smile 5y ago
Leaflet works as it is in Sciter[1] too. SDK sample: https://github.com/c-smile/sciter-js-sdk/tree/main/samples/leaflet https://github.com/c-smile/sciter-js-sdk/tree/main/samples/l... 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 https://sciter.com

dang 5y ago

Some past related threads: How to Make Maps Using Leaflet.js, PostGIS and Chicago Open Data - https://news.ycombinator.com/item?id=19784355 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 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 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 https://news.ycombinator.com/item?id=12589447 - Sept 2016 (99 comments) D3 and Leaflet maps (2012) - https://news.ycombinator.com/item?id=11017763 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 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 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 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 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 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 https://news.ycombinator.com/item?id=2746178 - July 2011 (21 comments)

mistrial9 5y ago
thx dang !

vmarsy 5y ago

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.33&weaext0=%7B%22l%22%3A%22Seattle%22%2C%22r%22%3A%22WA%22%2C%22c%22%3A%22United+States%22%2C%22i%22%3A%22US%22%2C%22t%22%3A102%2C%22g%22%3A%22en-us%22%7D&city=Seattle%2C+WA&type=airquality&animation=1 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

avel 5y ago
That's pretty cool, it reminded me of Windy which is also pretty awesome. In fact, peeking at the source of windy, it looks like it also uses Leaflet! https://www.windy.com https://www.windy.com
- panopticon 5y ago
  I just discovered that the other week when I was looking for a KML plugin for Leaflet. Windy maintains one! https://github.com/windycom/leaflet-kml https://github.com/windycom/leaflet-kml
- hutch120 5y ago
  Interesting that Windy uses a version from 2018. (v1.4)
  - anakaine 5y ago
    Its very heavily customised.
- zamadatix 5y ago
  Hot damn, an online weather page that doesn't perform like I'm trying to load the radar view over a 56k modem.

gennarro 5y ago

This is used on https://55pl.us/find/ https://55pl.us/find/ if you want to see it live Example: https://55pl.us/nursing-homes/27a052/ https://55pl.us/nursing-homes/27a052/

chx 5y ago

https://automuseums.info/ 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.

mekkkkkk 5y ago

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! https://wiki.guildwars2.com/wiki/Kryta#Interactive_Map https://wiki.guildwars2.com/wiki/Kryta#Interactive_Map

Cyberdog 5y ago
I'm a freelance web developer for https://gamerguides.com/ 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.
varrock 5y ago
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! https://oldschool.tools/world-map https://oldschool.tools/world-map
phsource 5y ago
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/ https://costcomap.com/
dante_dev 5y ago
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!

amcaskill 5y ago

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. https://rstudio.github.io/leaflet/map_widget.html https://rstudio.github.io/leaflet/map_widget.html

ve55 5y ago

I used leaflet for a previous project involving maps of users (https://tagmap.io/tag/slatestarcodex 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.

ls65536 5y ago

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 https://i.postimg.cc/8z7DMz3T/leaflet-sample.png [0] https://github.com/gokertanrisever/leaflet-ruler https://github.com/gokertanrisever/leaflet-ruler [1] https://github.com/bbecquet/Leaflet.RotatedMarker https://github.com/bbecquet/Leaflet.RotatedMarker

benatkin 5y ago

How does it compare to this? https://github.com/maplibre/maplibre-gl-js https://github.com/maplibre/maplibre-gl-js

bdon 5y ago
* 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.
- benatkin 5y ago
  Thanks!

afavour 5y ago

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.

bebop 5y ago
Have you looked into OpenLayers? Maybe this is something that could be useful: https://openlayers.org/en/latest/apidoc/module-ol_layer_Vector-VectorLayer.html https://openlayers.org/en/latest/apidoc/module-ol_layer_Vect...
barnabask 5y ago
I bet you are going to be so happy to hear about https://maplibre.org https://maplibre.org then.
bdon 5y ago
Which vector-based rendering did you use? I'm working on a new attempt at that here, though not WebGL-based: http://github.com/protomaps/protomaps.js http://github.com/protomaps/protomaps.js so it would be valuable to know if it can get closer to what you wanted to accomplish.
NelsonMinar 5y 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.
5y ago

antoniuschan99 5y ago

There’s also react-leaflet for React components Cool to see leaflet mentioned as I’ve been using it this week :P

katabasis 5y ago

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. [1] https://www.getty.edu/publications/romanmosaics/ https://www.getty.edu/publications/romanmosaics/

ddoolin 5y ago
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.

braden_lk 5y ago

Leaflet rocks! We use it for https://legendkeeper.com https://legendkeeper.com, CRDT-backed knowledge management for RPG game-masters.

pugets 5y ago

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. https://react-leaflet.js.org/ https://react-leaflet.js.org/

bdon 5y ago
React users can take a look at this component called Pigeon Maps to accomplish a similar user experience in more React DOM compatible way: https://pigeon-maps.js.org https://pigeon-maps.js.org Though you miss out on the wide range of Leaflet plugins!

mattrighetti 5y ago

This has nothing to do with JS but if you’re looking for something similar for Python I suggest Folium [1] which uses Leaflet.js to render maps on Jupyter notebooks. You can preview the end result here [2] [1]: https://github.com/python-visualization/folium https://github.com/python-visualization/folium [2]: https://python-visualization.github.io/folium/quickstart.htm https://python-visualization.github.io/folium/quickstart.htm...

Waterluvian 5y ago

Leaflet is great for a lot of rudimentary mapping online (99% of what people need). If you’re doing heavier WebGIS I encourage looking at OpenLayers.

ChrisMarshallNY 5y ago

I know someone that has used this for quite some time. It’s an excellent library.

lpasselin 5y ago

Leaflet is great for polygon annotations. It is used by Labelbox and Supervisely.

math0ne 5y ago

Having worked with leaflet extensively it's a pleasure to use. I've never encountered something I couldn't accomplish in the framework.

shireboy 5y ago

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!

parksy 5y ago

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.

Rd6n6 5y ago

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

LAC-Tech 5y ago

I've done a couple of projects for clients with google maps - what's the advantages/disadvantages of using this?

alephnan 5y ago
Google maps which descended from Google Earth provides a map of Earth as seen from a satellite. Museums might want a control of their experience without having to collaborate with Google. Or, Fantastical maps for video game or nerdlore.
DanAtC 5y ago
Google Maps prices are now outrageous https://geoawesomeness.com/developers-up-in-arms-over-google-maps-api-insane-price-hike/ https://geoawesomeness.com/developers-up-in-arms-over-google... Not to mention respecting the privacy of your users.

mourner 5y ago

I'm the original author of Leaflet, ask me anything! Very happy every time I see it shared on the HN frontpage. If you're curious about the story behind Leaflet and how and why it was born 10 years ago, here's a short 13-minute presentation on this: https://youtu.be/NLbyHffKQuU https://youtu.be/NLbyHffKQuU

andion 5y ago
Thank you for your library and efforts! I always use leaflet when I have to work with maps, and I couldn't be more happy.
- mourner 5y ago
  Thanks for the kind words, that's really nice to hear!
6jQhWNYh 5y ago
Our company made the switch from Leaflet to OpenLayers as we were unable to reproject rasters with different CRS to the map's CRS in Leaflet. Is there any plan to add on-the-fly reprojection within Leaflet core? Is it even the core's job to deal with projection or should this be done by plugins?
- mourner 5y ago
  This is definitely something we want to leave to plugins, since it’s technically involved, there are multiple ways to go about it with different trade-offs, and it’s not necessary for most use cases. There are multiple plugins for it though, the most recent one being Arrugator from one of Leaflet’s maintainers Ivan: https://ivan.sanchezortega.es/development/2021/03/08/introducing-arrugator.html https://ivan.sanchezortega.es/development/2021/03/08/introdu...
  - 6jQhWNYh 5y ago
    Thanks for the reply, that's a very interesting plugin!

nobunagato 5y ago

One thing question that I have. If I want to use an image as a source of my tiles. Should I split the image into chunks to load them when user moves the map around? Or is there any other way to do that? Are there any tools that would help split an image into those chunks?

cdrx 5y ago
There are a few tools that will "tile" an image for you. libvips dzsave works well, even for really big images: https://libvips.github.io/libvips/API/current/Making-image-pyramids.md.html https://libvips.github.io/libvips/API/current/Making-image-p... There are commercial products in this space too (like Maptiler).
jfjjfjfjfjfjfjf 5y ago
Depends on your use case. If it is a very very large image, then yes you should split it into tiles. If the image is simply large and you want to use leaflet as a panning tool, then simply loading it as is should be fine.

theoa 5y ago

https://github.com/mourner/projects https://github.com/mourner/projects The above is a list of awesome open source projects Vladimir Agafonkin is involved in. Vlad's "Earcut" triangulator - embedded in Three.js - and his solar calculator are efforts that have helped me a lot. I am wondering: have Vlad and Ricardo Cabello AKA "Mr.doob" ever hacked some linear algebra together??

alyssaxuu 5y ago

Super handy library. I used it for a real-time collaborative map tool [1], it's especially useful when it comes to customization, plus it has many plugins which add a lot of functionality. Leaflet Geoman [2] for instance is great for creating all sorts of geometries on the map, I've personally used it for my tool so users can designate areas and paths. So good. [1] https://github.com/alyssaxuu/mapus https://github.com/alyssaxuu/mapus [2] https://github.com/geoman-io/leaflet-geoman https://github.com/geoman-io/leaflet-geoman

garminpartenkir 5y ago

LeafletJS looks great, but what's the advantage of using it instead of Deck.GL? LeafletJS doesn't seem to support WebGL rendering, while Deck.GL does

hdersch 5y ago

There are many projects displaying georeferenced photographs using Leaflet, which usually work via precalculated hotspots in image- and mapview. Here's a project that uses photogrammetry to link not just some but all points. Clicking the photograph zooms into the corresponding position in the Leaflet-view and vice-versa. https://hdersch.github.io/app/main.html https://hdersch.github.io/app/main.html

cormacrelf 5y ago

Looks like the pixels it’s painting on my iPhone are double size, 2x2 squares. I might have some weird experimental WebKit features enabled or something but is that an easy mistake to make with Canvas? I suppose so.

jokoon 5y ago

It's pretty awesome and works well, I've used it to test Spatialite. My only wish is that I want to generate my own raster tiles, but I've seen that planet.osm now is 1.4TB, although the .PBF is only about 60GB. I wish I could generate tiles of areas I want, but it seems the software requirements are pretty big, I'd rather use spatialite than postGIS, and I have no idea how to generate those tiles. There are a lot of GIS softwares, and most of them are pretty heavy, not to mention there are a lot of different formats which bloats everything.

deleted 5y ago

[deleted]

gavreh 5y ago

Demonstration of splitting a polygon (GIS concept) using Leaflet: https://gavinr.github.io/split-polygon-demo/ https://gavinr.github.io/split-polygon-demo/