import Map from 'ocean-conservancy-free-seas-map/src/map.js'

public class | source

Map

Free Seas Map

Example:

let config = {
 element: document.getElementById('map'),
 searchBoxElement: document.getElementById('mapAutocomplete'),
 google: window.google,
 wordpressUrl: 'https://example-site/wp-json/wp/v2/tfs_map/'
}

window.freeSeasMap = new freeSeasMap(config);

Constructor Summary

Public Constructor
public	constructor(config: Object): class Creates an instance of Map.

Member Summary

Private Members
private	_activeMarker: <google.maps.Marker> Active Marker that has been clicked on or hovered on the map
private	_clusterMarkerIconPath: string URL path of the cluster marker icon that identify multiple grouped cleanup locations on the map, a 64px x 64px png or SVG is best
private	_clusterStyles: Array Cluster styles default for cluster markers
private	_customClusterStyles: Object Merges the custom cluster styles with configured styles
private	_customMapOptions: <google.maps.MapOptions> A configuration object for defining google map related items
private	_element: HTMLElement DOM node to render map to
private	_embedded: boolean Embedded
private	_gestureHandling: string This setting controls how the API handles gestures on the map, default is greedy
private	_google: <google> Google Maps SDK Instance
private	_infoWindow: <google.maps.InfoWindow> Google Maps Info Window or InfoBox
private	_infoWindowClickHandler: string Function name to be called with the id of the cleanup location when its' info window is clicked, should be global
private	_lastValidCenter: <google.maps.LatLngBounds> Google Maps Utility LatLngBounds, holds the last known valid center of the map
private	_map: <google.maps.Map> Google Maps Utility
private	_mapHeight: string Map height, default is 100vh
private	_mapWidth: string Map width, default is 100vw
private	_markerClusterer: <MarkerClusterer> Sets the MarkerClusterer to be used as a utility method to create marker clusters
private	_markerIconPath: string URL path of the marker icon that identify cleanup locations on the map, a 32px x 32px png or SVG is best
private	_markerPlaceholderImagesUrl: string URL path of the marker placeholder image, this are images to be displayed if a cleanup location doesn't have an image attached
private	_markers: <CleanupLocation[]> Markers that have been fetched from the cleanup location database
private	_maxZoom: number Max zoom level of the map
private	_minZoom: number Min zoom level of the map
private	_minusZoomControlImage: string URL path of image to use as the minus zoom control background image
private	_ocoMapUrl: string URL path of the Ocean Conservancy Map, defaults to hash links if none provided
private	_onClickMarkerIconPath: string URL path of the marker icon that changes when a marker is clicked, a 32px x 32px png or SVG is best
private	_plusZoomControlImage: string URL path of image to use as the plus zoom control background image
private	_searchBox: HTMLElement SearchBox element placeholder
private	_searchBoxClickElement: HTMLElement DOM node to act as a click handler to fire search events on the searchBoxElement, button, div, span, etc
private	_searchBoxElement: HTMLElement DOM node to place the places searchBox, should be of type input
private	_searchHistoryChanged: boolean Holds value if a search has been preformed
private	_visibleMarkers: <CleanupLocation[]> Visible markers that have been fetched from the cleanup location database in the current map view
private	_wordpressUrl: string URL path of the cleanup location data, @see https://oceanconservancy.org/ wp-json/wp/v2/tfs_map/ is inferred as the wordpress api

Method Summary

