Azure Maps: Shape Coordinates Exceeding Limits, Causing Filtering Issues

Question

Hi all,

I am using the Drawing Manager from the Azure Maps Sample Code to draw shapes on a map using freehand drawing.

I am trying to filter markers within the drawn shape using turf.booleanPointInPolygon. However, in some areas, the markers are not being filtered correctly. I have around 1,000 markers on the map, but after drawing a freehand shape, the markers within it are not being filtered as expected.

Upon debugging, I retrieved the shape data using:

var shapes = this.drawingManager.getSource().getShapes();

I then passed these shapes to turf.booleanPointInPolygon. However, when inspecting the console output, I noticed that the coordinates of the shapes sometimes exceed valid latitude and longitude ranges (i.e., beyond 90, -90 for latitude and 180, -180 for longitude) sometimes It also exceeds 200 range.

This seems to be the reason why the filtering is failing. It’s quite strange, as I have encountered this issue before but never understood the cause.

Any help or insights would be greatly appreciated!

 

Answer 1

There are two constraining issues here.

• The first is has to do with rendering geometries that cross the 180th meridian. When a geometry does this, it is actually rendered on two separate globes in maps that support "wrap around". To handle this, longitude values that are on the "next globe" will be offset by 360 degrees. Mathematically, these longitude values are still value since two longitude values that are offset by 360 degrees represent the same location when normalized. However, not all libraries support doing calculations like this.
• Turf.js does spatial calculations based on GeoJSON. The GeoJSON specification does not allow geometries to cross the 180th Meridian (https://datatracker.ietf.org/doc/html/rfc7946#section-3.1.9) and requires the geometries to be cut into two. The booleanPointInPolygon function in this case does not support longitude values outside the -180/180 range, however, the turf.pointsWithinPolygon function does handle this.

To resolve your issue you can do one of the following:

• Loop through the coordinates and normalize the longitude value to get it into the -180/180 range. There is a helper method for this in the atlas.math.normalizeLongitude https://learn.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.math?view=azure-maps-typescript-latest#azure-maps-control-atlas-math-normalizelongitude
• You can split the polygon ring into two along the 180th meridian and create a multipolygon. The atlas.math.getPathSplitByAntimeridian function can help with this. https://learn.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.math?view=azure-maps-typescript-latest#azure-maps-control-atlas-math-getpathsplitbyantimeridian
• You can use the turf.pointsWithinPolygon function instead. This would likely be the easiest. Here is a full code sample for this: https://samples.azuremaps.com/?search=draw&sample=select-data-in-drawn-polygon-area