Labeling polylines from GeoJSON

CesiumJS
1

I’m having a bit of trouble trying to add labels to polyline entities loaded from GeoJSON.

The GeoJSON loads just fine and I’m able to display the polylines (LineStrings) by setting entity.polyline.material, but the text labels don’t seem to draw.

Is this a placement issue? i.e., do I need to associate the label(s) with the exact vertex/vertices of the polyline where I want to place the labels, or is Cesium capable of placing them for me?

Maybe I’m just using the wrong approach/syntax?

Sample code (labels do not draw):

Cesium.GeoJsonDataSource.load("/json/geojsontest.json")
.then(function(dataSource) {
viewer.dataSources.add(dataSource);
let entities = dataSource.entities.values;
for (let i=0; i < entities.length; i++) {
let entity = entities[i];
entity.polyline.material = Cesium.Color.RED; // lines get displayed properly with red stroke
entity.label = {
text: entity.properties[“TEMP_C”], // A simple string doesn’t work either
font: “12px Helvetica”,
fillColor: Cesium.Color.WHITE, // tried several colors/styles but no luck
outlineColor: Cesium.Color.BLACK,
outlineWidth: 4,
style: Cesium.LabelStyle.FILL_AND_OUTLINE
};
console.log(entity.label); // prints label object to console as expected
}
});

``

However, labeling a simple point created manually works fine:

viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-70, 42),
label: {
text : “TEST LABEL!”
}
});

``

Screenshot of displayed lines:

2

Hello,

It’s hard for me to tell without seeing your GeoJSON, but I think you need to set the entity.position property. This way the labels know at which position to draw.

Best,

Hannah

3

Hi Hannah,

See below for a subset example of my geojson.

I tried setting entity.position (prior to setting entity.label) in a number of ways, including defining it manually from a lat/lon (as in the working example from my previous post):

entity.position = Cesium.Cartesian3.fromDegrees(-70, 42);

``

but it just produces an error/stack trace.

RangeError: Invalid array length

``

Are there any examples of labeling a polyline entity?

Do I need to construct my labels manually as separate individual point entities instead?

Thanks

Jason

{
“type”: “FeatureCollection”,
“features”: [
{ “type”: “Feature”, “properties”: { “ID”: 0, “TEMP_C”: -15.0 }, “geometry”: { “type”: “LineString”, “coordinates”: [ [ 324.75, 85.458336724313341 ], [ 325.0, 85.468753337911053 ], [ 325.25, 85.468753337911053 ], [ 325.5, 85.468753337911053 ], [ 325.75, 85.458336724313341 ], [ 326.0, 85.458336724313341 ], [ 326.25, 85.458336724313341 ], [ 326.5, 85.458336724313341 ], [ 326.75, 85.458336724313341 ], [ 327.0, 85.458336724313341 ], [ 327.25, 85.458336724313341 ], [ 327.37497711321328, 85.5 ], [ 327.25, 85.541663275686659 ], [ 327.0, 85.541663275686659 ], [ 326.75, 85.541663275686659 ], [ 326.5, 85.562488556606624 ], [ 326.25, 85.562488556606624 ], [ 326.0, 85.562488556606624 ], [ 325.75, 85.562488556606624 ], [ 325.5, 85.624977113213248 ], [ 325.25, 85.624977113213248 ], [ 325.12497711321328, 85.75 ], [ 325.0, 85.763887287647066 ], [ 324.75, 85.765623331044466 ], [ 324.5, 85.791666949238746 ], [ 324.25, 85.79687392714095 ], [ 324.0, 85.79687392714095 ], [ 323.75, 85.767854651669708 ], [ 323.5, 85.77083057830221 ], [ 323.37502288678672, 85.75 ], [ 323.5, 85.625022886786752 ], [ 323.75, 85.625022886786752 ], [ 324.0, 85.625007628928913 ], [ 324.25, 85.562511443393376 ], [ 324.5, 85.562511443393376 ], [ 324.62502288678678, 85.5 ], [ 324.75, 85.458336724313341 ] ] } },
{ “type”: “Feature”, “properties”: { “ID”: 1, “TEMP_C”: -5.0 }, “geometry”: { “type”: “LineString”, “coordinates”: [ [ 70.25, 85.437511443393376 ], [ 70.5, 85.437511443393376 ], [ 70.75, 85.437511443393376 ], [ 71.0, 85.437511443393376 ], [ 71.25, 85.437511443393376 ], [ 71.5, 85.437511443393376 ], [ 71.75, 85.437511443393376 ], [ 72.0, 85.437511443393376 ], [ 72.25, 85.375022886786752 ], [ 72.374977113213248, 85.5 ], [ 72.25, 85.531246662088947 ], [ 72.0, 85.531246662088947 ], [ 71.75, 85.531246662088947 ], [ 71.5, 85.531246662088947 ], [ 71.25, 85.531246662088947 ], [ 71.0, 85.531246662088947 ], [ 70.75, 85.531246662088947 ], [ 70.5, 85.531246662088947 ], [ 70.25, 85.524996948242176 ], [ 70.125022886786752, 85.5 ], [ 70.25, 85.437511443393376 ] ] } },
{ “type”: “Feature”, “properties”: { “ID”: 2, “TEMP_C”: -20.0 }, “geometry”: { “type”: “LineString”, “coordinates”: [ [ 295.5, 85.238636962643398 ], [ 295.4375028610666, 85.25 ], [ 295.5, 85.312497138933423 ], [ 295.75, 85.375001271552833 ], [ 296.0, 85.312497138933423 ], [ 296.12500381504663, 85.25 ], [ 296.0, 85.236111864636655 ], [ 295.75, 85.212499237060541 ], [ 295.5, 85.238636962643398 ] ] } }
]
}

