Skip to main content

Text Layer

Text Layer


Additional to the default methods and options there are a few more possibilities for Text Layers:

Text Layer Drawing:"Text", { textOptions: { text: "Geoman is fantastic! 🚀" } });

See the available options for textOptions in the table below.

text``Predefined text.
focusAfterDrawtrueDirectly after placing the marker, text editing is activated.
removeIfEmptytrueThe text layer is removed if no text is written.
className``Custom CSS Classes. Separated by a space.

Text Layer Editing:

The following methods are available on

focus()-Activate text editing. Layer needs first to be enabled .enable().
blur()-Deactivate text editing. Layer needs first to be enabled .enable().
hasFocus()BooleanIs text editing active.
getElement()HTMLElementReturns the <textarea> DOM element.
setText(text)-Set text.
getText()StringReturns the text.

The following events are available on a layer instance:

pm:textchangeeFired when the text of a layer is changed.text, layer, shape
pm:textfocuseFired when the text layer is focused.layer, shape
pm:textblureFired when the text layer is blurred.layer, shape

For custom text styling get the HTMLElement and add CSS styles: = "red";

Text Layer manual creation:

It is possible to create a text layer programmatically by adding a Marker with the options textMarker: true and text: 'your text'.

L.marker(latlng, {
textMarker: true,
text: "Manual creation is no problem for Geoman!",