I want to add icon to a cesium map intead drawing a point. Currently I doing the below code, but want to replace the point below with an actual icon. I have been looking through the cesium documentation and cannot find anything that will do this. Thanks for any suggestions

var points = scene.primitives.add(new Cesium.PointPrimitiveCollection());

points.add({
    position : new Cesium.Cartesian3.fromDegrees(longitude, latitude),
    color : colorDot,
    outlineColor : Cesium.Color.WHITE,
    outlineWidth : width
});

I want to add icon to a cesium map intead drawing a point. Currently I doing the below code, but want to replace the point below with an actual icon. I have been looking through the cesium documentation and cannot find anything that will do this. Thanks for any suggestions

var points = scene.primitives.add(new Cesium.PointPrimitiveCollection());

points.add({
    position : new Cesium.Cartesian3.fromDegrees(longitude, latitude),
    color : colorDot,
    outlineColor : Cesium.Color.WHITE,
    outlineWidth : width
});

• javascript
• html
• cesiumjs

2 Answers 2

In Cesium, this is called a billboard. They are created in basically the same way as a point, except the image is generally loaded from a URL.

https://cesiumjs/Cesium/Build/Documentation/BillboardCollection.html

// Create a billboard collection with two billboards
var billboards = scene.primitives.add(new Cesium.BillboardCollection());
billboards.add({
  position : new Cesium.Cartesian3(1.0, 2.0, 3.0),
  image : 'url/to/image'
});
billboards.add({
  position : new Cesium.Cartesian3(4.0, 5.0, 6.0),
  image : 'url/to/another/image'
});

Adding to @paraquat's correct answer about Billboards: Cesium includes a "Pin Builder" that can be used to make typical map icons as billboards. Here's a demo.

var viewer = new Cesium.Viewer('cesiumContainer');

var pinBuilder = new Cesium.PinBuilder();

var url = Cesium.buildModuleUrl('Assets/Textures/maki/grocery.png');
var groceryPin = Cesium.when(pinBuilder.fromUrl(url, Cesium.Color.GREEN, 48), function(canvas) {
    return viewer.entities.add({
        name : 'Grocery store',
        position : Cesium.Cartesian3.fromDegrees(-75.1705217, 39.921786),
        billboard : {
            image : canvas.toDataURL(),
            verticalOrigin : Cesium.VerticalOrigin.BOTTOM
        }
    });
});