Conceptual question on the relationship between Geoman and L.geoJSON

[cmlnrowan]

Very impressed with Geoman and the detailed documentation, but without an introductory project or overview, it's a little opaque for me in terms of how it interacts with Leaflet, particularly in the area of layer data management.

Can Geoman directly edit a geoJSON layer?

The documentation states:

LayerGroup
Leaflet-Geoman can only work correct with L.FeatureGroup and L.GeoJSON (the extended versions of L.LayerGroup) we need the events layeradd and layerremove.

What does "only work correctly" mean here? What can it do?

I've managed to move a Geoman drawn shape to L.GeoJSON as follows:

map.on('pm:create', (e) => {
    var newLayer = e.layer;

    let i = prompt('Name item:');
    alert(i);

    newLayer.options.pmIgnore = false; //because have opted out
    L.PM.reInitLayer(newLayer);

    var gj = newLayer.toGeoJSON();
    gj.properties.name = i;
    console.log(gj);
});

Will Geoman directly edit items on that L.GeoJSON layer, or do I need to move them back to a Geoman native layer to edit them (then back to L.GeoJSON again once done editing)?

Is there a way to have Geoman just automatically use only geoJSON for data/layer management, or are there always steps to shuttle the data between L.GeoJSON and a Geoman layer? I guess put another way, can a geoJSON layer also be a Geoman layer?

I just discovered that the geoman.io source code contains these two functions that would imply data has to be shuttled manually between geoman layers and geoJSON. Anyone have more freestanding code that will do this?

transformLayerToJson: function(e, t) {
	var o = this
	  , r = t.id
	  , n = t.shape;
	console.log("transform layer to json", r);
	var d = z()(e.toGeoJSON());
	if (d.id = r,
	d.properties || (d.properties = {}),
	e instanceof L.Marker)
		e.options.textMarker ? (d.properties.shape = "Text",
		d.properties.text = e.pm.getText()) : d.properties.shape = "Marker";
	else if (e instanceof L.Circle)
		d.properties.shape = "Circle",
		d.properties.radius = e.getRadius();
	else if (e instanceof L.Rectangle) {
		var l;
		d.properties.shape = "Rectangle",
		null !== (l = e.pm) && void 0 !== l && l.getAngle() && (d.properties.rotation = e.pm.getAngle())
	} else
		e instanceof L.CircleMarker ? d.properties.shape = "CircleMarker" : e instanceof L.Polygon ? d.properties.shape = "Polygon" : e instanceof L.Polyline && (d.properties.shape = "Line");
	n && (d.properties.shape = n),
	d.properties.project || (d.properties.project = this.config._id),
	"FeatureCollection" === d.type ? v()(d.features, (function(e, i) {
		r = 0 === i ? r : f()(),
		o.triggerShapeChange(e, r)
	}
	)) : this.triggerShapeChange(d, r)
},
applyDefaults: function(e) {
	return e ? (w()(e.properties.name) && (e.properties.name = "Unnamed Layer"),
	w()(e.properties.category) && (e.properties.category = "default"),
	e) : e
},
triggerShapeChange: function(e, t) {
	var o = this.applyDefaults(e);
	this.$emit("jsonchanged", {
		json: o,
		id: t
	})
},
createLayersFromJson: function(data) {
	var e = {};
	return v()(data, (function(t, o) {
		var i = 0;
		L.geoJSON(t, {
			pmIgnore: t.properties.pmIgnore,
			pointToLayer: function(e, o) {
				var r, n = t.properties.pmIgnore;
				return e.properties.radius ? new L.Circle(o,e.properties.radius,{
					pmIgnore: n
				}) : "CircleMarker" === e.properties.shape ? new L.CircleMarker(o,{
					pmIgnore: n
				}) : "Text" === e.properties.shape ? new L.Marker(o,{
					pmIgnore: n,
					textMarker: !0,
					text: e.properties.text
				}) : (r = e.properties.icon ? {
					pmIgnore: n,
					icon: L.divIcon({
						html: '<i style="transform: rotate('.concat(e.properties.direction, 'deg)" class="fas fa-2x fa-').concat(e.properties.icon, '"></i>'),
						className: "myDivIcon"
					})
				} : {
					pmIgnore: n
				},
				new L.Marker(o,r))
			},
			onEachFeature: function(r, n) {
				var d = t.properties.pmIgnore;
				if (r.properties && "Rectangle" === r.properties.shape) {
					var l = n.getLatLngs();
					(n = L.rectangle(n.getBounds(), {
						pmIgnore: d
					})).setLatLngs(l),
					n.pm && r.properties.rotation && n.pm._setAngle(r.properties.rotation)
				}
				i > 0 ? (n.id = o + i,
				e[o + i] = n) : (n.id = o,
				e[o] = n),
				i++
			}
		})
	}
	)),
	this.attachEvents(e),
	e
},

[Falke-Design]

Geoman is a plugin for Leaflet, and Leaflet is managing all the data on the map.

Here is how GeoJSON works with Leaflet / Geoman:

1. A GeoJSON-Layer is basically only a string so it is not possible to use it as a layer in JavaScript / Leaflet. const geojson = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[72.881536,19.045568],[72.881536,19.06374],[72.909676,19.06374],[72.909676,19.045568],[72.881536,19.045568]]]}}]}
2. You import the GeoJSON-String into Leaflet, which converts this string to an JavaScript-Objekt / Leaflet-Layer which can be displayed and modified by Leaflet. const geoGroup = L.geoJSON(geojson).
3. Geoman gets informed when a new Leaflet-Layer is added to the map and makes the Layer editable. geoGroup.addTo(map) -> Leaflet fires layeradd -> Geoman gets notified about the new layer and makes it automatically editable if the layer doesn't have pmIgnore: true
4. If a layer is now edited, Geoman updates the Leaflet-Layer (because this is the JavaScript-Objekt)
5. After editing or clickling a save-button or whatever user interaction you want, you can get a new GeoJSON-String over the Leaflet toGeoJSON() function. geoGroup.toGeoJSON().

What I want to say with that, GeoJSON is only a String and only used to store data outside of the Leaflet world for example in a database. To modify data, they need to be imported / converted to a Leaflet-Layer / JavaScript-Object and if you want to store the data in a database, you need to export the Leaflet-Layer as GeoJSON.

Checkout this example: https://jsfiddle.net/fd1ehwk2/1/

[cmlnrowan]

Thank you for taking the time to write this thorough, thoughtful explanation. It might make some sense to polish this a little further, add a few more concepts, then include this in the documentation, or at least a link to it.