Converting a polygon shape to a circle generates different size shape

Question

I am currently working on a product that makes use of here maps javascript sdk. As part of the project, we require the user to "draw" circles and store them as polygon within the database.

We are encountering an issue where trying to convert a circle to a polygon and back to a circle actually generates a shape is is bigger than the one before. (the reason why we do this is because the user draws a circle, we save it in the DB as a polygon, and then we reconvert as a circle in case the user wants to edit it).

I am going to try and give more context:

The following code will produce a shape with the following bounding Box:

  geoShape = new H.map.Polygon(lineString, PolygonOptions);

  boundingBox.getLeft()
  -86.292043018
  boundingBox.getRight()
  -86.025404636
  boundingBox.getTop()
  39.90279254
  boundingBox.getBottom()
  39.697939603
  boundingBox.getCenter().distance(new H.geo.Point(boundingBox.getTop(), boundingBox.getRight()))
  16100.899931650873
  boundingBox.getCenter()
  Xf {lat: 39.8003660715, lng: -86.158723827}

While the following code (using the same in data used above), will produce:

geoShape = new H.map.Circle(
          boundingBox.getCenter(),
          boundingBox
            .getCenter()
            .distance(
              new H.geo.Point(boundingBox.getTop(), boundingBox.getRight())
            ),
          CircleOptions
        );

geoShape.getBoundingBox().getLeft()
-86.34719514812161
geoShape.getBoundingBox().getRight()
-85.97025250587842
geoShape.getBoundingBox().getTop()
39.94516492537772
geoShape.getBoundingBox().getBottom()
39.65556721762228
geoShape.getRadius()
16100.899931650873
geoShape.getCenter()
Xf {lat: 39.8003660715, lng: -86.158723827}

Even if the Center and the Radius are the same for both of the example above, the shapes are different (the circle is much bigger than the other). I tried to convert it back and back again, and the shape gets bigger and bigger.

Can someone advise me on what I am doing wrong in the above conversion, or if there is anything wrong with heremap itself.

Answer 1

It would be sooo much simpler if you stored circle's center and radius in DB instead.

Anyway, the problem is, you set the radius for the new circle as a distance from the bounding box's center to it's top-right point.

But the distance should be calculated from center to top OR right OR left OR bottom. So instead of this radius:

boundingBox
  .getCenter()
  .distance(
    new H.geo.Point(boundingBox.getTop(), boundingBox.getRight())
  )

use e.g. this radius:

boundingBox
  .getCenter()
  .distance(
    new H.geo.Point(boundingBox.getTop(), boundingBox.getCenter().lng)
  )