Facility Map

Install

Install with npm:

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.

Usage

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

Javascript

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

const map = new SeFacilityMap();

HTML

<div id="marketMap" class="h-100"></div>

<!-- Location element with data-lat and data-lng attributes. Used to create your location markers. -->
<div class="facility-item" data-lat="38.930243" data-lng="-94.687515">
    <!-- HTML of your choosing -->
    <!-- Info window container (optional to include info windows) - display: none; so it's hidden from view. -->
    <div class="map-info-window-container" style="display:none;">
        <!-- Inner HTML (contents of your marker info window) -->
        <div class="map-info-window">
            <div class="map-info-window-content">
                <h4 class="infowindow-title">Go Local Interactive</h4>
                <p class="infowindow-p">10975 Benson Dr #250
                    <br />Overland Park, KS 66210
                    <br />(913) 689-3170
                </p>
                <a role="button" class="btn btn-primary btn-sm btn-infowin" href="https://www.google.com/maps/dir/?api=1&destination=38.930243,-94.687515" target="_blank">Get Directions</a>
            </div>
        </div>
    </div>
</div>

...

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

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.

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.

Base Options

| 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 and lng 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. |

Marker Options

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, renders 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.