[Question] What values to be passed in [bounds] to make a perfect square

[faizansaiyed]

I tried the default value provided for [bounds] attribute as [bounds]="{x:{latitude:-0.00321,longitude:-0.0052},y:{latitude:0.00321,longitude:0.0052}}" but this does not creates a perfect square. Need more information how this bounds value works. Or how can I overlay a perfect square with zoom enabled.

[AckerApple]

Using the x,y bounds is a way to say how far away to spread apart from the latitude,longitude in four direction. I think if you wanted perfectly square, all four direction would have to have the same but opposite numbers (negatives versus positives).

Some references

The demo code that applied bounds https://github.com/AckerApple/agm-overlays/blob/master/example/src/app.template.ts#L32

The demo page has a rectangle on it using those default bounds coords. It would be square if all four numbers were the same in opposite directions: https://ackerapple.github.io/agm-overlays/

The demo code uses this json demo to draw the markers: https://github.com/AckerApple/agm-overlays/blob/master/example/src/points.ts#L31 https://github.com/AckerApple/agm-overlays/blob/master/example/src/points.ts#L31

[faizansaiyed]

Thanks for the response. In the code given above([bounds]="{x:{latitude:-0.00321,longitude:-0.0052},y:{latitude:0.00321,longitude:0.0052}}"), the numbers are already in opposite direction(same negative and positive value), but it does not create exact square.

[AckerApple]

I’m on my cell phone and on the go but my guess if you didn’t want the default RECTANGLE then you may need numbers like:

[bounds]="{x:{latitude:-0.00321,longitude:-0.00321},y:{latitude:0.00321,longitude:0.00321}}"

A square, as you may know, must have equal sides

[faizansaiyed]

This is the output I get with the given values: [bounds]="{x:{latitude:-0.00321,longitude:-0.00321},y:{latitude:0.00321,longitude:0.00321}}"

[AckerApple]

I couldn't figure out how to make it perfectly square. Sorry, out of time.

Note to self or anyone who wants to attempt fixing:

The two main parts of code that communicate to google map libraries about bounds can be found in two places

1. https://github.com/AckerApple/agm-overlays/blob/master/src/AgmOverlay.component.ts#L166
2. https://github.com/AckerApple/agm-overlays/blob/master/src/AgmOverlay.component.ts#L221

[havo07]

Hi @fsaiyedOB, although it seems that we are on a square plane, there are curves in how the latitude and longitude are plotted for this reason you do not get the square. I send you an image, you would have to investigate a little more about your problem but the truth I do not understand your goal because you want to draw something if there are tools that already do that giving a size and an origin, greetings.

[havo07]

@fsaiyedOB you view this guide, this documentation create figure square (use Agm => Directives/AgmRectangle), you can compare it with the Google API to understand what I say

[faizansaiyed]

@havo07 Thanks for the guide. I'm able to draw a square with agm-rectangle directive. But here what I want to achieve is a perfect circle with equal radius all the sides using CSS and inside that circle, I've to draw four equal quadrants which I tried using pure CSS inside agm-overlay, which I'm not able to achieve using agm-rectangle. Following is the image representing my requirement.

As you may see this is not a perfect circle using the given bound values.

Also, I have to manipulate the overlay by rotating to specific angle like below: which will not be able to do so using agm-rectangle. (* Still this is not an exact square, I managed the bound values to be very near for exact square)

[devumair]

@faizansaiyed I think in code we add feature to accept [bounds] as alternate type of LatLngBounds directly, so whatever shape is will be overlay drew according to the bounds. Extra type handled here, and also accept value as LatLngBounds Add changes in existing with the help of typeof check to directly assign bounds I'm sure we'll get desired output from this approach. @AckerApple Need your suggestion, what do you say about it?

[AckerApple]

If you can make a PR for go ahead

I haven’t had the need for map work in a while and i am slammed

We use multiple branches so find the branch we develop in, fork it, fix it, and PR it