# leaflet-active-area

> Leaflet-active-area [![Build Status](https://travis-ci.org/Mappy/Leaflet-active-area.svg?branch=master)](https://travis-ci.org/Mappy/Leaflet-active-area) ===============

Latest version **1.3.1** (published 2024-09-11) · 0 weekly downloads

## Install

```sh
npm install leaflet-active-area
pnpm add leaflet-active-area
yarn add leaflet-active-area
bun add leaflet-active-area
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.3.1 |
| Published | 2024-09-11 |
| First published | 2015-09-10 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 40.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 121 |
| Maintainers | mappy |

## Links

- npm: https://www.npmjs.com/package/leaflet-active-area
- Repository: https://github.com/Mappy/Leaflet-active-area
- Homepage: https://github.com/Mappy/Leaflet-active-area#readme
- Issues: https://github.com/Mappy/Leaflet-active-area/issues
- npm.io page: https://npm.io/package/leaflet-active-area

## Recent versions

- 1.3.1 (latest) — 2024-09-11
- 1.2.1 — 2022-03-04
- 1.2.0 — 2021-11-17
- 1.1.1 — 2019-10-28
- 1.1.0 — 2019-02-04
- 1.0.2 — 2017-12-28
- 0.1.1 — 2016-08-25
- 1.0.1 — 2016-03-31
- 1.0.0 — 2015-09-10
- 0.1.0 — 2015-09-10

## README

Leaflet-active-area [![Build Status](https://travis-ci.org/Mappy/Leaflet-active-area.svg?branch=master)](https://travis-ci.org/Mappy/Leaflet-active-area)
===============

That [Leaflet](http://leafletjs.com) plugin allows you to use a DIV as the active area.
All positionning methods (setView, fitBounds, setZoom) will be applyed on this DIV instead of the all map.
A typical use case is to set a map as background (like that [example](http://mappy.github.io/Leaflet-active-area/examples/index.html)) and center it on the top of the screen for example.
Defining media queries on that DIV make it easy to adapt the active area according client resolution.

## Demo

Try the [example page](http://mappy.github.io/Leaflet-active-area/examples/index.html) !

## Usage

Include the javascript file :

    <script src="L.activearea.js"></script>

Add a CSS class (".activeArea" in that example) with absolute position

    .activeArea { position: absolute; top: 50px; left: 50px; right: 50px; height: 200px; }

And instanciate your map like that :

    var map = new L.Map(document.createElement('div')).setActiveArea('activeArea');

You can also give an object with HTML style properties:

    var map = new L.Map(document.createElement('div')).setActiveArea({
        position: 'absolute',
        top: '50px',
        left: '50px',
        right: '50px',
        height: '200px'
    });

Then, the map will center itself in the center of that DIV when calling setView, setZoom, fitBounds, etc.

If your need to re-center the map automatically, pass 'true' as second argument :

    map.setActiveArea('activeArea', true, true);

Pass true as 3rd argument to animate the pan (default = false)

## Pre-commit hook

To install the pre-commit hook (which launch tests): `ln -s ../../pre-commit.sh .git/hooks/pre-commit`

## Contributors

Thanks to all contributors : https://github.com/Mappy/Leaflet-active-area/graphs/contributors

## License

This code is provided under the Apache 2.0 license.

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