1

I have a predefined house geometry, let's say it's a square with a side of 6 meters.

And I want to place it anywhere on the map with a mouse click. I tried to draw this square near [0,0] coordinates and use turf transformTranslate to move it to desired coordinates. But the geometry of the building is distorted. Turned from a square to a parallelogram.

Now I am thinking of drawing the building with xy coordinates and using map.unproject to get the lat/lng coordinates. But maybe there is an easy way to do this?

 const poly = { "type": "Feature", "properties": {}, "geometry": { "coordinates": [ [ [ 6.638501146414939, 0.10866818535053824 ], [ 6.638501146414939, 0.10860431560567463 ], [ 6.6385632993425645, 0.10860431560567463 ], [ 6.6385632993425645, 0.10866818535053824 ], [ 6.638501146414939, 0.10866818535053824 ] ] ], "type": "Polygon" } }

            const center = map.getCenter().toArray()
            const from = turf.centerOfMass(poly);
            const to = turf.point(center);
            const options = { units: 'kilometers' };
            const distance = turf.rhumbDistance(from, to, options);
            const bearing = turf.rhumbBearing(from, to);
            const newPoly = turf.transformTranslate(poly, distance, bearing);
            map.getSource("maine").setData((newPoly))
1
  • 1
    You could use turf.circle to create circle of desired size at desired location and then turf.bbox to get square.
    – TomazicM
    Dec 11, 2022 at 14:53

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.