Azure maps: Trying to draw direct line between two point at two corners of world

welcomenxj 1

Am trying to plot direct line between "green arrow location"(right top corner) to "destination popup point". But it's moving all around world as shown in picture. Any suggestion? Please find image for reference.

Other lines whose points are not on world edges are working fine.

2 answers

AshokPeddakotla-MSFT 33,746 Reputation points

2020-08-26T12:36:06.293+00:00

@welcomenxj Welcome to Q&A forum!
How exactly did you draw the line? Did you try from left to right?

I just tried with the sample code available here: Draw Line and able to draw a line between the points you mentioned.
Please sign in to rate this answer.
welcomenxj 1 Reputation point

2020-08-27T04:05:26.92+00:00

Thanks @AshokPeddakotla-MSFT for responding. Yeah, even i want the same to cross pacific instead of what am getting. Am using "azure-maps-control": "^2.0.26" npm package in angular application My code looks like this - –

public renderLineLayer(layerId: string, lineColor: any, dataSet: any) {
this.userDefinedLayers.push(layerId);
const lineDataSource = new atlas.source.DataSource();
this.mapInstance.sources.add(lineDataSource);
dataSet.forEach(linePoints =>
lineDataSource.add([new atlas.data.LineString([...linePoints])])
);
this.mapInstance.layers.add(
new atlas.layer.LineLayer(lineDataSource, layerId, {
strokeWidth: 3,
strokeColor: lineColor
})
);
}

my 'dataSet' in above code is 'Array' of 'Array of line points'.

Here are my line points for line with issue -
[{Lng: -118.1948, Lat: 33.767109}, {Lng: 144.9586, Lat: -37.848381}]

welcomenxj 1 Reputation point

2020-08-27T08:48:11.373+00:00

@AshokPeddakotla-MSFT
I believe, i understand the issue now but still don't have solution for it. I have added 2 images 'third quadrant coordinates' and 'fourth quadrant coordinates' for your reference. See the 'position' coords in console and how they are varying when popup point is clicked, depending on its position in map.
Why it is not returning the same co-ordinates irrespective of map position? I think answer to this will help to fix this issue

AshokPeddakotla-MSFT 33,746 Reputation points

2020-08-28T11:11:51.353+00:00

I see the active conversation with Ricky on your Stack Overflow query, kindly follow up to avoid duplicate efforts.

welcomenxj 1 Reputation point

2020-08-30T23:45:58.147+00:00

thanks for the response from Ricky. With his last response, am able to understand what SHOULD be happening under the hood. But I don't understand why its not happening for me when i try to cross pacific with these line coords from north america to melbourneline co-ords [{Lng: -118.1948, Lat: 33.767109}, {Lng: 144.9586, Lat: -37.848381}]? Is there any Map configuration which i need to enable to draw direct line between these two points crossing the pacific?
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.
rbrundritt 18,061 Reputation points Microsoft Employee

2020-09-03T06:18:04.477+00:00
Managed to reproduce the issue and after talking with one of our architects I was reminded that the GeoJSON specification does not allow shapes to cross the antemeridian. I'm not a fan of this, luckily there are a few ways around this:

Options 1:

Similar to above, but break the line into segments to minimize complexity and shift longitude values outside of the -180/180 range as needed. Then create a MultiLineString from the segments.

You end up with a line with coordinates outside of the standard range but should render any line back and forth over the antemeridian as needed.

Option 2:

Leverage a library to split the line segments on the antemeridian and create a MultiLineString.

This method is a lot more work and and might not be as accurate, but should also work with any line.

Here is a code sample showing all two options:

EDIT: Site doesn't let me copy in code or attach the file, I've uploaded the code here: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/master/AzureMapsCodeSamples/Experimental/Lines%20that%20cross%20the%20Anetmeridian%20.html
Please sign in to rate this answer.
rbrundritt 18,061 Reputation points Microsoft Employee

2020-09-03T06:23:37.253+00:00

Site doesn't let me copy in code or attach the file, I've uploaded the code here: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/master/AzureMapsCodeSamples/Experimental/Lines%20that%20cross%20the%20Anetmeridian%20.html
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

Azure maps: Trying to draw direct line between two point at two corners of world

2 answers

Your answer