Saving and restoring drawn objects #253
Comments
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
....
// get json
var json = drawnItems.toGeoJSON();geojson → objects can be done by adding L.GeoJson layer and pointing Leaflet.draw at it. Also you can iterate over drawn objects with |
|
I really like leaflet and draw plugin, but i'm stuck with saving and restoring drawn data. When I save drawn data to geojson, this geojson has no color and other properties, so when I restoring data with L.GeoJson I get only geometry with basic style. How can I describe style of drawn objects in geojson to load them later correctly? Thank you. |
|
Leaflet.draw handles drawing and editing Leaflet vector and marker objects. Leaflet allows you to convert GeoJSON to a Leaflet vector objects. Check out the documentation on L.GeoJson, this should help you find out how to style your vectors. |
|
Thank you for the quick response but L.GeoJson not solve my problem. In L.Control.Draw I use shapeOptions (color, weight) for lines and polygons, also marker icons. User can change these options, so user can draw lines, polygons in different colors, choose different marker icons etc. and for that I use Everything works, but when I put all these drawn objects in json like that |
|
Ah I see what you mean. If you check out the Leaflet code for You could open an issue on the Leaflet github or check out mapbox.js (this wraps the LEaflet.js library) to see how they achieve serializing the style in GeoJSON (https://github.com/mapbox/mapbox.js/blob/master/src/feature_layer.js). |
|
Thank you for response. Unfortunately as you said geometry style really is not part of the geoJson spec. But I found a solution. For collecting geometry style I create geoJson of drawn objects |
|
If you could post an example of that it would be appreciated. I am looking at doing the same thing.. |
|
@AndriusGeo I am running into a similar issue on a project I'm working on. Perhaps you may be able to point me in the right direction. Currently, I'm using the |
|
Having this same problem; does anyone have an example? |
|
Looking around I found this stackoverflow and this example. Kinda sucks that circle properties are not saved off by default. So extra work needs to be done to save of shape properties besides just doing toGeoJSON. |
|
I am back to working on this again. I can get the style attributes out but I am yet to get that and the geoJSON together where multiple items are drawn with different styles. |
|
And there it is. This will get all the information you require. Just decide if you save the style components in a separate field or as a style attribute of the geoJSON. |
|
And a function to get the items as geoJSON with the style included |
|
I formulated this function for getting the layer options and convert it into geojson layer properties, but I still have an error, I cant edit the polygons when I put it again on drawnItems (L.featureGroup). What seems the problem? function layerToJSON(layer){
var j = layer.toGeoJSON();
var feature = "";
j.properties = layer.options;
feature += JSON.stringify(j)
return JSON.parse(feature);
}
function drawnItemsToJSON(ilayer) {
var json = '{"type": "FeatureCollection","features": [';
var features = "";
ilayer.eachLayer(function(layer) {
features += JSON.stringify(layerToJSON(layer)) + ",";
});
return JSON.parse(json + features.slice(0,-1) + ']}');
}; |
|
If you have specified your editable layers when you declare the edit component, you can only edit the objects added to that editable layer |
|
This is correct... Here's a method I wrote to move a polygon from one layer to another that may help (hopefully)? There are calls to methods outside of this one, but those should not change how the method is read. loadPolygon: function(polygon, returnLayer) {
if(!returnLayer) {
returnLayer = false;
}
var layer = null;
try {
var geoJson = $.parseJSON(polygon);
if(geoJson.type == "Polygon") {
layer = L.geoJson(geoJson, {
color: '#FF6633',
dashArray: '5',
clickable: false,
pointerEvents: 'none',
analysisTool: true
});
} else {
return false;
}
} catch (e) {
polygonPoints = _.map(polygon.rings[0], function(value) {
latitude = value[1];
longitude = value[0];
return [latitude, longitude];
});
layer = L.polygon(polygonPoints, {
color: '#FF6633',
dashArray: '5',
clickable: false,
pointerEvents: 'none',
analysisTool: true
});
}
if(layer && returnLayer == false) {
this.$el.find('input[value="drawn"]').click();
this.$el.find('input[value="polygon"]').click();
if (this.currentDrawer != null) {
this.currentDrawer.disable();
this.currentDrawer = null;
}
this.setUpCancel();
this.enableMap();
this.applyPolygonSelection();
this.polygonSelection.addLayer(layer);
this.updateMapParams();
this.centerOnGeometry();
} else if(returnLayer) {
return layer;
}
} |
|
I'm guessing here that your Should reduce the complexity of your code just a bit. Then it get's a bit fuzzy where you need to start unwrapping the response to a get to a feature collection - or, particularly, adding the properties to the features. But I don't think you need to string parse the geojson since it's already an object and does not need to be stringified to edit the properties. In the even that the response is not a feature collection and you need to create a new object - try not to stringify if you don't have to ;) Bit fuzzy at the moment on that process. |
|
Hi ddproxy, I already tried the toGeoJSON() function, but it can't get the options as geojson property, that's why I created that function. By the way thanks for the suggestion about the stringify thing, I already optimized the function: function layerToJSON(layer){ But it can't help me with my main problem, which is editing the layers once the geojson loaded in drawnItems (L.featureGroup). |
|
This is my function for getting the previous drawnItems stored in sqlserver. |
|
Can you copy up your declaration for the drawnItems plugin - or set up a jsfiddle |
|
Hi IBrian71 |
|
The problem does not lie with the geojson layer. VM1391 Edit.SimpleShape.js:107 Uncaught TypeError: L.Marker.Touch is not a constructor |
|
I dropped your code into a page with my sources and the same result. The editing does however work if your code not loaded |
|
I have narrowed it down to your get drawn items function - i have it working in mine but cannot get it to run in your fiddle. |
|
|
I think the main issue was you were adding a featuregroup to the edit layer instead of individual polygons |
|
I didnt think of that, I thought geojson automatically adds the feature as a their respective geometric type. You're a genius iBrian71, thanks a lot! Problem solved! |
|
@nmccready I have the same problem around repopulating circle shapes. Did you find a way to get around this issue? |
|
Circle shapes are not explicitly supported by geojson, so to maintain compat across systems, when a circle is created i convert it to a polygon.. Therefore repopulating works fine. I could dig up a sample of the code if you need |
|
@iBrian71 That would be fantastic, thank you! I will try converting to polygon in the meantime. |
|
For your map.on(L.Draw.Event.CREATED, function specify how circles are handled |
|
@iBrian71 so what happens when I want to edit the circle again? Once it's converted to geojson, it'll have 120 points in a circle, which isn't very user-friendly haha. Would I need to tap into the |
|
Looks like you might be able to use a circle 👍 |
|
@Zverik what is the reason for This is the specific code block I'm using to try and repopulate shapes from a db back onto the map. Sorry its ugly, just trying to get it to work |
|
Actually, I figured out why my shapes weren't populating. I had the coordinates reversed. |
Leaflet.draw is awesome, but I need to save and restore the drawn objects.
I can get JSON for the layer by a somewhat cumbersome iteration in draw:created.
But I don't see an obvious way to go from JSON to objects on the map.
So two questions:
Is there a built-in way to get JSON representation of the objects?
Is there a way to go from JSON to objects on the may?
Thanks.
The text was updated successfully, but these errors were encountered: