open-index/open-npm huggingface dataset:
npm package: @huggg/maps-browser
Description: A few handy tools for fetching huggg locations and displaying them on a map.
Latest version: 0.3.5

# huggg maps for the browser

[![pipeline status](https://gitlab.com/huggg/lib/maps-browser/badges/master/pipeline.svg)](https://gitlab.com/huggg/lib/maps-browser/commits/master)
[![coverage report](https://gitlab.com/huggg/lib/maps-browser/badges/master/coverage.svg)](https://gitlab.com/huggg/lib/maps-browser/commits/master)

### Purpose

A few handy tools for fetching huggg locations and displaying them on a map.

### Usage

The recommended way to use this map is to pass in a google maps object and
an empty DOM element to the static `init` function. This will return an
instantiated class. There are some edge-casse bugs which can happen if we do
not wait for the `tilesloaded` event and this init function handles this for
you.

```
  const el = window.document.getElementById('map');
  const hugggMap = HugggMap.init(google.maps, el);
  hugggMap.addMarkers(locations);
```

In a more complex app, you may have an existing map you wish to augment, in
which case simply call `new HugggMap(google.maps, map)` with your pre-prepared
map instance.

### API

#### init(Gmaps, el)

Initialises Google maps with our receommended settings and creates a new class instance on a fresh map once the tiles are loaded.

Required paramaters are:
**Gmaps** Google maps object
**el** The target DOM element to insert the map into.

#### addMarkers(locations, [clickHandler])

This method will add markers to the map from a supplied array of locations. For example, to
create a new map showing all huggg locations you would implement something like:

```js
import HugggMap from 'huggg-browser-maps';
import { brands } from 'huggg-maps-browser';

const el = window.document.getElementById('map');

Promise.all([HugggMap.init(google.maps, el), brands.getLocations()])
  .then(([hugggMap, locations]) => hugggMap.addMarkers(locations))
  .catch(err => console.error(err));
```

In the default case, this will cause the markers to have the "standard" click behaviour of
highlighting, centering and displaying a popup. If you wish to do something custom you can override like this:

```js
const customHandler = (gmapsEvent, markerClicked, defaultHandler) => {
  if (markerMeetsArbitraryCondition(markerClicked)) {
    doCustomAction();
  } else {
    defaultHandler();
  }
};

maps.addMarkers(markers, customHandler);
```

You can also choose from the range of default handler behaviours, like so:

```js
const onlyShowPopups = (_ev, _marker, defaultHandler) => {
  defaultHandler({ highlight: false, center: false, popup: true });
};

maps.addMarkers(markers, onlyShowPopups);
```

Allowing for more complex behaviours:

```js
const onlyShowPopups = (_ev, marker, defaultHandler) => {
  if (markerHasProducts(marker)) {
    defaultHandler({ highlight: true, center: true, popup: false });
  } else if (markerActive(marker)) {
    defaultHandler(); // empty args is all behaviours
  } else {
    // do nothing
  }
};

maps.addMarkers(markers, onlyShowPopups);
```

### clearMarkers()

Clears all markers from the current map