Public Methods
public	allMarkers(): <Marker[]> Returns all markers in memory on the page with instances of CleanupLocation attached
public	cleanupLocationById(id: integer): <Marker> Returns a cleanup location by its id
public	closeCustomInfoWindow() Closes the active info window if it is open and exists
public	decreaseZoom() Decreases map zoom by one level from the current zoom level
public	fetchAllLocations(): undefined Fetches all locations from the wordpress url and places them in clusters on the map.
public	getPaddedRandomNumberBetween(start: integer, end: integer): string Generate a random string integer between two integers
public	increaseZoom() Increases map zoom by one level from the current zoom level
public	isInfoWindowOpen(): boolean Returns if an info window is open and exists
public	openCustomInfoWindow(marker: <Marker>, contentString: string) Open a custom google maps info window by the id of a location, this method takes a google maps marker instead of an id
public	openCustomInfoWindowAsync(marker: <Marker>, contentString: string, callback: function) Open a custom google maps info window by the id of a location, this method takes a google maps marker instead of an id this method also requires a callback that fires when the google maps dom is ready
public	openInfoWindowById(markerId: integer): Marker Open an default google maps info window by the id of a location
public	panToLatLng(lat: string, lng: string) Centers Map to lat, lng points using google.map.panTo
public	panToLatLngAsync(lat: string, lng: string, callback: function) Centers Map to lat, lng points using google.map.panTo, fires a callback once the map tiles have loaded
public	render() Main rendering logic of the freeSeas map widget, here history is set for the map as well as various tasks to listen for google maps DOM events and merge configuration logic with the initial setup of a freeSeas maps
public	updateSlider(slideAmount: *) Update the zoom slider level with the current zoom amount, requires a zoom slider to be rendered on the map
public	visibleMarkers(): <Marker[]> Returns visible Google Map Markers with instances of CleanupLocation attached

Private Methods
private	_checkLatitude() Checks latitude from the valid center set between -85 and 85 degrees latitude
private	_customInfoWindowFactory(htmlContent: string): <InfoWindow> this method was deprecated. - use openCustomInfoWindow or openCustomInfoWindowAsync instead Creates google.maps.InfoBox instance
private	_emitEvent(eventName: string, data: any) Event Emiter Helper Helps emit custom events, like loading, markers set, map idling etc
private	_emitExistingLocation() Checks for location_id as a URL param and emits and event with the cleanup location marker
private	_emitExistingSearch(searchValue: *): string Checks for search as a query param in the URL and preforms a search if it exists
private	_existingEmbedLocationHandler(event: *)
private	_expandedBounds(bounds: <LatLngBounds>, nPad: number, sPad: number, ePad: number, wPad: number): <LatLngBounds> Expands LatLngBounds based on a buffer param, padding is inverse, so positive numbers add inwards vs negative ones add
private	_fetchLocations(options: Object): Promise<AxiosResponse[], AxiosError> Fetches batch of locations from wordpress url
private	_getVisibleMarkersInBounds(bounds: <LatLngBounds>, locations: <CleanupLocation[]>): <Marker[]> Sets visible markers within map view on the map as a cluster
private	_infoWindowFactory(marker: Marker): InfoWindow Creates google.maps.InfoWindow instance
private	_isGoogleMapsLoaded(callback: function) Checks to see if window.google is available and waits to render the map when it is
private	_markerFactory(data: any): Marker Returns a Google Maps Marker based on a wordpress data
private	_renderCluster(callback: *): object Renders the marker cluster on the map
private	_renderHeader(): Promise<undefined, AxiosError> Render the map countdown header on the element given in the instance of the map, used for embedded freeSeas maps
private	_renderLoading()
private	_renderSearch() Render the map searchBar on the element given in the instance of the map, used for embedded freeSeas maps
private	_resetMarkerIcon(activeMarker: <Marker>) Resets the active marker onclick image set from the config.onClickMarkerIconPath
private	_setAllMarkers(locations: any, map: <Map>): <Marker[]> Sets all markers on the map
private	_setAllVisibleMarkers(locations: array): <Marker[]> Sets visible markers within map view on the map as a cluster
private	_setDefaultMapLocation(lat: number, lng: number, zoom: number): <google.maps.MapOptions> Sets the default map location based on the, lat, lng, and zoom.
private	_setMarkers() Method to fetch and set markers, util helper method
private	_setOutOfBoundsListener() Sets up listeners for out of bounds when map is panned
private	_setSearchBox(inputElement: any) Renders the google.maps.places.SearchBox with search and places geocoding Migrates the map to the location upon successful geocode
private	_setSearchBoxClickElement(clickElement: Object) Sets the google.maps.event.trigger for focus and keydown on click of an element
private	_shouldCenterOverNorthAmerica(): <google.maps.MapOptions> Checks to see if the map is embedded and returns a configuration
private	_widgetPopupHandler(event: *) Handles infoWindow popup logic for embedded freeSeas maps, opens a custom handlebars InfoBox with a link to the ocean conservancy map
private	_zoomInButton(controlDiv: Object, map: <Map>) Renders custom zoom-in-btn as a google map control
private	_zoomOutButton(controlDiv: Object, map: <Map>) Renders custom zoom-out-btn as a google map control
private	_zoomSlider(map: <Map>, minZoom: number, maxZoom: number, controlDiv: Object) Renders custom zoom-slider as a range input on the map

