leaflet-freie-tonne

Leaflet.FreieTonne

A Leaflet layer that adds the nautical features overlay from FreieTonne.

Demo
Demo on FacilMap

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:

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:

<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:

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.