Geojson structure different when drawing Leaflet layer vs loading Leaflet layer

Question

My web application has users drawing shapes with Leaflet.Draw control as well as loading shapes from geojson files. However, it seems like both methods generate different geojson objects.

When I load the shape from geojson.

{  
   "options":{  

   },
   "_layers":{  
      "2998":{  
         "options":{  
            "pane":"overlayPane",
            "attribution":null,
            "bubblingMouseEvents":true,
            "fill":true,
            "smoothFactor":1,
            "noClip":false,
            "stroke":true,
            "color":"#3388ff",
            "weight":3,
            "opacity":1,
            "lineCap":"round",
            "lineJoin":"round",
            "dashArray":null,
            "dashOffset":null,
            "fillColor":null,
            "fillOpacity":0.2,
            "fillRule":"evenodd",
            "interactive":true
         },
         "_bounds":{  
            "_southWest":{  
               "lat":3.668372,
               "lng":101.873785
            },
            "_northEast":{  
               "lat":3.670492,
               "lng":101.875974
            }
         },
         "_latlngs":[  
            [  
               {  
                  "lat":3.668372,
                  "lng":101.873785
               },
               {  
                  "lat":3.670492,
                  "lng":101.873785
               },
               {  
                  "lat":3.670492,
                  "lng":101.875974
               },
               {  
                  "lat":3.668372,
                  "lng":101.875974
               }
            ]
         ],
         "_initHooksCalled":true,
         "_events":{  
            "revert-edited":[  
               {  
                  "ctx":{  
                     "latlngs":[  
                        null
                     ],
                     "_initHooksCalled":true
                  }
               }
            ],
            "add":[  
               {  

               }
            ],
            "remove":[  
               {  

               }
            ]
         },
         "feature":{  
            "properties":{  
               "Name":"rectangle-xugcym9x4i",
               "Description":"",
               "Tag":"",
               "id":"rectangle-xugcym9x4i"
            },
            "geometry":{  
               "type":"Polygon",
               "coordinates":[  
                  [  
                     [  
                        101.873785,
                        3.668372
                     ],
                     [  
                        101.873785,
                        3.670492
                     ],
                     [  
                        101.875974,
                        3.670492
                     ],
                     [  
                        101.875974,
                        3.668372
                     ],
                     [  
                        101.873785,
                        3.668372
                     ]
                  ]
               ]
            },
            "type":"Feature"
         },
         "defaultOptions":{  
            "pane":"overlayPane",
            "attribution":null,
            "bubblingMouseEvents":true
         },
         "_leaflet_id":2998,
         "_eventParents":{  

         }
      }
   },
   "_leaflet_id":2999,
   "_initHooksCalled":true
}leaflet.js:1125:17

When I draw the shape with Leaflet.Draw

{  
   "options":{  
      "stroke":true,
      "color":"#3388ff",
      "weight":4,
      "opacity":0.5,
      "fill":true,
      "fillColor":null,
      "fillOpacity":0.2,
      "clickable":true
   },
   "_bounds":{  
      "_southWest":{  
         "lat":3.668382508900863,
         "lng":101.87454700469972
      },
      "_northEast":{  
         "lat":3.6702567212235673,
         "lng":101.87684297561646
      }
   },
   "_latlngs":[  
      [  
         {  
            "lat":3.668382508900863,
            "lng":101.87454700469972
         },
         {  
            "lat":3.6702567212235673,
            "lng":101.87454700469972
         },
         {  
            "lat":3.6702567212235673,
            "lng":101.87684297561646
         },
         {  
            "lat":3.668382508900863,
            "lng":101.87684297561646
         }
      ]
   ],
   "_initHooksCalled":true,
   "_events":{  
      "revert-edited":[  
         {  
            "ctx":{  
               "latlngs":[  
                  null
               ],
               "_initHooksCalled":true
            }
         }
      ],
      "add":[  
         {  

         }
      ],
      "remove":[  
         {  

         }
      ]
   },
   "editing":{  
      "options":{  

      },
      "_initHooksCalled":true
   },
   "feature":{  
      "properties":{  
         "Name":"rectangle-9d3jtxlr99",
         "Description":"",
         "Tag":"",
         "id":"rectangle-9d3jtxlr99"
      }
   }
}

Since both shapes are Leaflet geojson shapes, I would expect them to have an identical data structure. Because the drawn shape and the loaded shape have a different structure, I could not consistently index them to get the properties I want. My functions would work on one type of shape, but not the other.

In addition, I could edit the drawn layer with the Leaflet.draw control, but not the loaded layer. Is there a way to standardize the geojson structure for both the drawn and loaded shapes?

I think this is an XY problem. You're also jumping at conclusions assuming that the internal representation of the Javascript objects for the Leaflet layers are completely equal to the GeoJSON encoding of the features they symbolize. — IvanSanchez

ghybs ghybs · Accepted Answer · 2019-08-22T02:25:16

both shapes are Leaflet geojson shapes

From the data structure you show, the first corresponds to a Leaflet GeoJSON Layer Group, whereas the 2nd corresponds to a Leaflet rectangle vector layer.

If we pay close attention, we find a similar structure as the 2nd one within the 1st "_layers" dictionary object, which shows how Leaflet nests individual Layers in a Layer Group.

If you try getting a GeoJSON data from Layers you draw (e.g. to have their "geometry"), then simply use the toGeoJSON() method on them.

I could edit the drawn layer with the Leaflet.draw control, but not the loaded layer.

You probably try nesting your first Layer Group directly into the one you supplied to the edit.featureGroup option of L.Control.Draw. In that case, see Leaflet Draw "Cannot read property 'enable' of undefined" adding control to geoJSON layer

Geojson structure different when drawing Leaflet layer vs loading Leaflet layer

1 Answers