How to remove row Basemap in Imagery Layer Manipulation Example?

i’m trying to remove Row basemap and this is result image
How to remove all row?
link example : Cesium Sandcastle

upppp

Hiya,

You’ve shared the original example code, not the code where you’re removing the base layer. You need to share that code with us, otherwise we can’t help you. I suspect you’re having basic JS issues, not Cesium API issues, but won’t know until you can share some more info and code.

Cheers,

Alex

1 Like
var viewer = new Cesium.Viewer("cesiumContainer", {
  baseLayerPicker: false,
});
var imageryLayers = viewer.imageryLayers;

var viewModel = {
  layers: [],
  baseLayers: [],
  upLayer: null,
  downLayer: null,
  selectedLayer: null,
  isSelectableLayer: function (layer) {
    return this.baseLayers.indexOf(layer) >= 0;
  },
  raise: function (layer, index) {
    imageryLayers.raise(layer);
    viewModel.upLayer = layer;
    viewModel.downLayer = viewModel.layers[Math.max(0, index - 1)];
    updateLayerList();
    window.setTimeout(function () {
      viewModel.upLayer = viewModel.downLayer = null;
    }, 10);
  },
  lower: function (layer, index) {
    imageryLayers.lower(layer);
    viewModel.upLayer =
      viewModel.layers[
        Math.min(viewModel.layers.length - 1, index + 1)
      ];
    viewModel.downLayer = layer;
    updateLayerList();
    window.setTimeout(function () {
      viewModel.upLayer = viewModel.downLayer = null;
    }, 10);
  },
  canRaise: function (layerIndex) {
    return layerIndex > 0;
  },
  canLower: function (layerIndex) {
    return layerIndex >= 0 && layerIndex < imageryLayers.length - 1;
  },
};
var baseLayers = viewModel.baseLayers;

Cesium.knockout.track(viewModel);

function setupLayers() {
  // Create all the base layers that this example will support.
  // These base layers aren't really special.  It's possible to have multiple of them
  // enabled at once, just like the other layers, but it doesn't make much sense because
  // all of these layers cover the entire globe and are opaque.
// Create the additional layers
  addAdditionalLayerOption(
    "United States GOES Infrared",
    new Cesium.WebMapServiceImageryProvider({
      url:
        "https://mesonet.agron.iastate.edu/cgi-bin/wms/goes/conus_ir.cgi?",
      layers: "goes_conus_ir",
      credit: "Infrared data courtesy Iowa Environmental Mesonet",
      parameters: {
        transparent: "true",
        format: "image/png",
      },
    })
  );
  addAdditionalLayerOption(
    "United States Weather Radar",
    new Cesium.WebMapServiceImageryProvider({
      url:
        "https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi?",
      layers: "nexrad-n0r",
      credit: "Radar data courtesy Iowa Environmental Mesonet",
      parameters: {
        transparent: "true",
        format: "image/png",
      },
    })
  );
  addAdditionalLayerOption(
    "TileMapService Image",
    new Cesium.TileMapServiceImageryProvider({
      url: "../images/cesium_maptiler/Cesium_Logo_Color",
    }),
    0.2
  );
  addAdditionalLayerOption(
    "Single Image",
    new Cesium.SingleTileImageryProvider({
      url: "../images/Cesium_Logo_overlay.png",
      rectangle: Cesium.Rectangle.fromDegrees(
        -115.0,
        38.0,
        -107,
        39.75
      ),
    }),
    1.0
  );
  addAdditionalLayerOption(
    "Grid",
    new Cesium.GridImageryProvider(),
    1.0,
    false
  );
  addAdditionalLayerOption(
    "Tile Coordinates",
    new Cesium.TileCoordinatesImageryProvider(),
    1.0,
    false
  );
}

function addBaseLayerOption(name, imageryProvider) {
  var layer;
  if (typeof imageryProvider === "undefined") {
    layer = imageryLayers.get(0);
    viewModel.selectedLayer = layer;
  } else {
    layer = new Cesium.ImageryLayer(imageryProvider);
  }

  layer.name = name;
  baseLayers.push(layer);
}

function addAdditionalLayerOption(name, imageryProvider, alpha, show) {
  var layer = imageryLayers.addImageryProvider(imageryProvider);
  layer.alpha = Cesium.defaultValue(alpha, 0.5);
  layer.show = Cesium.defaultValue(show, true);
  layer.name = name;
  Cesium.knockout.track(layer, ["alpha", "show", "name"]);
}

