Make pre-existing layers (like a polyline) editable

[Methodician]

I'm not seeing a way to make existing layers editable. Taking the example from the Angular CLI guide, we have for instance the route and a couple markers. I can't edit them.

If I were to use the same approach to pull info from my database and, for instance, put a bunch of polygons on the map, is there a way to allow the user to edit those polygons?

Looking at leaflet docs it looks like they require setting an "edit" option in leafletOptions object like this:

var editableLayers = new L.FeatureGroup();
    map.addLayer(editableLayers);
edit: {
            featureGroup: editableLayers, //REQUIRED!!
            remove: false
        }

I tried creating editable layers in this way: editableLayers = new FeatureGroup(new LayerGroup(this.route, this.summit)) but LayerGroup only accepts an array of "layers" not things like polylines and markers, and I'm at a loss.

In short, is there a way to seed the map with markers, lines, polygons, etc... but make them editable? If not, we should add one :-)

[Methodician]

I found the solution. Just needed to get more javascripty, import Leaflet, and go strictly by the docs.

In case anyone else could benefit:

import * as L from 'leaflet';
import { FeatureGroup } from 'leaflet';
import { LayerGroup } from 'leaflet';

export class MapComponent implements OnInit {
  editablLayers = new FeatureGroup();
//   ................... other stuff

  options = {
    layers: [ this.googleMaps, this.editablLayers ],
    zoom: 7,
    center: latLng([ 46.879966, -121.726909 ])
  };

  ngOnInit(){
    this.editablLayers
    .addLayer(this.route)
    .addLayer(this.summit)
    .addLayer(this.paradise);
  }

  onMapReady(map: Map) {
    map.on(L.Draw.Event.CREATED, (e: any) => {
        const layer = e.layer;
        this.editablLayers.addLayer(layer);
    });
    map.on(L.Draw.Event.EDITED, (e: any) => {
      console.log(e);
    })
  }
}