# leaflet-place-groups-picker

> ![npm](https://img.shields.io/npm/v/leaflet-place-groups-picker)

Latest version **1.12.1** (published 2021-01-17) · ISC license · 0 weekly downloads

## Install

```sh
npm install leaflet-place-groups-picker
pnpm add leaflet-place-groups-picker
yarn add leaflet-place-groups-picker
bun add leaflet-place-groups-picker
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.12.1 |
| Published | 2021-01-17 |
| First published | 2021-01-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 2.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | damianc |

## Links

- npm: https://www.npmjs.com/package/leaflet-place-groups-picker
- Repository: https://github.com/damianc/leaflet-place-groups-picker
- Homepage: https://github.com/damianc/leaflet-place-groups-picker#readme
- Issues: https://github.com/damianc/leaflet-place-groups-picker/issues
- npm.io page: https://npm.io/package/leaflet-place-groups-picker

## Recent versions

- 1.12.1 (latest) — 2021-01-17
- 1.12.0 — 2021-01-17
- 1.11.0 — 2021-01-17
- 1.10.1 — 2021-01-17
- 1.10.0 — 2021-01-17
- 1.9.1 — 2021-01-17
- 1.9.0 — 2021-01-17
- 1.8.1 — 2021-01-17
- 1.8.0 — 2021-01-17
- 1.7.0 — 2021-01-17
- 1.6.0 — 2021-01-16
- 1.5.0 — 2021-01-16
- 1.4.0 — 2021-01-16
- 1.3.1 — 2021-01-16
- 1.3.0 — 2021-01-16
- … 3 more at https://npm.io/package/leaflet-place-groups-picker/versions

## README

# leaflet-place-groups-picker

![npm](https://img.shields.io/npm/v/leaflet-place-groups-picker)

Plugin for the Leaflet maps that allows grouping places in groups whose visibility can be toggled.

## Installation

```
npm i -P leaflet-place-groups-picker
```

## How to use the plugin

<img src="https://github.com/damianc/leaflet-place-groups-picker/blob/main/doc/images/screenshot.png" alt="Example of use of the plugin" />

```
const map = L.map('map',{
  center: [52, 16],
  zoom: 6
});

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

/* add control to a map */

const grouping = L.control.placeGroupsPicker({
  position: 'topright',
  caption: 'Places'
});

map.addControl(grouping);

/* add groups */

grouping.addGroup('Malls', { map, color: 'gold' });
grouping.addGroup('Schools', { map, color: 'red' });

/* add places to groups */

grouping.addPoint('Malls', [50, 15]);
grouping.addPoint('Malls', [54, 15]);

grouping.addPoint('Schools', [50, 17]);
grouping.addPoint('Schools', [54, 17]);
```

### Options

| Option | Description | Default value |
|----|----|----|
| `position` | Where to place a control on the map (`topleft`, `topright`, `bottomleft` or `bottomright`). | no default value |
| `caption` | Caption to display in a control. | `Groups` |
| `captionColor` | Color of a caption text. | `#333` |
| `captionBackground` | Background color (or image/gradient) of a caption. | `rgba(255, 255, 255, .75)` |
| `captionArrowColor` | Color of a caption arrow indicating a list visibility state. | `#444` |
| `iconSize` | Size of icons. | `[30, 30]` |
| `iconShadow` | Whether to add a shadow to icons. | `false` |
| `iconInnerShadow` | Whether to add an inset shadow to icons. | `false` |
| `iconStyle` | Icon style: `rectangle`, `circle` or `rounded` | `rectangle` |
| `static` | When `true`, toggling groups visibility is disabled. | `false` |

### `addGroup(name, options)`

Adds new group of places.

* `name` - name of a group
* `options`- options of a group:
  * `map` - a map reference
  * `color` - color of icons related to the group

This method returns a reference to the newly added group (`L.FeatureGroup`).

### `addPoint(group, coords)`

Adds new point to a group.

* `group` - name of a group the point belongs to
* `coords` - coordinates of the point, declared as the `[lat, lng]` array

This method returns a marker reference, so that you can, for example, bind a popup to it:

```
const popupContent = `
  <div>
    <div style="font-size:14px"><strong>Popup Info</strong></div>
    <div style="font-size:10px">This is just popup bound to marker.</div>
  </div>
`;

grouping.addPoint('Schools', [54, 17]).bindPopup(popupContent);

// or:

const pointS1 = grouping.addPoint('Schools', [54, 17]);
pointS1.bindPopup(popupContent);
```

### `addPoints(group, coordsArray)`

Adds new points to a group.

* `group` - name of a group the points belong to
* `coordsArray` - array of coordinates declared as the `[lat, lng]` array

This method returns an array of markers references, so that you can, for example, bind a popup to them.

```
const popupContent = `
  <div>
    <div style="font-size:14px"><strong>Popup Info</strong></div>
    <div style="font-size:10px">This is just popup bound to marker.</div>
  </div>
`;

const [first, second] = grouping.addPoints('Schools', [
  [54, 17],
  [52, 18]
]);

first.bindPopup(popupContent);
second.bindPopup(popupContent);
```

### `addData(map, data)`

* `map` - a map reference (`L.Map`)
* `data` - object whose keys reflect group names and values are object with the following properties: `color` and `points`

```
grouping.addData(map, {
  'University': {
    color: 'red',
    points: [[48, 14], [48, 15]]
  },
  'Library': {
    color: '#2af',
    points: [[58, 14], [58, 15]]
  }
});
```

### `getGroupRef(groupName)`

* `groupName` - name of a group whose reference will be returned

You may want to use this method to get a group reference when the `addData()` method was used to add data to a map, which does not return any references.

```
const universities = grouping.getGroupRef('University');
console.log(universities.getBounds());
```

## Operations on markers

### Removing marker from a map

Markers can be easily removed by the `remove()` method inherited from the [`Layer`](https://leafletjs.com/reference-1.7.1.html#layer) class:

```
const pointA = grouping.addPoint('Factory', [50, 15]);

setTimeout(() => {
  pointA.remove();
}, 2000);
```

### Removing marker only from a group

```
const pointA = grouping.addPoint('Factory', [50, 15]);

setTimeout(() => {
  pointA.removeFromGroup();
}, 2000);
```

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