tell leaflet.draw that a geojson polygon is a rectangle

Question

I'm using leaflet.draw, and when a rectangle is created, i'm fetching rectangle's data using layer.toGeoJSON(), and then i save it into a db using ajax.

After that, when the user display the map again, i'm loading previously saved data, and push them into the featureGroup reserved for leaflet.draw using L.GeoJSON.geometryToLayer()

Problem is that my previously created rectangle is now a real polygon for leaflet.draw.

"Rectangle" does not exist in geoJson specs, so i can understand that.

Now, in "properties" of the geojson, i know that the previous shape was a rectangle, with the "type" attribut.

My question is : is there a way to force a shape to be a rectangle in a leaflet.draw point of view ?

Thanks in advance !

Answer 1

I ran into this same problem and have come up with a solutions which works for me although it isn't the most elegant method.

Using leaflet.draw I receive a new layer on which I call layer.toGeoJSON() to save the rectangle to my database. On refresh of the page I'm pulling that GeoJSON representation back from my database and storing it with:

var geojson = JSON.parse(geojson_string);

What I tried first was to build my own Rectangle from the points and add it to drawnItems.

var bounds = L.latLngBounds(geojson.geometry.coordinates);
var rect = L.rectangle(bounds);
drawnItems.addLayer(rect);

This code did not throw an error, but it also didn't show a rectangle on the map. After further investigation I found the coordinate pairs output from layer.toGeoJSON() and the coordinate pairs needed by L.latLngBounds() were reversed (i.e. one was [lat, lng] and the other was [lng, lat]) which caused the Rectangle to be created but in entirely the wrong location. To get around this I constructed the layer first as a GeoJSON layer which results in a polygon, but then use that representation's bounds to construct my Rectangle.

var geojson_layer  = L.GeoJSON.geometryToLayer(geojson);
var rect = L.rectangle(geojson_layer.getBounds());
drawnItems.addLayer(rect);

This successfully creates a Rectangle which leaflet.draw recognizes and allows for the edit tools to work correctly.