Public Constructors

public constructor(config: Object): class source

Creates an instance of Map.

Params:

Name	Type	Attribute	Description
config	Object		configuration
config.element	Object		document.getElementById("elementId") where to render the map
config.mapHeight	string		set the css height of the map default is 100vh
config.mapWidth	string		set the css width of the map default is 100vw
config.google	Object		google maps instance usually "window.google"
config.searchBoxElement	Object		document.getElementById("elementId") where to render the search bar
config.searchBoxClickElement	Object		document.getElementById("elementId") for element when clicked to trigger a search
config.infoWindowClickHandler	string		function to be called with the id of the cleanup location when its' info window is clicked
config.plusZoomControlImage	string		url for plus zoom control
config.minusZoomControlImage	string		url for plus zoom control
config.wordpressUrl	string		wordpress url to fetch data from
config.ocoMapUrl	string		original ocean conservancy map location
config.markerPlaceholderImagesUrl	string		If a location doesn't have an image, use a place holder image, if provided with photo01.png as the filename provide 30 to randomly cycle through in the directory, photo01.jpg~photo30.jpg
config.markerIconPath	string		path to individual image (32 x 32px default) for each marker on map
config.onClickMarkerIconPath	string		path to individual image (32 x 32px default) for each marker on map when clicked
config.clusterMarkerIconPath	string		path to individual image for cluster icons (64px x 64px default) on map
config.customMapOptions	Object		standard google maps options object, center, zoom, styles, etc @see https://developers.google.com/maps/documentation/javascript/reference/3.exp/map#Map
config.gestureHandling	string		Define the gesture behavior, default is "greedy" to allow scrolling without CTRL + Wheel or CMD + Wheel
config.customClusterStyles	Object		standard google cluster icon styles, use size, shape for images etc @see http://htmlpreview.github.io/?https://github.com/googlemaps/v3-utility-library/blob/master/markerclusterer/docs/reference.html

Return:

class

instance of Map

Emit:

map-loaded	emit event when google map has loaded
map-loading-locations	emit event when loading locations
map-cluster-rendered	emit event when cluster items have rendered [good for showing a loading window]
map-idled	emit event when map has idled [good for grabbing updates on the locations on screen]
map-place-changed	emit event when place has changed via auto complete search
marker-clicked	emit event when map marker is clicked and data with that marker
map-url-location	emit event when location_id is present and found as a valid location in the url
map-info-window-closed	emit event when an info window is closed

Private Members

private _activeMarker: <google.maps.Marker> source

Active Marker that has been clicked on or hovered on the map

See:

https://developers.google.com/maps/documentation/javascript/reference/3.exp/marker

private _clusterMarkerIconPath: string source

URL path of the cluster marker icon that identify multiple grouped cleanup locations on the map, a 64px x 64px png or SVG is best

private _clusterStyles: Array source

Cluster styles default for cluster markers

See:

http://htmlpreview.github.io/?https://github.com/googlemaps/v3-utility-library/blob/master/markerclustererplus/docs/reference.html

private _customClusterStyles: Object source

Merges the custom cluster styles with configured styles

See:

http://htmlpreview.github.io/?https://github.com/googlemaps/v3-utility-library/blob/master/markerclustererplus/docs/reference.html

private _customMapOptions: <google.maps.MapOptions> source

A configuration object for defining google map related items

See:

https://developers.google.com/maps/documentation/javascript/reference/3/map#MapOptions

private _element: HTMLElement source

DOM node to render map to

private _embedded: boolean source

Embedded

private _gestureHandling: string source

This setting controls how the API handles gestures on the map, default is greedy

See:

https://developers.google.com/maps/documentation/javascript/reference/3/map#MapOptions.gestureHandling

private _google: <google> source

Google Maps SDK Instance

private _infoWindow: <google.maps.InfoWindow> source

Google Maps Info Window or InfoBox

See:

