Duplicate text label placement with vector tiles

[nitro89]

Hello, I want to place a single text label in each polygon while using vector tiles.
Instead I get duplicate labels when I zoom to a polygon and it is being divided by different tiles.

A screenshot of the problem:

My code:

`
<script>
var simple = {
"version": 8,
"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
"sources": {
"gushim": {
"scheme":"tms",
"type": "vector",
"tiles": ['http://localhost:8080/geoserver/gwc/service/tms/1.0.0/' + 'mytest:gushim_3857' +'@epsg%3A'+'900913'+'@pbf/{z}/{x}/{y}.pbf']
},
"parcel": {
"scheme":"tms",
"type": "vector",
"tiles": ['http://localhost:8080/geoserver/gwc/service/tms/1.0.0/' + 'mytest:parcels_all_3857' +'@epsg%3A'+'900913'+'@pbf/{z}/{x}/{y}.pbf']
}
},
"layers": [
{
"id": "background",
"type": "background",
"paint": {
"background-color": "rgb(230, 230, 230)"
}
},
{
"id": "gushim_3857",
"type": "fill",
"source": "gushim",
"source-layer": "gushim_3857",
"filter": ["==", "$type", "Polygon"],
"paint": {
"fill-outline-color": "#3887be",
"fill-color": "rgba(0, 0, 255, 0.2)"
}
}
]};

	var map = new mapboxgl.Map({
	container: 'map',
	center: [34.932997,31.415440],
	zoom: 11,
	style: simple
	});
	
	map.on('load', function () {

		var layers = map.getStyle().layers;
		// Find the index of the first symbol layer in the map style
		var firstSymbolId;
		for (var i = 0; i < layers.length; i++) {
			if (layers[i].type === 'symbol') {
				firstSymbolId = layers[i].id;
				break;
			}
		}
		
		map.addLayer({
			"interactive": true,
			"id": "gushim_3857_labels",
			"type": "symbol",
			"source": "gushim",
			"source-layer": "gushim_3857",
			"layout": {
				"text-field": "{gush_num}",
				"text-anchor": "top",
				"text-offset": [0,0.5],
				"symbol-placement": "point",
				"text-justify": "center"
			},
			"paint": {
            "text-color": "#666",
            "text-halo-color": "rgba(255,255,255,0.95)",
            "text-halo-width": 1.5,
            "text-halo-blur": 1
			}
		});				
	});	
</script>

`

Thanks.

[mollymerp]

Hi @nitro89! Thank you for using GL JS. I believe this issue is a duplicate of #5583, so I'm going to close this issue in favor of consolidating discussion on that ticket. There is more context on why this behaviour is happening #5583 (comment)

A workaround would be creating a separate source_layer with Point features at the exact place you want the labels to appear, and using that as the source for your symbol layer.

[nitro89]

@mollymerp Thanks for the info!