Emoji control Marker

[Ahmedgis1]

Hello,

First of all Many Thanks for the great effort!

I want to have Emojis control Marker (so the user can add emojis to the maps as marker or point) and then use the coordinates of these points.
i am trying to have more than one marker Control. I used the function map.pm.addControls and enabled the marker and disable all other controls and repeated the function and put icons, but the Marker control on the map still one.

Is there any suggestions?

[Falke-Design]

You need to copy the marker multiple times and then add each one a custom icon with markerStyle.

css:

.icon1-button {
  background-image: url('https://leafletjs.com/examples/custom-icons/leaf-red.png');
}

Js:

var icon1 = L.icon({
iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-red.png'
})

map.pm.Toolbar.copyDrawControl('Marker', {
  name: 'MarkerCopy',
  block: 'custom',
  title: 'Display text on hover button',
  className: 'icon1-button'
});
map.pm.Draw.MarkerCopy.setOptions({markerStyle: {icon: icon1}});

https://jsfiddle.net/dkjrLxsq/

[Ahmedgis1]

Thanks @Falke-Design for your fast answer.

I have tryed a lot to use this: map.pm.CustomMarker.setOptions({markerStyle: {icon: emojiIcon }})
but everytime it gives me this error : "94:15 Uncaught TypeError: Cannot read properties of undefined (reading 'setOptions')"

I found in one of your answers on a question how you changed the icon of the Marker on the map, but also I want to know how t change the icon of the ControlMarker itself?

[Falke-Design]

Sorry, the correct way is map.pm.Draw.CustomMarker.setOptions. I updated the original answer with code and a sample

[Ahmedgis1]

Many Thanks. Your Answer was very helpful.....