freedraw

[lmdc45]

Is it possible to use freedraw with leaflet-geoman?
https://github.com/Wildhoney/Leaflet.FreeDraw

Not sure where to start

[Falke-Design]

If you want all functions of FreeDraw (mergin, editing, ... ) it is not so easy to implement. but if you want only the free-drawing part you can do following:

    <script src="https://rawgit.com/Wildhoney/Leaflet.FreeDraw/master/dist/leaflet-freedraw.iife.js"></script>
    <style>
      .map.mode-create {
        cursor: crosshair;
      }

.leaflet-pm-toolbar .icon-freedraw{
        background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD0iMTI4cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB3aWR0aD0iMTI4cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0xMjMuMzE1LDE2TDExMi4wMDMsNC42ODZDMTA4Ljg3OCwxLjU2MywxMDQuNzgsMCwxMDAuNjg3LDBzLTguMTg4LDEuNTYzLTExLjMxMyw0LjY4NmwtNjguNjksNjguNjg5ICBDMTcuNTYzLDc2LjUsOC4wMDQsODguNTg2LDgsOTIuNjhMMCwxMjhsMzUuMzEzLThjMCwwLDE2LjE4OC05LjU2MywxOS4zMTMtMTIuNjg4bDY4LjY5LTY4LjY4NyAgQzEyOS41NjIsMzIuMzc1LDEyOS41NjIsMjIuMjQzLDEyMy4zMTUsMTZ6IE0xMC42MDUsMTE3LjM5OGw1LjE5NS0yMi45NTNjMC4wNzQtMC4zMjgsMC4xMjktMC42NjQsMC4xNi0wLjk5MiAgYzAuMDE2LTAuMDQ3LDAuMDU5LTAuMTE3LDAuMDc4LTAuMTY0bDE4LjA5LDE4LjA5NGMtMC42MDUsMC4zNjctMS4yMTUsMC43MzQtMS44MTMsMS4wOTRMMTAuNjA1LDExNy4zOTh6IE00OC45ODQsMTAxLjY0MSAgYy0wLjkwNiwwLjg1OS00LjAzOSwyLjk3Ny03Ljg2Nyw1LjQxNEwyMC4zOTEsODYuMzI4YzIuMTI1LTIuOTE0LDQuNDkyLTUuODQ0LDUuOTQ5LTcuMjk3bDUxLjcyMi01MS43MThsMjIuNjI1LDIyLjYyNSAgTDQ4Ljk4NCwxMDEuNjQxeiBNMTE3LjY1OSwzMi45NjlsLTExLjMxNiwxMS4zMTNMODMuNzE4LDIxLjY1N2wxMS4zMTYtMTEuMzEzQzk2LjU0Miw4LjgyOSw5OC41NSw4LDEwMC42ODcsOCAgczQuMTQ4LDAuODM2LDUuNjYsMi4zNDRsMTEuMzEzLDExLjMxM2MxLjUxMiwxLjUwOCwyLjM0LDMuNTE2LDIuMzQsNS42NTZDMTE5Ljk5OSwyOS40NDYsMTE5LjE2NywzMS40NjEsMTE3LjY1OSwzMi45Njl6IiBmaWxsPSIjNTQ2RTdBIi8+PC9zdmc+');
        background-size: 20px;
}
    </style>

      const freeDraw = new FreeDraw();
      map.addLayer(freeDraw);
      freeDraw.mode(FreeDraw.NONE);

      var freeDrawEnabled = false;
      function toggleFreeDraw(){
        if(freeDrawEnabled){
          freeDraw.mode(FreeDraw.NONE);
        }else{
          freeDraw.mode(FreeDraw.CREATE);
        }
        freeDrawEnabled = !freeDrawEnabled;
      }

      map.pm.Toolbar.createCustomControl({name: 'freeDraw',onClick: toggleFreeDraw, className: 'icon-freedraw'});

      freeDraw.on('markers',(e)=>{
        if(e.eventType === 'create') {
          var poly = L.polygon(e.latLngs).addTo(map);
          freeDraw.clear();
        }
      })

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

[lmdc45]

Just the freedraw part! that is amazing thanks