CODEWITHSUNDEEP
cesiumjs
user2201698
user2201698

Reputation: 11

Cesium PinBuilder using "fromMakiIconId"

I started using cesium for representing 3d maps and was trying to add Point of Interest data on top of this 3d view. I tried local png icons and it worked. I also realized can add icons from built in assets. I tried the below code and it worked perfect. I have a various set of PoIs but could not find the labels using which I can add them onto the map.

Image from PinBuilder documentation

For example to add a hospital i referred hospital in the iconid.

var hospitalPin = Cesium.when(
  pinBuilder.fromMakiIconId("hospital", Cesium.Color.RED, 48),
  function (canvas) {
    return viewer.entities.add({
      name: "Hospital",
      position: Cesium.Cartesian3.fromDegrees(77.311, 32.826),
      billboard: {
        image: canvas.toDataURL(),
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      },
    });
  }
);

In the similar way is there any reference for the icon Ids which I can use to make use of them in my code to represent the PoIs. Any help is appreciated.

I found the source images located at \Build\Cesium\Assets\Textures\maki from the cesium library which I think can be used.

Upvotes: 1

Views: 891

Answers (1)

emackey
emackey

Reputation: 12448

The image you posted is from the PinBuilder docs, but check out the original source for that: It's a screenshot of the Cesium Sandcastle GeoJson Demo.

As you noticed, the images of the individual pins are stored in a folder called maki which has names like this:

airport.png
alcohol-shop.png
america-football.png
art-gallery.png
bakery.png
bank.png
bar.png
baseball.png
...

Just strip the .png off the end of the image filename, and that's it. That's the ID.

The dashes are allowed in the ID:

pinBuilder.fromMakiIconId("america-football", Cesium.Color.RED, 48)

But, the first few pins in the original screenshot don't have corresponding Maki icons, they're simple letters or numbers. You can build pins using text, using a different function, like this:

pinBuilder.fromText("A", Cesium.Color.RED, 48)

You may also use pins with Unicode characters on them.

pinBuilder.fromText("\u267b", Cesium.Color.RED, 48)

And finally, if you have a custom PNG file of your own, similar to a Maki icon but customized for your app's need, you may build a pin directly from the URL of the custom PNG file.

pinBuilder.fromUrl(url, Cesium.Color.RED, 48)

Upvotes: 0

Related Questions