# leaflet-trails

> A Leaflet plugin that allows easy integration with Lonvia's Waymarked Trails Site

Latest version **0.2.1** (published 2020-07-06) · GPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install leaflet-trails
pnpm add leaflet-trails
yarn add leaflet-trails
bun add leaflet-trails
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2020-07-06 |
| First published | 2019-06-07 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 72.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Raruto |
| Maintainers | raruto |
| Keywords | leaflet, waymarkedtrails, routes, osm |

## Links

- npm: https://www.npmjs.com/package/leaflet-trails
- Repository: https://github.com/Raruto/leaflet-trails
- Homepage: https://github.com/Raruto/leaflet-trails#readme
- Issues: https://github.com/Raruto/leaflet-trails/issues
- npm.io page: https://npm.io/package/leaflet-trails

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 0.2.1 (latest) — 2020-07-06
- 0.2.0 — 2020-02-10
- 0.1.9 — 2020-02-10
- 0.1.8 — 2020-02-10
- 0.1.7 — 2020-02-10
- 0.1.6 — 2020-02-09
- 0.1.5 — 2019-11-09
- 0.1.4 — 2019-10-31
- 0.1.3 — 2019-10-31
- 0.1.2 — 2019-10-31
- 0.1.1 — 2019-10-30
- 0.1.0 — 2019-10-30
- 0.0.9 — 2019-10-30
- 0.0.8 — 2019-10-30
- 0.0.7 — 2019-10-30
- … 6 more at https://npm.io/package/leaflet-trails/versions

## README

# leaflet-trails.js
A Leaflet plugin that allows easy integration with Lonvia's Waymarked Trails Site

_For a working example see one of the following examples:_

- [simple](https://raruto.github.io/leaflet-trails/examples/leaflet-trails_simple.html)
- [minimal](https://raruto.github.io/leaflet-trails/examples/leaflet-trails.html)
- [grouped](https://raruto.github.io/leaflet-trails/examples/leaflet-trails_grouped.html)
- [leaflet-ui](https://raruto.github.io/leaflet-trails/examples/leaflet-trails_ui.html)
- [overlays](https://raruto.github.io/leaflet-trails/examples/leaflet-trails_overlays.html)
- [pane](https://raruto.github.io/leaflet-trails/examples/leaflet-trails_pane.html)

---

## How to use

1. **include CSS & JavaScript**
    ```html
    <head>
    ...
    <style> html, body, #map { height: 100%; width: 100%; padding: 0; margin: 0; } </style>
    <!-- Leaflet (JS/CSS) -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
    <!-- Leaflet-Pointable -->
    <script src="https://unpkg.com/leaflet-pointable@0.0.2/leaflet-pointable.js"></script>
    <!-- Leaflet-Trails -->
    <script src="https://unpkg.com/leaflet-trails@0.0.1/leaflet-trails.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet-trails@0.0.1/leaflet-trails.css">
    ...
    </head>
    ```
2. **choose a div container used for the slippy map**
    ```html
    <body>
    ...
	  <div id="map"></div>
    ...
    </body>
    ```
3. **create your first simple “leaflet-trails slippy map**
    ```html
    <script>
    var map = L.map('map');
		map.setView(new L.LatLng(43.5978, 12.7059), 5);

		var control = L.control.layers(null, null, {
			collapsed: false
		}).addTo(map);

		var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
			maxZoom: 17,
			attribution: 'Map data: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
			opacity: 0.90
		});

		var HikingTrails = L.tileLayer('https://tile.waymarkedtrails.org/{id}/{z}/{x}/{y}.png', {
			id: 'hiking',
			pointable: true,
			attribution: '&copy; <a href="http://waymarkedtrails.org">Sarah Hoffmann</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
		});
		var CyclingTrails = L.tileLayer('https://tile.waymarkedtrails.org/{id}/{z}/{x}/{y}.png', {
			id: 'cycling',
			pointable: true,
			attribution: '&copy; <a href="http://waymarkedtrails.org">Sarah Hoffmann</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
		});

		control.addOverlay(HikingTrails, "Hiking Routes");
		control.addOverlay(CyclingTrails, "Cycling Routes");

		OpenTopoMap.addTo(map);
    </script>
    ```

---

**Compatibile with:** leaflet@1.3.4, leaflet-pointable@0.0.2

---

**Contributors:** [Raruto](https://github.com/Raruto/leaflet-trails)

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