Custom BaseLayerPicker

CesiumJS
1

I’m wanting a custom Imagery and Terrain Menu. I’ve found this thread . . .

. . . I have gotten to the point where I see my icon with my custom menu item, which is great but it does not line up with the other icons. If I use the baseLayerPicker = false, the default icon goes away and that’s what I want but how to I fit my custom icon into position?

image

When using baseLayerPicker = false . . .

image

My html file . . .
image

which came from the documentation example . . .

image
image749×137 8.7 KB

Also:
I’m also willing to ditch this and alter the createDefaultImageryProviderViewModels.js file. I’m using Cesium-1.119 and in the path . . . “packages\widgets\Source\BaseLayerPicker” I have removed items but when restarting the node server the changes do not show up.

image
image728×805 19.7 KB

You can see that I removed all but 2 of the imagery providers from the list.

2

Hi @tzgardner,

Is the goal here to adjust the list of imagery and terrain providers displayed? Or to customize the look and feel of the widget?

If the former, you can modify the list of providers when creating the viewer:

const viewer = new Cesium.Viewer("cesiumContainer", {
  imageryProviderViewModels: [
    new Cesium.ProviderViewModel({
      name: "Earth at night",
      iconUrl: Cesium.buildModuleUrl(
        "Widgets/Images/ImageryProviders/earthAtNight.png"
      ),
      tooltip:
        "The Earth at night, also known as The Black Marble, is a 500 meter resolution global composite imagery layer released by NASA.",
      category: "Cesium ion",
      creationFunction: function () {
        return Cesium.IonImageryProvider.fromAssetId(3812);
      },
    })
  ]
});
3

I want to adjust the list of imagery and terrain providers displayed. I only need 2 or 3 of the imagery options instead of the 15 or so that it shows.

Yes, the code you provided is similar to the code I used to limit the imagery items on the menu. That part I got working. I guess my issue is how to align the newly created ProviderViewModel icon with the other icons as in my screenshot at the top?

4

@tzgardner I’m not sure I understand the goal. What’s the intended purpose of the icon are you trying to align?

If you use the code I added above, there should be no need to align the icon overtop. The icon of the currently selected imagery should be displayed.

5

Excellent, your example worked! That’s exactly what I was trying to accomplish. I see that the difference was that you had created your Cesium.ProviderViewModel inside the viewer constructor.

I was creating it outside the viewer and using the push function to add it to the viewer which created a 2nd icon as in the screenshot above.

1 Like