Not an issue

[cubecleveland]

Thanks for this wonderful tool. makes the state mgmt much easier in react.

Im converting my DOM based react to use this tool and i have a few questions or suggestions ?

1. can i create a custom button from initialization. right now im using this code :

map.pm.Toolbar.copyDrawControl('Rectangle', {
name: 'aaaaa',
block: 'custom',
className: 'save',
onClick: () => {
map.pm.setPathOptions({
color: 'orange',
fillColor: 'green',
fillOpacity: 0.4
});
},
title: 'Display text on hover button',
actions: actions
});

but i need to initalize it once and make sure that geoman doesnt create this button with every render.

I noticed the library doesnt unmount the geoman component from the map once u initialize it.... so even if i take the GeoMAnControls comp out of the view the pm instance remain in the map....

AM i correct, any help would be good!
Thanks!

[TurtIeSocks]

Glad to hear you're enjoying it!

Good news and bad news... I ran into this problem myself a few weeks ago and have a solution, but it relies on a PR that's sat unmerged for several weeks on the main Leaflet Geoman repo. If you want to use it now, you're welcome to pull the library directly from my fork that I vaguely maintain for my personal project.

Usage example:

      <GeomanControls
        onMount={() => {
          if (!map.pm.Toolbar.controlExists('mergeMode')) {
            map.pm.Toolbar.createCustomControl({
              name: 'mergeMode',
              block: 'custom',
              title: 'Merge Polygons',
              className: 'leaflet-button-merge',
              toggle: true,
              actions: [
                {
                  text: 'Merge',
                  onClick() {
                    merge()
                  },
                },
                'cancel',
              ],
            })
          }
        }}
      />

Pulling package directly from my fork:

  "dependencies": {
    "@geoman-io/leaflet-geoman-free": "github:TurtIeSocks/leaflet-geoman",
  },

If you have suggestions on how we could solve this with this library opposed to upstream, I'm open to them :)

[cubecleveland]

Thanks for your response. i thought you might like this solution better:

since the pm instance is already attached to the map instance

you can utalize the whenReady in react leaflet to put your code there.....
Thats should work only once and solves the issue.

[Masa-99]

@cubecleveland nice idea! Does it work for you? Unfortunately, I still have the Button with this name already exists error...

My code looks like this:

  const [added, setAdded] = useState(false);

  context.map.whenReady(() => {
    if (!added) {
      context.map.pm.Toolbar.createCustomControl({
        name: 'saveArea',
        block: 'custom',
        title: 'Area speichern',
        className: 'leaflet-pm-icon-save',
        //   disabled: true,
        onClick: () => {
          console.log('done');
        },
        actions: ['finishMode', 'cancel']
      });
      setAdded(true);
    }
  });

Also @TurtIeSocks your PR is reviewed: geoman-io/leaflet-geoman#1295 (review)