Use self-defined Leaflet identifiers to work with jsTree checkboxes

I have some hierachic structured point-layers in a GeoJSON file using jsTree (ajax) with checkboxes to add them to the map. As I have about 20.000 points structured in 2.000 nodes representing the layers I have to to it in an automated way.

My idea is to connect the jsTree id with an id in the GeoJSON, so the Node ID of the jstree corresponds with the “treeid” (node.id===treeid, both are strings) in the GeoJSON file. The string ID’s are generated in a Database and exported as JSON. Each checkbox adds an ID assigned layer to a layergroup on the map. Unchecking should remove that particular layer. The user can activate as much checkboxes as he likes.

Based on this question I set the default _leaflet_id equal to the “treeid” to use it as an identifier for each Layer. This works basically.

Example of the GeoJSON:

var collection = {"type": "FeatureCollection","crs": {"type": "name","properties": {"name": "urn:ogc:def:crs:OGC:1.3:CRS84"}},   "features": [{ "type": "Feature",
   "properties": {
     "dta_1": "Node_1",
     "treeid": '01 01 002 00001'
   },
   "geometry": {
     "type": "Point",
     "coordinates": [38.933333, 40.816667]
   }
 },
 {
   "type": "Feature",
   "properties": {
     "dta_1": "Node_2",
     "treeid": '01 01 002 00002'
   },
   "geometry": {
     "type": "Point",
     "coordinates": [38.9551, 40.7626]
   }}]}

Example of the jsTree (simple JSON):

$('#data').jstree({'core': {'data': [{
     "id": "01",
     "parent": "#",
     "text": "Root"
   }, {
     "id": "01 01 002 00001",
     "parent": "01",
     "text": "Node_1"
   }, {
     "id": "01 01 002 00002",
     "parent": "01",
     "text": "Node_2"
   } ...

My checkbox code:

var group = {}; 
var layergroup =  L.layerGroup().addTo(map);
$('#data').on("check_node.jstree", function(e, data) {
            group =  L.geoJson(collection, {    
            onEachFeature: function(feature, layer) {
                           layer._leaflet_id = data.node.id;},      
            filter: function(feature, layer) {
                    if (feature.properties.treeid==data.node.id) return true}});
            group.treeid = data.node.id
            group.addTo(layergroup);
 /*         layergroup.eachLayer(function(layer){
            layer._leaflet_id = data.node.id;
            }) */
     })
.on("uncheck_node.jstree", function(e, data){
layergroup.eachLayer(function(e){
if (e._layers[data.node.id]) layergroup.removeLayer(e);})});
//   if (layer._leaflet_id === data.node.id) {
//   layergroup.removeLayer(layer)}

A working fiddle is here: jsfiddle

Using the “onEachFeature” Function works fine for one point, it is removed correctly. So I thought, it works, but as you can see in the fiddle, if there are many points (Node_2) again only one point (the first one) is added to the map. (Because only the first one is assigned?)

Using the “eachLayer” method adds all points as expected, but of course the uncheck code doesn’t work. Changing to the outcommented code does not work.

Where is the point I’m missing on the “onEachfeature” Function to add all points with the same treeid?

Or the other option: How to change the uncheck code?

I need to add all points with the same id referencing a specific node.id to a layergroup by a checkbox, unchecking it should remove them from the layergroup and the map.

var featureLayer = L.geoJson(collection);

$('#data')
  .on("check_node.jstree", function(e, data) {
    featureLayer.eachLayer(function (layer) {
      if (layer.feature.properties.treeid == data.node.id) {
        layer.addTo(layergroup);
      };
    });
  })

  .on("uncheck_node.jstree", function(e, data) {
    layergroup.eachLayer(function(layer){
      if (layer.feature.properties.treeid == data.node.id) {
        layergroup.removeLayer(layer);
      };
    })
  });