private _infoWindowClickHandler: string source

Function name to be called with the id of the cleanup location when its' info window is clicked, should be global

private _lastValidCenter: <google.maps.LatLngBounds> source

Google Maps Utility LatLngBounds, holds the last known valid center of the map

See:

https://developers.google.com/maps/documentation/javascript/reference/3/coordinates#LatLngBounds

private _map: <google.maps.Map> source

Google Maps Utility

See:

https://developers.google.com/maps/documentation/javascript/reference/3/map

private _mapHeight: string source

Map height, default is 100vh

private _mapWidth: string source

Map width, default is 100vw

private _markerClusterer: <MarkerClusterer> source

Sets the MarkerClusterer to be used as a utility method to create marker clusters

See:

http://htmlpreview.github.io/?https://github.com/googlemaps/v3-utility-library/blob/master/markerclustererplus/docs/reference.html

private _markerIconPath: string source

URL path of the marker icon that identify cleanup locations on the map, a 32px x 32px png or SVG is best

private _markerPlaceholderImagesUrl: string source

URL path of the marker placeholder image, this are images to be displayed if a cleanup location doesn't have an image attached

private _markers: <CleanupLocation[]> source

Markers that have been fetched from the cleanup location database

See:

https://developers.google.com/maps/documentation/javascript/reference/3.exp/marker

private _maxZoom: number source

Max zoom level of the map

private _minZoom: number source

Min zoom level of the map

private _minusZoomControlImage: string source

URL path of image to use as the minus zoom control background image

private _ocoMapUrl: string source

URL path of the Ocean Conservancy Map, defaults to hash links if none provided

private _onClickMarkerIconPath: string source

URL path of the marker icon that changes when a marker is clicked, a 32px x 32px png or SVG is best

private _plusZoomControlImage: string source

URL path of image to use as the plus zoom control background image

private _searchBox: HTMLElement source

SearchBox element placeholder

private _searchBoxClickElement: HTMLElement source

DOM node to act as a click handler to fire search events on the searchBoxElement, button, div, span, etc

private _searchBoxElement: HTMLElement source

DOM node to place the places searchBox, should be of type input

private _searchHistoryChanged: boolean source

Holds value if a search has been preformed

private _visibleMarkers: <CleanupLocation[]> source

Visible markers that have been fetched from the cleanup location database in the current map view

See:

https://developers.google.com/maps/documentation/javascript/reference/3.exp/marker

private _wordpressUrl: string source

URL path of the cleanup location data, @see https://oceanconservancy.org/ wp-json/wp/v2/tfs_map/ is inferred as the wordpress api

Public Methods

public allMarkers(): <Marker[]> source

Returns all markers in memory on the page with instances of CleanupLocation attached

Return:

<Marker[]>

google.maps.Marker

public cleanupLocationById(id: integer): <Marker> source

Returns a cleanup location by its id

Params:

Name	Type	Attribute	Description
id	integer		cleanup location id

Return:

public closeCustomInfoWindow() source

Closes the active info window if it is open and exists

public decreaseZoom() source

Decreases map zoom by one level from the current zoom level

public fetchAllLocations(): undefined source

Fetches all locations from the wordpress url and places them in clusters on the map. Only viable markers are placed for performance reasons.

Return:

undefined

public getPaddedRandomNumberBetween(start: integer, end: integer): string source

Generate a random string integer between two integers

Params:

Name	Type	Attribute	Description
start	integer
end	integer

Return:

string

padded number 01, 09, 10, 11 etc..

public increaseZoom() source

Increases map zoom by one level from the current zoom level

public isInfoWindowOpen(): boolean source

Returns if an info window is open and exists

Return:

boolean

if window is open, true, else false

public openCustomInfoWindow(marker: <Marker>, contentString: string) source

Open a custom google maps info window by the id of a location, this method takes a google maps marker instead of an id

Params:

Name	Type	Attribute	Description
marker	<Marker>		google.maps.Marker object
contentString	string		HTML String to be displayed as a InfoBox @see https://github.com/googlemaps/v3-utility-library/tree/master/infobox

public openCustomInfoWindowAsync(marker: <Marker>, contentString: string, callback: function) source