function updateLayerList() {
  var numLayers = imageryLayers.length;
  viewModel.layers.splice(0, viewModel.layers.length);
  for (var i = numLayers - 1; i >= 0; --i) {
    viewModel.layers.push(imageryLayers.get(i));
  }
}

setupLayers();
updateLayerList();

//Bind the viewModel to the DOM elements of the UI that call for it.
var toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);

Cesium.knockout
  .getObservable(viewModel, "selectedLayer")
  .subscribe(function (baseLayer) {
    // Handle changes to the drop-down base layer selector.
    var activeLayerIndex = 0;
    var numLayers = viewModel.layers.length;
    for (var i = 0; i < numLayers; ++i) {
      if (viewModel.isSelectableLayer(viewModel.layers[i])) {
        activeLayerIndex = i;
        break;
      }
    }
    var activeLayer = viewModel.layers[activeLayerIndex];
    var show = activeLayer.show;
    var alpha = activeLayer.alpha;
    imageryLayers.remove(activeLayer, false);
    imageryLayers.add(baseLayer, numLayers - activeLayerIndex - 1);
    baseLayer.show = show;
    baseLayer.alpha = alpha;
    updateLayerList();
  });``` 
this is my code after removed some line from example code , can not remove all row Basemap

image

Sorry, I don’t understand what code you’ve removed and what you’ve added. There’s no additional code in the example you give above where you’re removing the base layer specifically, so I’m not sure if you’re issue is with the plain JS part, the Knockout parts, or the Cesium API.

From the latter, the .remove(layer) does work as I use it all the time, so maybe you’re trying to do something with the Knockout model? If you can cut it down to an explanation of what you’re actually changing, that would help a lot.

To be even clearer, copy the original Sandcastle, modify it with a button or something on the layer you want to remove (like a big X at the end of each line), then hook that into a function that’s called something like DeleteLayer(layer), and do it that way. Otherwise I’m just guessing away here.

Cheers,

Alex

1 Like

actually i turn on basemap picker widget and use [Imagery Layer Manipulation] so it has 2 location to choose basemap, now i want hide basemap option in table [Imagery Layer Manipulation]

i try to put


let remove = imageryLayers._layers.pop();

under
var imageryLayers = viewer.imageryLayers;
this is result image , basemap selected row was deleted
but basemap disable :((

Ok, I’m now very confused;

basemap selected row was deleted
but basemap disable :((

If you delete the basemap, of course it’s gone. So are you saying that you want the basemap to be there, but hide the basemap line only? The example code isn’t the best for doing this kinda thing, but do you mean something like this?

Cheers,

Alex

1 Like

oh, thank you very much, problem solved :heart_eyes:

I have one more question, if the baselayer position is not at the end but in the middle , can it be hidden? or by default the baselayer return value is always at the end?

Is there a way to not let the baselayer value pass to the table? because if I use F12, I still see a baselayer row with display: none . thank you very muchh

What’s the problem of seeing it in the source code but hidden?

Alex

^^ No problem, but i just want to know how the baselayer value is not pass to the table? thank you very muchhhhhhhhhhhh

Like I said, the code from the Sandcastle and how it was built from the ground up is not suited for your purpose, the the right answer would be to add the baselayer (or just use defaults) outside the Knockout context, you can then always guarantee that it’s in index [0], and your list of extra layers is anything > 0 (and build Knockout rules from that). The even better answer is to start from scratch, and add in increments only what you’re after.

But a lot of this comes back to what you’re doing, how and why. If it’s a stand-alone application, it wouldn’t be using Sandcastle code, and if you’re making Sandcastle examples for sharing, the code is not designed well for the example. But if you’re just playing with a Sandcastle then the answers is the above (and the code shared).

JavaScript, HTML and Knockout itself is kinda out of scope of the forum (unless there are code issues with the Sandcastle examples, I guess), but if you tell us what you’re trying to do and for what purpose we can try to send you in the right direction?

Cheers,

Alex

1 Like

actually your code shared correct with my idea, i’m trying to turn on basemappicker so i want remove Baselayer row, your code solved my problem, but it just hide the baselayer row, now i want remove the baselayer row, thank you for your support