Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/protomaps/protomaps-leaflet
Lightweight vector map rendering + labeling and symbology for Leaflet
https://github.com/protomaps/protomaps-leaflet
canvas cartography leaflet
Last synced: 1 day ago
JSON representation
Lightweight vector map rendering + labeling and symbology for Leaflet
- Host: GitHub
- URL: https://github.com/protomaps/protomaps-leaflet
- Owner: protomaps
- License: bsd-3-clause
- Created: 2021-03-30T13:19:59.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-04T04:21:02.000Z (7 months ago)
- Last Synced: 2024-05-01T11:41:21.160Z (6 months ago)
- Topics: canvas, cartography, leaflet
- Language: TypeScript
- Homepage: https://protomaps.com/docs/frontends/leaflet
- Size: 2.74 MB
- Stars: 686
- Watchers: 13
- Forks: 37
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-starred - protomaps/protomaps-leaflet - Lightweight vector map rendering + labeling and symbology for Leaflet (others)
README
# protomaps-leaflet
Vector tile rendering and labeling for [Leaflet](https://github.com/Leaflet/Leaflet).
[![npm](https://img.shields.io/npm/v/protomaps-leaflet)](https://www.npmjs.com/package/protomaps-leaflet)
[![Test suite](https://github.com/protomaps/protomaps-leaflet/actions/workflows/node.js.yml/badge.svg)](https://github.com/protomaps/protomaps-leaflet/actions/workflows/node.js.yml)
This project is a complete vector tile renderer - including quality label layout - in as simple as possible of an implementation. It's an alternative to renderers like [MapLibre GL JS](https://maplibre.org) in a fraction of the size.
New projects starting from scratch should probably use MapLibre GL, but this library is useful as a drop-in replacement for raster basemaps in Leaflet, either using the [Protomaps API](https://protomaps.com/dashboard) or PMTiles on your own storage.
### Features
* Render interactive slippy maps with [Leaflet](https://leafletjs.com) integration
* Supports variable web fonts with multiple weights and italics in a single font file
* Can read normal Z/X/Y tile URLs or offline, static-hosted tile archives in [PMTiles format](https://github.com/protomaps/PMTiles)
* Full out-of-the-box support for right-to-left and Indic/Brahmic writing systems
* Configurable via plain JavaScript
* (Advanced) Extensible API for defining your own symbolizersSee the docs on [what protomaps-leaflet is, what protomaps-leaflet is not](https://protomaps.com/docs/protomaps-js#protomapsjs-is-not)
## Demos
* [Simple Leaflet demo](https://protomaps.github.io/protomaps-leaflet/examples/leaflet.html)
* [Satellite + labels demo](https://protomaps.github.io/protomaps-leaflet/examples/labels.html)
* [GeoJSON between basemap and labels demo](https://protomaps.github.io/protomaps-leaflet/examples/sandwich.html)
* [Map inset](https://protomaps.github.io/protomaps-leaflet/examples/inset.html)
* [Custom fonts](https://protomaps.github.io/protomaps-leaflet/examples/fonts.html)## How to use
```html
const map = L.map('map')
var layer = protomapsL.leafletLayer({url:'FILE.pmtiles OR ENDPOINT/{z}/{x}/{y}.mvt',theme:"light"})
layer.addTo(map)```
## See Also
* [Tangram](https://github.com/tangrams/tangram)
* [KothicJS](https://github.com/kothic/kothic-js)
* [Leaflet.VectorGrid](https://github.com/Leaflet/Leaflet.VectorGrid)