Facility Map

Install

Install with npm:

``bash
npm install --save @golocalinteractive/se-facility-map
`

Getting Started

The Storage Essentials Facility Map is a wrapper class for Google Maps and is used to provide a flexible standard for implementing maps. Functions that are public or marked @api are meant for general use.

$3

Below is a base example with zero customization. This does assume your markup uses the default values.

Javascript
`javascript
import SeFacilityMap from '@golocalinteractive/se-facility-map';

const map = new SeFacilityMap();
`

HTML
`HTML


`HTML



...


`

#### Reset

If you filter results with javascript you may want to update the map with the filtered results.

reset() will reset locations based on your locationClass setting which also checks :not(.filtered). This allows you to change the markup to add more/less of locationClass _or_ add or remove the class .filtered to those elements to provide different results.

`javascript
const map = new SeFacilityMap();

// Listen for custom seGeoSearch event and trigger a rerender of your map.
document.addEventListener("seGeoSearch", function (event) {
map.reset();
});

// Listen for custom seMarketFilter event and trigger a rerender of your map.
document.addEventListener("seMarketFilter", function (event) {
map.reset();
});

`

Options

The following are options that will allow you to customize the map to your needs.

$3

| Key | Type | Default | Description |
|----------------|--------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| el | string | #marketMap | Unique HTML id to mount the map. |
| locationClass | string | .facility-item | CSS selector for each location. HTML element requires data-lat & data-lng attributes to set marker coordinates and nested element .map-info-window-container containing the HTML for your info window. It's recommended that .map-info-window-container be set to display: none; to remain hidden when rendering location results. |
| clustered | boolean | false | Enable/disable marker clustering. |
| clusterOptions | SeClusterOptions (see src/types/index.d.ts) | {} | Customize marker cluster options. Optionally add Renderer - render() function required. |
| infoWindow | google.maps.InfoWindowOptions | {} | Customize info window options. |
| map | SeMapOptions (see src/types/index.d.ts) | {} | Customize Google map options. Optionally set center of map with lat/lng. |
| marker | SeMarkerOptions | see Marker Options | Specify custom attributes for the marker - size, image, etc. See Marker Options |
| getLocations | () => Location[] | see Custom getLocations() | Handle where content, lat, lng, and label are pulled to form the location InfoWindow. Can be used to override default location fetching with locationClass and .map-info-window-container. See Custom getLocations() for more information. |
| onCreated | (map?: google.maps.Map) => void | () => console.log('Map created'); | Custom callback fired when map has been created. |

$3

Below you can find the custom options for the Marker options.

| Key | Type | Default | Description |
|--------|---------------|-------------------------------------|---------------------|
| labels | SeMarkerLabel | see SeMarkerLabel | Custom label config |
| icon | SeMarkerIcon | see SeMarkerIcon | Custom icon config |

#### SeMarkerLabel

Extends google.maps.MarkerLabel, see google.maps.MarkerLabel for more information.

| Key | Type | Default | Description |
|------------|---------|--------------|----------------------------------------------------------------------------------------|
| enable | boolean | false | Enable/disable marker labels. When enabled, if a label attribute is added to the location element, renders that label, otherwise defaults to the index of the filtered results.|


#### SeMarkerIcon

Extends google.maps.Symbol, see google.maps.Symbol for more information.

| Key | Type | Default | Description |
|---------------|------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------|
| path | google.maps.SymbolPath | M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0z | SVG path for marker pin icon. |
| size | google.maps.Size | new google.maps.Size(32, 32) | The width/height of a pin. Used for offsetting the info window. Don't use unless you know you need to. |

Custom getLocations()

Chances are you don't need to create a custom getLocations() function. If you pass the appropriate locationClass for your needs and use .map-info-window-container (display: none) to wrap your info window HTML then you can ignore this. By default we use SeFacilityMap@getLocations()`. This option is deprecated and likely will be removed entirely in a future major release.