I want to display labels on a map by combining the “JINKO_string” attribute and the “S_NAME” attribute of the following geojson file using MapLibre GL JS. However, in the following source code, the labels are not displayed.
MapLibre GL JS
map.addLayer({
'id': 'jinko_label',
'type': 'symbol',
'source': 'geojson-jinko-point',
'minzoom': 12,
'maxzoom': 15,
'layout': {
'text-field': ["format",
["to-string", ['get', 'JINKO_string']], {},
"人n", {},
['get', 'S_NAME'], {}
],
'text-anchor': 'top',
'text-allow-overlap': true,
'text-size': 12,
'text-offset': [0, -1]
}
});
geojson
{
"type": "FeatureCollection",
"name": "r2ka01-47_point_JGD2011_number_",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "S_NAME": "宮ケ丘(番地)", "JINKO_string": "5" }, "geometry": { "type": "Point", "coordinates": [ 141.308858, 43.0521 ] } },
{ "type": "Feature", "properties": { "S_NAME": "円山", "JINKO_string": "0" }, "geometry": { "type": "Point", "coordinates": [ 141.31413, 43.048525 ] } },
{ "type": "Feature", "properties": { "S_NAME": "円山西町(番地)", "JINKO_string": "0" }, "geometry": { "type": "Point", "coordinates": [ 141.303387, 43.034392 ] } },
{ "type": "Feature", "properties": { "S_NAME": "円山西町(番地)", "JINKO_string": "0" }, "geometry": { "type": "Point", "coordinates": [ 141.300766, 43.046475 ] } },
{ "type": "Feature", "properties": { "S_NAME": "宮の森", "JINKO_string": "0" }, "geometry": { "type": "Point", "coordinates": [ 141.298753, 43.047026 ] } },
{ "type": "Feature", "properties": { "S_NAME": "宮の森", "JINKO_string": "0" }, "geometry": { "type": "Point", "coordinates": [ 141.305065, 43.053913 ] } },
{ "type": "Feature", "properties": { "S_NAME": "字新城", "JINKO_string": "10" }, "geometry": { "type": "Point", "coordinates": [ 123.945188, 24.234269 ] } },
{ "type": "Feature", "properties": { "S_NAME": "字波照間", "JINKO_string": "470" }, "geometry": { "type": "Point", "coordinates": [ 123.782372, 24.058521 ] } },
{ "type": "Feature", "properties": { "S_NAME": "字与那国", "JINKO_string": "1,676" }, "geometry": { "type": "Point", "coordinates": [ 122.988939, 24.455406 ] } }
]
}
In the following source code, labels for the “S_NAME” attribute are displayed. I also want to display labels for the “JINKO_string” attribute.
MapLibre GL JS
map.addLayer({
'id': 'jinko_label',
'type': 'symbol',
'source': 'geojson-jinko-point',
'minzoom': 12,
'maxzoom': 15,
'layout': {
'text-field': ['get', 'S_NAME'],
'text-anchor': 'top',
'text-allow-overlap': true,
'text-size': 12,
'text-offset': [0, -1]
}
});