# leaflet-freie-tonne

> Leaflet layer for FreieTonne natical features overlay.

Latest version **2.1.2** (published 2026-06-30) · BSD-2-Clause license · 0 weekly downloads

## Install

```sh
npm install leaflet-freie-tonne
pnpm add leaflet-freie-tonne
yarn add leaflet-freie-tonne
bun add leaflet-freie-tonne
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.1.2 |
| Published | 2026-06-30 |
| First published | 2021-01-21 |
| Weekly downloads | 0 |
| License | BSD-2-Clause |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 26.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Maintainers | cdauth |

## Links

- npm: https://www.npmjs.com/package/leaflet-freie-tonne
- Repository: https://github.com/FacilMap/Leaflet.FreieTonne
- npm.io page: https://npm.io/package/leaflet-freie-tonne

## Recent versions

- 2.1.2 (latest) — 2026-06-30
- 2.1.1 — 2026-06-30
- 2.1.0 — 2026-06-30
- 2.0.1 — 2023-12-25
- 2.0.0 — 2023-12-25
- 1.1.2 — 2023-04-05
- 1.1.1 — 2022-12-12
- 1.1.0 — 2022-04-17
- 1.0.5 — 2021-03-01
- 1.0.4 — 2021-02-26
- 1.0.3 — 2021-02-08
- 1.0.2 — 2021-02-06
- 1.0.1 — 2021-01-22
- 1.0.0 — 2021-01-21

## README

Leaflet.FreieTonne
==================

A Leaflet layer that adds the nautical features overlay from [FreieTonne](https://www.freietonne.de/).

[Demo](https://esm.sh/leaflet-freie-tonne/example.html)\
[Demo on FacilMap](https://facilmap.org/#10/53.7259/9.5072/MSfR-FrTo)


Usage
-----

Since release 2.0.0, Leaflet.FreieTonne is published as an ES module only. Install it using `npm install -S leaflet-freie-tonne` and use it in your code like so:

```javascript
import FreieTonne from 'leaflet-freie-tonne';
new FreieTonne().addTo(map);
```

TypeScript is supported. `FreieTonne` is a Leaflet layer, so it can be added as an overlay to `L.Control.Layers` and used in any other way that a Layer can be used.

If you want to use Leaflet.FreieTonne directly inside a website without using a module bundler (not recommended for production), you need to make sure to import it and Leaflet as a module, for example from esm.sh:

```html
<script type="importmap">
	{
		"imports": {
			"leaflet": "https://esm.sh/leaflet",
			"leaflet-freie-tonne": "https://esm.sh/leaflet-freie-tonne"
		}
	}
</script>
<script type="module">
	import L from "leaflet";
	import FreieTonne from "leaflet-freie-tonne";

	const map = L.map('map', { center: [53.7259, 9.5072], zoom: 10 });
	L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
		attribution: '© <a href="http://www.openstreetmap.org/copyright" target="_blank">OSM Contributors</a>',
		noWrap: true
	}).addTo(map);
	new FreieTonne().addTo(map);
</script>
```

### Custom fetch adapter

You can set a custom function to call the FreieTonne API:

```typescript
import { setFreieTonneFetchAdapter, getFreieTonneUrl } from "leaflet-freie-tonne";

setFreieTonneFetchAdapter((bounds, zoom) => fetch(getFreieTonneUrl(bounds, zoom)).then((res) => res.text()));
```

`bounds` is a Leaflet `Bounds` object and `zoom` is a number, both representing the current map view. `getFreieTonneUrl()` returns the default FreieTonne API URL to fetch the sea marks for this map view. You can modify the above code to use a different API URL or to use a replacement for the `fetch` function. The adapter should return a promise that is resolved with a string.

---
_Source: https://npm.io/package/leaflet-freie-tonne · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._