``

4

Hello,

I couldn’t reproduce that error. Here is a code example with your sample GeoJSON that works for me:

var viewer = new Cesium.Viewer(‘cesiumContainer’);
var geo = {
“type”: “FeatureCollection”,
“features”: [
{ “type”: “Feature”, “properties”: { “ID”: 0, “TEMP_C”: -15.0 }, “geometry”: { “type”: “LineString”, “coordinates”: [ [ 324.75, 85.458336724313341 ], [ 325.0, 85.468753337911053 ], [ 325.25, 85.468753337911053 ], [ 325.5, 85.468753337911053 ], [ 325.75, 85.458336724313341 ], [ 326.0, 85.458336724313341 ], [ 326.25, 85.458336724313341 ], [ 326.5, 85.458336724313341 ], [ 326.75, 85.458336724313341 ], [ 327.0, 85.458336724313341 ], [ 327.25, 85.458336724313341 ], [ 327.37497711321328, 85.5 ], [ 327.25, 85.541663275686659 ], [ 327.0, 85.541663275686659 ], [ 326.75, 85.541663275686659 ], [ 326.5, 85.562488556606624 ], [ 326.25, 85.562488556606624 ], [ 326.0, 85.562488556606624 ], [ 325.75, 85.562488556606624 ], [ 325.5, 85.624977113213248 ], [ 325.25, 85.624977113213248 ], [ 325.12497711321328, 85.75 ], [ 325.0, 85.763887287647066 ], [ 324.75, 85.765623331044466 ], [ 324.5, 85.791666949238746 ], [ 324.25, 85.79687392714095 ], [ 324.0, 85.79687392714095 ], [ 323.75, 85.767854651669708 ], [ 323.5, 85.77083057830221 ], [ 323.37502288678672, 85.75 ], [ 323.5, 85.625022886786752 ], [ 323.75, 85.625022886786752 ], [ 324.0, 85.625007628928913 ], [ 324.25, 85.562511443393376 ], [ 324.5, 85.562511443393376 ], [ 324.62502288678678, 85.5 ], [ 324.75, 85.458336724313341 ] ] } },
{ “type”: “Feature”, “properties”: { “ID”: 1, “TEMP_C”: -5.0 }, “geometry”: { “type”: “LineString”, “coordinates”: [ [ 70.25, 85.437511443393376 ], [ 70.5, 85.437511443393376 ], [ 70.75, 85.437511443393376 ], [ 71.0, 85.437511443393376 ], [ 71.25, 85.437511443393376 ], [ 71.5, 85.437511443393376 ], [ 71.75, 85.437511443393376 ], [ 72.0, 85.437511443393376 ], [ 72.25, 85.375022886786752 ], [ 72.374977113213248, 85.5 ], [ 72.25, 85.531246662088947 ], [ 72.0, 85.531246662088947 ], [ 71.75, 85.531246662088947 ], [ 71.5, 85.531246662088947 ], [ 71.25, 85.531246662088947 ], [ 71.0, 85.531246662088947 ], [ 70.75, 85.531246662088947 ], [ 70.5, 85.531246662088947 ], [ 70.25, 85.524996948242176 ], [ 70.125022886786752, 85.5 ], [ 70.25, 85.437511443393376 ] ] } },
{ “type”: “Feature”, “properties”: { “ID”: 2, “TEMP_C”: -20.0 }, “geometry”: { “type”: “LineString”, “coordinates”: [ [ 295.5, 85.238636962643398 ], [ 295.4375028610666, 85.25 ], [ 295.5, 85.312497138933423 ], [ 295.75, 85.375001271552833 ], [ 296.0, 85.312497138933423 ], [ 296.12500381504663, 85.25 ], [ 296.0, 85.236111864636655 ], [ 295.75, 85.212499237060541 ], [ 295.5, 85.238636962643398 ] ] } }
]
};

var promise = Cesium.GeoJsonDataSource.load(geo);
promise.then(function(dataSource) {
viewer.dataSources.add(dataSource);
var entities = dataSource.entities.values;
for (var i = 0; i < entities.length; i++) {
var entity = entities[i];
var position = entity.polyline.positions.getValue(viewer.clock.currentTime)[0];
entity.position = position;
entity.label = {
text: ‘label’
};
}
});

``

Best,

Hannah