Skip to main content

Layer

The Layer object is used with objects that get added to a layer on the map.

For example, the InfoWindow, Marker, Overlay, and Polyline classes extend this.

Layer extends Evented.

info

The example code below uses variables to reference a Marker or Polyline object because you never set up a Layer object directly. This object contains shared methods between the classes that extend it.

Properties

PropertyTypeDescription
isVisiblebooleanWhether the layer is visible. This only holds a true/false value. Changing this doesn't make the layer visible. It only sets that it's visible and the element that extends Layer needs to handle displaying itself.

Methods

attachInfoWindow

attachInfoWindow(infoWindowValue: InfoWindowValue, event?: string) void

Attach an InfoWindow to the layer. The layer could be a Marker or a Polyline. This makes it easy to have an InfoWindow show when the element is clicked.

ParameterTypeDefaultRequiredDescription
infoWindowValueInfoWindowValueYesThe InfoWindow, InfoWindow options, or content for the InfoWindow
eventstring'click'The event to trigger displaying the InfoWindow.

Allowed event values include:

  • click - Toggle the display of the InfoWindow when clicking on the element.
  • clickon - Show the InfoWindow when clicking on the element. It will always be shown and can't be hidden once the element is clicked. This may be useful if you want to show a popup each time you click on the map.
  • hover - Show the InfoWindow when hovering over the element. Hide the InfoWindow when the element is no longer hovered.
marker.attachInfoWindow('My content for the info window');
polyline.attachInfoWindow('My content for the info window');

attachPopup

attachPopup(popupValue: PopupValue, event?: string): Popup

Attach a popup to the layer. The layer could be a Marker or a Polyline. This makes it easy to have a popup show when the element is clicked.

ParameterTypeDefaultRequiredDescription
popupValuePopupValueYesThe Popup, Popup options, or content for the Popup
eventstring'click'The event to trigger displaying the popup.

Allowed event values include:

  • click - Toggle the display of the popup when clicking on the element.
  • clickon - Show the popup when clicking on the element. It will always be shown and can't be hidden once the element is clicked. This may be useful if you want to show a popup each time you click on the map.
  • hover - Show the popup when hovering over the element. Hide the popup when the element is no longer hovered.
marker.attachPopup('My content for the popup');
polyline.attachPopup('My content for the polyline popup');

attachTooltip

attachTooltip(tooltipValue: TooltipValue, event?: string): void

Attach a Tooltip to the layer. This makes it easy to show a tooltip when the element is hovered.

An example usage is attaching a tooltip to a marker.

ParameterTypeDefaultRequiredDescription
tooltipValueTooltipValueYesThe tooltip value.
eventstring'hover'The event to trigger the tooltip.

Allowed event values include:

  • click - Toggle the display of the tooltip when clicking on the element.
  • clickon - Show the tooltip when clicking on the element. It will always be shown and can't be hidden once the element is clicked. This may be useful if you want to show a tooltip each time you click on the map.
  • hover - Show the tooltip when hovering over the element. Hide the tooltip when the element is no longer hovered.

This is an alternate way to set a tooltip on an element compared to the Tooltip attachTo() method.

marker.attachTooltip({
className: 'MapTooltip',
content: 'Marker tooltip here'
});
polyline.attachTooltip({
className: 'MapTooltip',
content: 'Polyline tooltip here'
});

closePopup

closePopup(): void

Closes the popup attached to the element. If no popup is attached then nothing happens.

marker.closePopup();

getMap

getMap(): Map | null

Return the Map object or null if the Map object is not set.

const map = marker.getMap();

getPopup

getPopup(): Popup | undefined

Return the popup object that was attached to this element. If there isn't a popup element attached then undefined is returned.

A popup object would be attached to this element with the attachPopup method.

const popup = marker.getPopup();

hasMap

hasMap(): boolean

Returns whether the layer has been assgined to a map.

if (marker.hasMap()) {
// Do something
}

hasPopup

hasPopup(): boolean

Returns whether a popup has been attached to the layer.

if (marker.hasPopup()) {
// Do something
}

openPopup()

openPopup(): void

Opens the popup attached to the element. If no popup is attached then nothing happens.

marker.openPopup();

removeMap

removeMap(): void

Clears the map object that the object is added to. This does not remove the object from the map and hide it.

setMap

setMap(Map|null): void

Sets the map object that the layer is added to. This does display the object on the map.

const map = marker.setMap(mapObject);

togglePopup

togglePopup(): void

Toggle displaying or hiding the attached popup depending on it's current state. If the popup is currently open, then it will be closed. If it is currently closed then it will be opened.

If there is no popup attached then nothing will happen.

marker.togglePopup();