nssang00
commented
2 days ago Currently, the WebGL-based layer does not support text-related symbols. If you want to express text, you need to add a canvas-based layer.
new WebGLPointsLayer({
source: vectorSourceWebGl,
style: {
'circle-radius': 10,
'circle-fill-color': '#c44231',
'circle-displacement': [0, 0],
'circle-opacity': 0.95,
// 'circle-declutter-mode': 'declutter',
},
}),
new VectorLayer({
source: vectorSourceWebGl,
style: {
'text-value': ['get', 'NAME'],
'text-font': '12px Arial',
'text-size': 1.2,
'text-offset': [0, -10],
'text-color': 'black',
'text-opacity': 1.0,
},
}),
0
I am building a webgl layer using WebGLPointsLayer. I want to add label on each data point. I have used FlatStyle and FlatText to build the style, because we want to apply filter to filter data based on user action.
Below are the example where I have added webGl layer with label. Data point are visible but label are not visible on map.
` const vectorSourceWebGl = new Vector({ url: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_populated_places.geojson', format: new GeoJSON(), wrapX: true, });
const layer = new WebGLPointsLayer({ source: vectorSourceWebGl, style: { 'circle-radius': 10, 'circle-fill-color': '#c44231', 'circle-displacement': [0, 0], 'circle-opacity': 0.95, // 'circle-declutter-mode': 'declutter', // Not working 'text-value': 'Label Me', // ['get', 'NAME'], // Dynamic Label for each point 'text-font': '12px Arial', // Specify font size and family 'text-size': 1.2, // Scale factor for text size 'text-offset': [0, -10], // Position the text above the circle 'text-color': 'black', // Label color 'text-opacity': 1.0, // Label opacity }, }); `
Here is the example : https://codesandbox.io/p/sandbox/label-on-data-mrvfxh
Can you help to solve this?
Once the label is visible I have to add zoom base label support. For example when user reached zoom level 15 and more only this case want to show labels.