Open a custom google maps info window by the id of a location, this method takes a google maps marker instead of an id this method also requires a callback that fires when the google maps dom is ready

Params:

Name	Type	Attribute	Description
marker	<Marker>		google.maps.Marker object
contentString	string		HTML String to be displayed as a InfoBox @see https://github.com/googlemaps/v3-utility-library/tree/master/infobox
callback	function		callback to fire once the dom is ready and the info window is displayed

public openInfoWindowById(markerId: integer): Marker source

Open an default google maps info window by the id of a location

Params:

Name	Type	Attribute	Description
markerId	integer		Wordpress ID of the location from info.id

Return:

Marker

Google Maps Marker

public panToLatLng(lat: string, lng: string) source

Centers Map to lat, lng points using google.map.panTo

Params:

Name	Type	Attribute	Description
lat	string
lng	string

public panToLatLngAsync(lat: string, lng: string, callback: function) source

Centers Map to lat, lng points using google.map.panTo, fires a callback once the map tiles have loaded

Params:

Name	Type	Attribute	Description
lat	string
lng	string
callback	function

public render() source

Main rendering logic of the freeSeas map widget, here history is set for the map as well as various tasks to listen for google maps DOM events and merge configuration logic with the initial setup of a freeSeas maps

public updateSlider(slideAmount: *) source

Update the zoom slider level with the current zoom amount, requires a zoom slider to be rendered on the map

Params:

Name	Type	Attribute	Description
slideAmount	*

public visibleMarkers(): <Marker[]> source

Returns visible Google Map Markers with instances of CleanupLocation attached

Return:

<Marker[]>

google.maps.Marker

Private Methods

private _checkLatitude() source

Checks latitude from the valid center set between -85 and 85 degrees latitude

private _customInfoWindowFactory(htmlContent: string): <InfoWindow> source

this method was deprecated. - use openCustomInfoWindow or openCustomInfoWindowAsync instead

Creates google.maps.InfoBox instance

Params:

Name	Type	Attribute	Description
htmlContent	string		HTML string to set to the content of the InfoWindow

Return:

Google Maps InfoWindow

private _emitEvent(eventName: string, data: any) source

Event Emiter Helper Helps emit custom events, like loading, markers set, map idling etc

Params:

Name	Type	Attribute	Description
eventName	string		event name to be used
data	any		custom object data for the event

private _emitExistingLocation() source

Checks for location_id as a URL param and emits and event with the cleanup location marker

private _emitExistingSearch(searchValue: *): string source

Checks for search as a query param in the URL and preforms a search if it exists

Params:

Name	Type	Attribute	Description
searchValue	*		text content that should be sent to the google places api via config.searchBoxElement

Return:

string

search text from the URL or that provided to the method

private _existingEmbedLocationHandler(event: *) source

Params:

Name	Type	Attribute	Description
event	*

private _expandedBounds(bounds: <LatLngBounds>, nPad: number, sPad: number, ePad: number, wPad: number): <LatLngBounds> source

Expands LatLngBounds based on a buffer param, padding is inverse, so positive numbers add inwards vs negative ones add

Params:

Name	Type	Attribute	Description
bounds	<LatLngBounds>		Google Maps google.maps.LatLngBounds
nPad	number		north padding buffer amount to be scaled 2^10
sPad	number		south padding buffer amount to be scaled 2^10
ePad	number		east padding buffer amount to be scaled 2^10
wPad	number		west padding buffer amount to be scaled 2^10

Return:

padded google.maps.LatLngBounds

private _fetchLocations(options: Object): Promise<AxiosResponse[], AxiosError> source

Fetches batch of locations from wordpress url

Params:

Name	Type	Attribute	Description
options	Object
options.per_page	number		number of items to fetch
options.page	number		page number

Return:

Promise<AxiosResponse[], AxiosError>

private _getVisibleMarkersInBounds(bounds: <LatLngBounds>, locations: <CleanupLocation[]>): <Marker[]> source

Sets visible markers within map view on the map as a cluster

Params:

Name	Type	Attribute	Description
bounds	<LatLngBounds>		Google Maps google.maps.LatLngBounds
locations	<CleanupLocation[]>		Array of Cleanup locations to filter

Return:

<Marker[]>

google.maps.Marker

