leaflet-examples: eighty-two worked Leaflet recipes, each on its own page

What the repository is

The project is described as a collection of examples of Leaflet map usage, and the README is essentially a giant index of them. There is a working live demo hosted on GitHub Pages, and the README says plainly that it is a work in progress with suggestions welcome.

The scale is the first thing to notice. The index in the README runs from 82 down to 22 in the excerpt available, with each entry numbered and linked to an anchor on the demo site, and the numbering is the project's own sequence. So this is a numbered catalogue, not a set of loosely named demos, which means the collection has an order and a direction: the higher numbers are newer.

The primary language is recorded as unknown, and the repository tree explains why. The top level is .github/, .gitignore, LICENSE, README.md, biome.json, docs/, package.json and pnpm-lock.yaml. There is no src/ directory. The actual examples live in docs/, and they are static pages rather than a built application, which is why the language field is empty and why the tooling is a static file server.

The homepage is the GitHub Pages site for the collection, and the licence is MIT. The last push was on 2026-08-28 with the project not archived, and there are no GitHub releases. The package version in the manifest is 1.3.5, with the description a collection of examples of leaflet map usage, the author Grzegorz Tomicki, and keywords leaflet-examples and leaflet-maps.

There is also a React version of the collection, named react-leaflet-examples, linked from the README as a separate repository. So the same catalogue of techniques exists in both the imperative Leaflet API and the React wrapper, which is a useful way to think about the project: it is a reference implementation of map techniques rather than a tutorial for one library.

The catalogue, and what the numbering shows

Reading the index is the fastest way to understand what this project has decided to cover, and the shape of it is instructive.

The newest entries at the top are the ambitious ones. 82 is map-rotation, which rotates the map itself rather than rotating the content, a thing that is awkward in Leaflet and non-trivial in any mapping library. 81 is marker-tracking-with-direction-indicator, which is a marker that shows where it is heading. 80 is many-markers-with-web-worker-1000000, which is a million markers with the work moved into a web worker, and the number in the title is the point: it is a stress test rather than a demo.

Then 79 is draw-dinamic-circles-between-two-points, with the misspelling preserved from the original title, 78 calculate-area, 77 arrow-marked-lines, 76 move-marker, and 75 dynamic-data-on-sidebar.

From there the list moves into the plugin integrations and the layout problems. 74 is open-popup-markercluster-from-outside, which is about triggering a popup on a clustered marker from elsewhere in the page. 73 change-tile-style-when-click and 72 add-rectangle-over-click-tiles are both about the tile grid, reacting to a click on a tile. 71 text-below-a-marker, 70 polygon-with-gradien, 69 simple-jump-marker and 68 popup-in-a-fixed-position.

Then the third-party library section: 66 leaflet-geoman, 63 leaflet-routing-machine, 31 Leaflet.awesome-markers, and 36 story-maps-IntersectionObserver. The routing machine example is the one that matters most for anyone doing real work, because route drawing on a map is a feature with a lot of fiddly interaction detail, and the awesome-markers entry is the standard solution for styled markers.

Below that the list covers the things you need once and then forget. 62 count-markers, 60 great-circle, 58 control-layers-outside-the-map, 56 sidebar, 55 follow-mouse, 54 contextmenu, 53 create-and-save-geojson, 52 full-project, 51 tabs-in-popup, 50 autocomplete-on-map-button, 49 location-button, 48 tiles-gray, 47 random-marker-in-map-bounds, 46 checking-if-the-marker-is-in-viewport, 45 multi-layer-search, 44 data-on-sidebar, 43 image-on-map, 42 scale, 41 back-to-home-button, 40 distance-between-cities-on-map, 39 coordinates-of-the-center-of-the-visible-map, 37 enlarge-a-polygon-box-by-5-percent, 34 multiple-tile-layers, 33 location, 32 image-icons-prev-next, 30 mini-map, 29 linked-view, 28 adding-map-description, 27 fullscreen, 26 markers-60K, 25 fitBounds-with-padding, 24 polyline, 23 custom-marker-and-popup, 22 center-map-when-click-marker.

That list is a good map of what Leaflet leaves to the developer. The recurring themes are reacting to map events, positioning overlays relative to the map rather than the page, and moving large numbers of things without dropping frames.

The three themes that run through the collection

Pulling the list apart, the examples cluster into three problems, and each one is a place where Leaflet gives you primitives and leaves the assembly to you.

The first is event-driven overlays. 73 change-tile-style-when-click and 72 add-rectangle-over-click-tiles are the clearest pair, because both start from a click on a tile and do something with it. A tile layer is a grid of images, and a click on one gives you the tile coordinates and the map pixel position inside it, and turning that into a rectangle overlay or a style change is a few lines that are fiddly to work out the first time. 22 center-map-when-click-marker is the same idea with a marker, and 39 coordinates-of-the-center-of-the-visible-map is the coordinate arithmetic that goes with it.

The second is positioning things relative to the map. 43 image-on-map, 71 text-below-a-marker, 28 adding-map-description, 50 autocomplete-on-map-button and 44 data-on-sidebar all involve putting an HTML element on the map and keeping it there. The trap is that a page element positioned with CSS lives in the document, and the map lives in a transformed, panned and zoomed container, so a plain absolute position drifts as soon as you pan. 37 enlarge-a-polygon-box-by-5-percent is the same class of problem in geometry rather than DOM, and 25 fitBounds-with-padding is about giving the map room around what it is showing.

