@huggg/maps-browser

huggg maps for the browser

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:

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:

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:

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

maps.addMarkers(markers, onlyShowPopups);

Allowing for more complex behaviours:

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