# leaflet-gridviz

> Leaflet plugin for gridviz

Latest version **3.0.41** (published 2026-09-22) · ISC license · 0 weekly downloads

## Install

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

## Health

**Score 55/100 (C)** — status: active.

Positive: no vulnerabilities; recently updated; high maintenance score.

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

## Facts

| | |
|---|---|
| Version | 3.0.41 |
| Published | 2026-09-22 |
| First published | 2023-05-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Joe Davies, Julien Gaffuri |
| Maintainers | joewdavies |
| Keywords | leaflet, gridviz, plugin, mapping, gis |

## Links

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

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 3.0.41 (latest) — 2026-09-22
- 3.0.40 — 2026-08-25
- 3.0.39 — 2026-08-24
- 3.0.38 — 2026-08-20
- 3.0.37 — 2026-08-20
- 3.0.36 — 2026-08-20
- 3.0.35 — 2026-02-04
- 3.0.34 — 2026-02-04
- 3.0.33 — 2026-02-03
- 3.0.31 — 2025-12-19
- 3.0.26 — 2025-11-28
- 3.0.25 — 2025-11-11
- 3.0.24 — 2025-11-10
- 3.0.19 — 2025-11-06
- 3.0.18 — 2025-11-05
- … 13 more at https://npm.io/package/leaflet-gridviz/versions

## README

# leaflet-gridviz

![npm bundle size](https://img.shields.io/bundlephobia/minzip/leaflet-gridviz)
![npm](https://img.shields.io/npm/v/leaflet-gridviz)
![license](https://img.shields.io/badge/license-EUPL-success)

<div>
    <a href="https://eurostat.github.io/leaflet-gridviz/examples/demo.html" target="_blank">
        <img src='./preview.png'>
    </a>
</div>

A plugin for Leaflet to show [gridviz](https://github.com/eurostat/gridviz) maps.

## Demo

[See demo here](https://eurostat.github.io/leaflet-gridviz/examples/demo.html) | [see code](./examples/demo.html)

## Usage

```JavaScript
// import leaflet-gridviz after importing leaflet
<script src="https://www.unpkg.com/leaflet-gridviz"></script>

// create your leaflet map
var map = new L.Map('map', {
    crs: crs,
    center: ['50.00754', '19.98211'],
})

// define your leaflet-gridviz layer
let gridvizLayer = new L.GridvizLayer({
    proj: 'EPSG:3035',
    onLayerDidMountCallback: (gridvizMap) => {
        //define multi resolution dataset
        const dataset = new gridviz.MultiResolutionDataset(
            //the resolutions
            [1000, 2000, 5000, 10000, 20000, 50000, 100000],
            //the function returning each dataset from the resolution
            (resolution) =>
                new gridviz.TiledGrid(
                    gridvizMap,
                    'https://raw.githubusercontent.com/jgaffuri/tiledgrids/main/data/europe/population2/' +
                        resolution +
                        'm/'
                )
        )

        //define color for each cell c
        const colorFunction = (cell, resolution) => {
            const density = (1000000 * cell.TOT_P_2021) / (resolution * resolution)
            if (density > 1500) return '#993404'
            else if (density > 600) return '#d95f0e'
            else if (density > 200) return '#fe9929'
            else if (density > 60) return '#fec44f'
            else if (density > 15) return '#fee391'
            else return '#ffffd4'
        }

        //define style
        const style = new gridviz.ShapeColorSizeStyle({ color: colorFunction })

        //add layer to map
        gridvizMap.layers = [new gridviz.GridLayer(dataset, [style], {minPixelsPerCell: 5})]

        //custom opacity
        gridvizLayer._canvas.style.opacity = 0.7
    },
})

// add it to the map
gridvizLayer.addTo(map)


```

Note: this has only been tested with EPSG:3035 grids

Feel free to contribute or open an issue!

## Installation for development

With node.js 14.20.1:

`npm install`  
`npm start`

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