Docs

Geoman Logo

Text Layer

text-layer

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

Text Layer Drawing:

map.pm.enableDraw("Text", { textOptions: { text: "Geoman is fantastic! πŸš€" } });

See the available options for textOptions in the table below.

OptionDefaultDescription
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 layer.pm:

MethodReturnsDescription
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:

EventParamsDescriptionOutput
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:

layer.pm.getElement().style.color = "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!",
}).addTo(map);