The third is volume. 26 markers-60K, 80 many-markers-with-web-worker-1000000 and 62 count-markers are all about the same thing. Leaflet's default marker is a DOM element, so a hundred thousand of them is a hundred thousand DOM nodes, which is a page that will not respond. The usual answers are canvas renderers, clustering, and moving the work off the main thread, and the two high-number examples show the clustering and the web worker approaches.

The list also has a fourth, smaller group that is worth naming: maps that are not really about the map. 42 scale, 40 distance-between-cities-on-map, 60 great-circle, 78 calculate-area and 29 linked-view are all geometry and distance calculations that Leaflet exposes because it knows the projection. And 49 location-button, 33 location, 55 follow-mouse and 54 contextmenu are the browser permission and interaction cases, where the answer is often to call out to a geolocation API rather than to the map library.

How it is served, and the tooling around it

The tooling is minimal and that is deliberate, because the examples are static pages.

The scripts section of the package manifest is the whole build story:

    "start": "http-server docs/ -o -p 3000",
    "lint": "biome check .",
    "lint:fix": "biome check --write .",
    "format": "biome format --write ."

So the start script serves the docs/ directory with http-server on port 3000 and opens it in a browser. The lint script runs biome check, lint:fix runs the same with --write, and format runs biome format with --write.

There is no build step and no bundler, and that tells you the examples load Leaflet from a script tag rather than from a package. The trade is obvious: a reader can open a single page and see the whole thing working with no tooling, but the examples cannot use a module bundler, so anything that needs one is out of scope.

The package manifest itself is short:

  "name": "leaflet-examples",
  "version": "1.3.5",
  "repository": "https://github.com/tomickigrzegorz/leaflet-examples.git",
  "description": "A collection of examples of leaflet map usage",
  "author": "Grzegorz Tomicki",
  "license": "MIT",
  "keywords": ["leaflet-examples", "leaflet-maps"],

Only two dev dependencies, @biomejs/biome at about 1.9.4 and http-server at about 14.1.1. Biome is the linter and formatter, and it is a reasonable choice for a project that wants one tool rather than an ESLint plus Prettier pair, which is what the eslint-config-prettier and eslint-plugin-prettier combination in a typical JavaScript project amounts to.

The pnpm-lock.yaml at the root tells you pnpm is the package manager, and the package.json is the only build artefact of any kind in the tree.

The consequence for a reader is that cloning and running is two commands and a browser, and the consequence for a contributor is that each example is a self-contained page in docs/ that can be opened and modified in isolation. That is also why the numbering is per example rather than per feature, since each page is a unit.

The one thing the setup does not cover is a dev server with live reload for the examples, since the start script is a plain static server. The watch script in the sibling project is not present here, so editing an example means a manual refresh. For a collection this size that is a fair trade, since the pages are independent.

How to evaluate it, and what to check first

There are four things to consider.

First, whether the technique you need is here. The catalogue is broad enough that the odds are good for common tasks, and the fact that the list is numbered and the highest visible entries are things like map rotation and direction indicators suggests the author adds the awkward cases as well as the easy ones. The anchor links go to the live demo, so you can check a technique in seconds before reading any code.

Second, whether the API shown is the one you will use. These are Leaflet examples, and Leaflet's imperative API and the React wrapper are different surfaces. The React version of the collection is a separate repository, so if you are working in React you should be reading that one, and the techniques translate but the code does not. There is a full-project example in the list as well, which is the closest thing here to a starting point for a real application rather than a demonstration of one behaviour.

Third, the plugin examples, because they carry a dependency you will inherit. leaflet-geoman, leaflet-routing-machine and awesome-markers are all real libraries with their own APIs and their own update cadence, and copying the example means adopting the plugin. Worth checking the plugin's current documentation rather than assuming the example is current, since the example's date is not recorded per page.

Fourth, the maintenance picture. The project is a work in progress by its own description, the last push was on 2026-08-28, and the manifest version is 1.3.5. The list is the documentation, and because the list lives in the README, a repository that has been left alone for a year would still show the same entries with links that may no longer work against the current Leaflet release.

What you get is a reference library rather than a dependency. There is nothing to install into your project, no API to learn and no version constraint to satisfy, and the value is in reading a page and lifting the twenty lines that solve your problem. For anyone who has ever spent an afternoon working out how to keep an HTML label pinned to a marker, that is worth more than any documentation, and the fact that the collection is MIT licensed means you can take the code without asking.

Editorial conclusion

Adopt the leaflet-examples catalogue as a reference when you need a Leaflet technique worked out for you, whether that is pinning an HTML label to a marker, reacting to a tile click, drawing a route or getting a hundred thousand markers onto a map without dropping frames, because each entry is a self-contained page you can read and lift from. Do not treat it as a dependency, since there is nothing to install and no API to learn, and do not copy a plugin example without reading that plugin's current documentation, since the examples carry no per-page date and the plugins move faster than the collection does. Before you commit, check whether you need the React version rather than this one, since the same techniques exist in both but the code differs, and open the live demo entries before reading anything, because the numbering makes it easy to jump straight to the technique you are stuck on.

Frequently asked questions

Official sources

1. Issues
2. License: MIT
3. Project website
4. README
5. tomickigrzegorz/leaflet-examples on GitHub