mapbox
`text-offset` data-driven cause a warning when click ?
mapbox-gl-js version: 3.2.0
Question
i got a warning when i click a label use text-offset data-driven:
Expected value to be of type array<number, 2>, but found string instead.
i couldn't fix it and console the target feature, find that the properties.offset was converted to a string
so is that what caused the warning? and why?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// mapboxgl.accessToken = '<KEY>';
const map = new mapboxgl.Map({
container: 'map',
center: [-77.4144, 25.0759],
zoom: 15,
style: 'mapbox://styles/mapbox/streets-v12',
});
map.on('load', () => {
map.addSource('point', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
properties: {
text: 'Hello, world!',
offset: [1, -1],
},
'geometry': {
'type': 'Point',
'coordinates': [-77.4144, 25.0759]
}
}
]
}
});
map.addLayer({
id: 'point',
type: 'symbol',
source: 'point',
layout: {
"text-field": "{text}",
"text-size": 16,
"text-offset": ['get', 'offset'],
}
})
map.on('click', 'point', function (e) {
console.log(e.features[0].properties); // offset was converted to "[1,-1]"
})
})
</script>
</body>
</html>
Links to related documentation
may be you can try the key words "literal" in expressionshttps://docs.mapbox.com/style-spec/reference/expressions#types-literal
may be you can try the key words "literal" in expressionshttps://docs.mapbox.com/style-spec/reference/expressions#types-literal
"literal" treats ['get', 'offset'] as literal array rather than data expression
Hi @liuben-team,
GL JS doesn't support arrays in the feature properties (they're converted to strings internally). You could try splitting the offset into two properties. I'm closing the issue, but please let me know if you have any questions.
