I have transparency issue on a layer in Azure Maps

Question

Hi,

We are experiencing an issue with a polygon layer in Azure Maps as you can see in picture below. It changes transparency in different areas while zooming by it's self.

Br.

Andreas Fransman

Answer 1

Ok, I found two issues.

1. The first issue is that you are adding a linestring with the same coordinates as the polygon to the data source. That linestring is being rendered in the Polygon layer and thus adding additional artifacts. I thought the polygon layer would only render polygons but checking older versions, that is not the case. Note that other layers render multiple shapes as well (e.g. a line layer can render the outline of a polygon). This is causing the main rendering issue. So you have two options to resolve this; a. Set a filter property on the polygon layer to only render polygons and add a linelayer with a filter to only render lines. b. Use different data sources for the different types of shapes, and their respective layer types. c. Don't add the linestring, use a line layer to render the polygon's outline (best solution).
2. The second issues is that the coordinates are ordered in a clockwise order, however the GeoJSON specification states that the external ring of polygons should be ordered counterclockwise, inner rings clockwise (known as the right-hand rule). This is a fairly common standard with many geospatial systems. Reversing the order of the coordinates resolves would make the polygon valid. That said, this is not the cause of your rendering issue as the map is generally forgiving with this. It can cause rendering issues in some cases, usually when working with large area polygons, but for the most part shouldn't be a concern unless you plan on exporting the polygon and using it in another spatial tool that might be less forgiving.

Here is a code block that shows how to do this:

let dataSource = new atlas.source.DataSource();

var coordinates = [
	[
		20.150559543070784,
		63.822503470423044
	],
	[
		20.16520942843664,
		63.821801902645575
	],
	[
		20.15687248709409,
		63.82024988759676
	],
	[
		20.152776302040337,
		63.81978214026421
	],
	[
		20.14448755110996,
		63.82027114865451
	],
	[
		20.142511744202864,
		63.8234813842283
	],
	[
		20.14810183203886,
		63.82486316106622
	],
	[
		20.155137632247914,
		63.8237152281512
	],
	[
		20.14622240595611,
		63.822737322465514
	],
	[
		20.14810183203886,
		63.82127040027089
	],
	[
		20.153595539050485,
		63.82120661931219
	],
	[
		20.150559543070784,
		63.822503470423044
	]
];

//Optional. Reverse coordinates to make them counterclockwise ordered.
coordinates = coordinates.reverse();

map.sources.add(dataSource);
dataSource.add(new atlas.data.Feature(new atlas.data.Polygon(coordinates)));

let poylgonLayer = new atlas.layer.PolygonLayer(dataSource, "SDFEKK2351UTn349", {
	fillColor: "#00ce00",
	fillOpacity: 0.5
});

let lineLayer = new atlas.layer.LineLayer(dataSource, null, {
	strokeColor: "red",
	strokeWidth: 5
});


map.layers.add([poylgonLayer, lineLayer]);