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?
