Add a text marker to a map about leaflet-geoman HOT 4 CLOSED

Do you overwrite somewhere the creation of the Text-Layer?

That's happing in the back:

var textArea = document.createElement('textarea');
textArea.readOnly = true;
textArea.classList.add('pm-textarea', 'pm-disabled');

var x = L.divIcon({
  className: 'pm-text-marker',
  html: textArea, // Looks like textArea.toString() is called
});

m = L.marker(map.getCenter(), {icon: x}).addTo(map);

But it looks like html: textArea.toString() is executed instead of html: textArea for L.divIcon.

Can you please try to reproduce your issue in this fiddle: https://jsfiddle.net/sqe60fxm/ Also please make sure to use the latest Geoman and Leaflet version.

Just to try it out... Does it work if you remove this two lines?

 let icon = map.pm.Toolbar.copyDrawControl('drawMarker', { name: 'justPin', title: 'Pin by marker' });
            icon.drawInstance.setOptions({ markerStyle: { icon: markerIcon } });

Thank you. I found out the reason of the problem. I had to update the latest version. Now I works. Thanks a lot

from leaflet-geoman.

How do you create the Text-Marker? Please share your code or snipptes from your code, else we can't help you

from leaflet-geoman.

public initiateToolBar(map: L.Map) {
        if (!this.switcher) {
            this.switcher = true;
            this.drawSavedLayers();
            let icon = map.pm.Toolbar.copyDrawControl('drawMarker', { name: 'justPin', title: 'Pin by marker' });
            icon.drawInstance.setOptions({ markerStyle: { icon: markerIcon } });
        }
        map.addLayer(this.drawnItems);
        map.pm.addControls({
            position: 'topright',
            drawCircleMarker: false,
            rotateMode: false,
            // drawText: false,
            drawMarker: false,
            cutPolygon: false,
        });```

      `map.pm.setLang('en'); // set the language
        map.on('pm:create', event => {
            // set event listener on just created element
            this.drawnItems.addLayer(event.layer);
            this.saveData(event.layer, event.shape);
            this.editDrawLayers(event.layer, this.currentId);
            this.removeLayer(event.layer, this.currentId);
        });
    }`

from leaflet-geoman.

Do you overwrite somewhere the creation of the Text-Layer?

That's happing in the back:

var textArea = document.createElement('textarea');
textArea.readOnly = true;
textArea.classList.add('pm-textarea', 'pm-disabled');

var x = L.divIcon({
  className: 'pm-text-marker',
  html: textArea, // Looks like textArea.toString() is called
});

m = L.marker(map.getCenter(), {icon: x}).addTo(map);

But it looks like html: textArea.toString() is executed instead of html: textArea for L.divIcon.

Can you please try to reproduce your issue in this fiddle: https://jsfiddle.net/sqe60fxm/
Also please make sure to use the latest Geoman and Leaflet version.

Just to try it out... Does it work if you remove this two lines?

 let icon = map.pm.Toolbar.copyDrawControl('drawMarker', { name: 'justPin', title: 'Pin by marker' });
            icon.drawInstance.setOptions({ markerStyle: { icon: markerIcon } });

from leaflet-geoman.