private _infoWindowFactory(marker: Marker): InfoWindow source

Creates google.maps.InfoWindow instance

Params:

Name	Type	Attribute	Description
marker	Marker		Google Maps Marker

Return:

InfoWindow

Google Maps Info Window

private _isGoogleMapsLoaded(callback: function) source

Checks to see if window.google is available and waits to render the map when it is

Params:

Name	Type	Attribute	Description
callback	function		callback to fire when window.google has loaded

private _markerFactory(data: any): Marker source

Returns a Google Maps Marker based on a wordpress data

Params:

Name	Type	Attribute	Description
data	any

Return:

Marker

Google Maps Marker

private _renderCluster(callback: *): object source

Renders the marker cluster on the map

Params:

Name	Type	Attribute	Description
callback	*

Return:

object

MarkerCluster instance

private _renderHeader(): Promise<undefined, AxiosError> source

Render the map countdown header on the element given in the instance of the map, used for embedded freeSeas maps

Return:

Promise<undefined, AxiosError>

private _renderLoading() source

private _renderSearch() source

Render the map searchBar on the element given in the instance of the map, used for embedded freeSeas maps

private _resetMarkerIcon(activeMarker: <Marker>) source

Resets the active marker onclick image set from the config.onClickMarkerIconPath

Params:

Name	Type	Attribute	Description
activeMarker	<Marker>		active marker instance or is found from the Map instances activeMarker

private _setAllMarkers(locations: any, map: <Map>): <Marker[]> source

Sets all markers on the map

Params:

Name	Type	Attribute	Description
locations	any		Wordpress Locations
map	<Map>		Active Google Map instance

Return:

<Marker[]>

Array of Google Map Marker

private _setAllVisibleMarkers(locations: array): <Marker[]> source

Sets visible markers within map view on the map as a cluster

Params:

Name	Type	Attribute	Description
locations	array

Return:

<Marker[]>

google.maps.Marker

private _setDefaultMapLocation(lat: number, lng: number, zoom: number): <google.maps.MapOptions> source

Sets the default map location based on the, lat, lng, and zoom. Uses the configured map location unless otherwise provided

Params:

Name	Type	Attribute	Description
lat	number
lng	number
zoom	number

Return:

<google.maps.MapOptions>

private _setMarkers() source

Method to fetch and set markers, util helper method

private _setOutOfBoundsListener() source

Sets up listeners for out of bounds when map is panned

private _setSearchBox(inputElement: any) source

Renders the google.maps.places.SearchBox with search and places geocoding Migrates the map to the location upon successful geocode

Params:

Name	Type	Attribute	Description
inputElement	any

private _setSearchBoxClickElement(clickElement: Object) source

Sets the google.maps.event.trigger for focus and keydown on click of an element

Params:

Name	Type	Attribute	Description
clickElement	Object		DOM Element to be clicked on to trigger focus and keydown event for search

private _shouldCenterOverNorthAmerica(): <google.maps.MapOptions> source

Checks to see if the map is embedded and returns a configuration

Return:

<google.maps.MapOptions>

private _widgetPopupHandler(event: *) source

Handles infoWindow popup logic for embedded freeSeas maps, opens a custom handlebars InfoBox with a link to the ocean conservancy map

Params:

Name	Type	Attribute	Description
event	*

private _zoomInButton(controlDiv: Object, map: <Map>) source

Renders custom zoom-in-btn as a google map control

Params:

Name	Type	Attribute	Description
controlDiv	Object		DOM element to attach the zoom control to
map	<Map>		Google Map instance

private _zoomOutButton(controlDiv: Object, map: <Map>) source

Renders custom zoom-out-btn as a google map control

Params:

Name	Type	Attribute	Description
controlDiv	Object		DOM element to attach the zoom control to
map	<Map>		Google Map instance

private _zoomSlider(map: <Map>, minZoom: number, maxZoom: number, controlDiv: Object) source

Renders custom zoom-slider as a range input on the map

Params:

Name	Type	Attribute	Description
map	<Map>		Google Map instance
minZoom	number		set the min zoom level for the range slider, default is that setup with mapOptions
maxZoom	number		set the mx zoom level for the range slider, default is that setup with mapOptions
controlDiv	Object		DOM element to attach the zoom control to