Simple Flow for Add, custom Button and Save

[cubecleveland]

Hello.
Im using React leafletwith geoman.
We got the controls up on the map using the example code and we are trying to achive the folliwng behaviour.

1. we want to only show the polygon button and 2 custom buttons that will basicaly add circles -- but would have a custom tool tip e.g 'Add a Task'.

2. Upon finish editing we want to export the layer into a geojson structure and then we will push it to out DB. (later we will upload it) -- but we already have this part done. ( We are usign React so we can keep the geojson in a state or just fetch it if we can save the layer on every shape addition...)

I am sure its a very common flow so any one that can help with 1 of the steps above it will be appreciated.
Thansk so much for this great tool!!!!

[Falke-Design]

To create custom buttons you can take a look into Custom Control.

Create a copy of the Circle control with a custom title:

map.pm.Toolbar.copyDrawControl('Circle',{
  name: 'CircleTask', 
  title:'Add Task',
  block: 'draw'
});

To overwrite the tooltips of the Circle you can change the translation strings:

const customTranslation = {
  tooltips: {
    startCircle: 'Add Task',
    finishCircle: 'Click to finish Task'
  },
};

map.pm.setLang('custom_en', customTranslation, 'en');

To create a custom button to execute code like "store on db" you can use this:

// add a new custom control
map.pm.Toolbar.createCustomControl({
  name: 'StoreShapes', 
  title:'Store all shapes',
  block: 'custom',
  className: 'custom-control-icon',
  toggle: false,
  afterClick: ()=>{
  	alert('Store Shapes')
  }
});

To get all layers on the map as GeoJSON, you can call map.pm.getGeomanLayers(true).toGeoJSON()

Example: https://jsfiddle.net/falkedesign/yngq8daj/

Does this answer your questions?

[bencote]

Can this same approach be used to replace the 'edit' controls (edit layers, drag layers, etc.) and, if so, how do you hide the default edit buttons? I tried editLayers: false with no success. I looked through the geoman source and didn't not see a copyEditControl function.

[bencote]

I really just want a custom tooltip for the edit controls, so if there is an easier/cleaner approach that would be ok.

[Falke-Design]

@bencote what do you mean with tooltip? The title while hovering the button or the tooltip while editing? If you mean the tooltip you can change the text by changing the text in the translations

[bencote]

Yes, actual button title, not the in-edit tips. Any way to do that?

[Falke-Design]

Look into this example. You can change the button title in the translation too.

const customTranslation = {
  buttonTitles: {
    editButton: 'Custom Title'
  },
};

map.pm.setLang('en', customTranslation, 'en');

Translation File

[cubecleveland]

This is exactly what is needed. And well implemented.
I wonder if you can help me with one more thing I would like to associate each shape with a custom attibute(e.g a field called token) that wioll map to something in my Database......
Can i do that on creation.....

FOr example someone draws a circle... once done a popup open to select a filed or enter a token value and on click save i am actually setting token attribute to this shape....

The idea is to have thos shapes saved to the DB rferrgin to other items.

I wonder if u can guid me in the direction....

Again. i can not appreciate much your help. saved me tons of time!!!

[Falke-Design]

You can listen on the pm:create event to get the layers they are new drawn and then add a popup (or a prompt like in the example) to add a id.

map.on('pm:create',(e)=>{
    console.log(e.layer);
});

Look for example into: https://jsfiddle.net/falkedesign/qcaxzn4j/

[cubecleveland]

Worked perfect.

One last questionf or this batch: :)

IS there a preffered method to have ppl choose colors of the polygone..... is that something thats built into the editor with s simple option ?
Like upon complition choose the color of the line.... then i can save it togteher with the rest of the geojson....

[Falke-Design]

No there are no built-in coloring features. In my projects I use iro.js and apply them to the Draw-Mode or to the layer with setStyle() (Leaflet function)