How to remove individual KML DataSources ?

2,461 views
Skip to first unread message

Ramzi

unread,
Mar 6, 2015, 9:16:51 PM3/6/15
to cesiu...@googlegroups.com

Please I need help . I tried a simple example to load 2 KML DataSources. When I try to remove a single KML DataSource, the DataSource's features still visible in the viewer.  Is there any way to Hide/Show one DataSource's features without removing the second?
 Here is my code :

var Layer1 = Cesium.KmlDataSource.load('../../SampleData/Bus_Stop.kml');
var Layer2= Cesium.KmlDataSource.load('../../SampleData/Car_Parking.kml');

            //////Add layers///
Sandcastle.addToolbarButton('add Layer1 ', function() {
    viewer.dataSources.add(Layer1 );
    });
Sandcastle.addToolbarButton('add Layer2 ', function() {
    viewer.dataSources.add(Layer2 );
});
             //////// Remove layers//
Sandcastle.addToolbarButton('remove Layer1', function() {
    viewer.dataSources.remove(Layer1);
});
Sandcastle.addToolbarButton('remove Layer2', function() {
    viewer.dataSources.remove(Layer2);
});

Matthew Amato

unread,
Mar 6, 2015, 9:35:16 PM3/6/15
to cesiu...@googlegroups.com
Layer1 and Layer 2 are not instances of KmlDataSource, they are Promises to the data source instance once it's down loading.  If you are not familiat with Promises, I recommend reading this article: http://www.html5rocks.com/en/tutorials/es6/promises/ Cesium specifically uses the `when` promise library that is mentioned in the article.

I rewrote your sample code in two ways, first to do what you want using promises, and second to avoid promises and simply create instances of KmlDataSource.  In such a simple example, promises don't get you much (other than letting you know when the data is ready to go). But when you need to wait for the data to be loaded before taking action, promises are really useful.

//This version uses promises

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

var promise1 = Cesium.KmlDataSource.load('../../SampleData/kml/facilities/facilities.kml');
var promise2 = Cesium.KmlDataSource.load('../../SampleData/kml/gdpPerCapita2008.kmz');

Cesium.when(promise1, function(dataSource1){
    Sandcastle.addToolbarButton('Add DataSource 1', function() {
        viewer.dataSources.add(dataSource1);
    });

    Sandcastle.addToolbarButton('Remove DataSource 1', function() {
        viewer.dataSources.remove(dataSource1);
    });
});

Cesium.when(promise2, function(dataSource2){
    Sandcastle.addToolbarButton('Add DataSource 2', function() {
        viewer.dataSources.add(dataSource2);
    });

    Sandcastle.addToolbarButton('Remove DataSource 2', function() {
        viewer.dataSources.remove(dataSource2);
    });
});

//And this version uses new KmlDataSource().  Load still returns a promise in this case, but we just ignore it.

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

var dataSource1 = new Cesium.KmlDataSource();
dataSource1.load('../../SampleData/kml/facilities/facilities.kml');

var dataSource2 = new Cesium.KmlDataSource();
dataSource2.load('../../SampleData/kml/gdpPerCapita2008.kmz');

Sandcastle.addToolbarButton('Add DataSource 1', function() {
    viewer.dataSources.add(dataSource1);
});

Sandcastle.addToolbarButton('Remove DataSource 1', function() {
    viewer.dataSources.remove(dataSource1);
});

Sandcastle.addToolbarButton('Add DataSource 2', function() {
    viewer.dataSources.add(dataSource2);
});

Sandcastle.addToolbarButton('Remove DataSource 2', function() {
    viewer.dataSources.remove(dataSource2);
});



--
You received this message because you are subscribed to the Google Groups "cesium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Ramzi

unread,
Mar 9, 2015, 8:51:15 AM3/9/15
to cesiu...@googlegroups.com
Hi Matthew, 
Thank you very much for your help,I can understand now. It works fine for me and I can keep going in my project. 
I just wanna ask one more thing, can cesium support KML Network Link?
Best regards

Matthew Amato

unread,
Mar 15, 2015, 10:44:21 PM3/15/15
to cesiu...@googlegroups.com
Cesium has basic support for NetworkLink already, but we don't support auto-refreshing or network link updates and regions.  We plan on supporting them in the future.  The server that is hosting the NetworkLink needs to either be the same origin as the app or support cross-origin resource sharing.  If neither of these is true, you can still use them, but you have to go through a proxy.  You might want to check out this post, where I go into some details: https://groups.google.com/d/msg/cesium-dev/xz2xwKogybY/jt8h174rknwJ

--

rohit.chou...@gmail.com

unread,
Mar 15, 2019, 9:24:39 AM3/15/19
to cesium-dev
I have uploaded kml files in cesium ion. Now I am displaying the list of kml asstes in my application using below code.

var kmlfiles = Cesium.IonResource.fromAssetId(assetID)
.then(function (resource) {
return Cesium.KmlDataSource.load(resource, {
camera: viewer.scene.camera,
canvas: viewer.scene.canvas
});
})
.then(function (dataSource) {
return viewer.dataSources.add(dataSource);
});
viewer.zoomTo(kmlfiles );

I want to show/hide kml file on checkbox click. Problem is that I have collection of kml datasources in kmlfiles object and i didn't get the filename or assetid in kmlfiles object, So that i will remove particular kml datasource. Any solution?

Thanks

kmlList.png

john.p...@gmail.com

unread,
Apr 25, 2019, 11:17:02 AM4/25/19
to cesium-dev

Did you ever find a solution to this Rohit? I'd be interested in doing something similar if you got it working.

Omar Shehata

unread,
Apr 28, 2019, 8:14:42 AM4/28/19
to cesium-dev
Is your situation that you have multiple datasources of KML files and you want to toggle each one on/off, or that you're trying to toggle features within one KML data source on/off?

john.p...@gmail.com

unread,
Apr 28, 2019, 10:01:46 AM4/28/19
to cesium-dev
On Sunday, April 28, 2019 at 8:14:42 AM UTC-4, Omar Shehata wrote:
> Is your situation that you have multiple datasources of KML files and you want to toggle each one on/off, or that you're trying to toggle features within one KML data source on/off?
>
> On Thursday, April 25, 2019 at 11:17:02 AM UTC-4, john....@gmail.com wrote:On Friday, March 15, 2019 at 9:24:39 AM UTC-4, rohit.cho...@gmail.com wrote:
> > I have uploaded kml files in cesium ion. Now I am displaying the list of kml asstes in my application using below code.
> >
> > var kmlfiles = Cesium.IonResource.fromAssetId(assetID)
> >                 .then(function (resource) {
> >                   return Cesium.KmlDataSource.load(resource, {
> >                     camera: viewer.scene.camera,
> >                     canvas: viewer.scene.canvas
> >                   });
> >                 })
> >                 .then(function (dataSource) {
> >                   return viewer.dataSources.add(dataSource);
> >                 });
> >               viewer.zoomTo(kmlfiles );
> >
> > I want to show/hide kml file on checkbox click. Problem is that I have collection of kml datasources in kmlfiles object and i didn't get the filename or assetid in kmlfiles object, So that i will remove particular kml datasource. Any solution?
> >
> > Thanks
> Did you ever find a solution to this Rohit? I'd be interested in doing something similar if you got it working.

My situation is that I have multiple datasources that I would like to toggle on and off, using a checkbox or radio button group. (I only need 1 at a time) I've tried using viewer.dataSources.add/remove but that never seems to remove the datasouce and crashes on the second click event, and the datasource.show = true/false doesn't seem to turn the KML icons on/off either.

Omar Shehata

unread,
Apr 29, 2019, 1:47:40 PM4/29/19
to cesium-dev
Removing the dataSources should work, like in this Sandcastle example:


If it's crashing, that is potentially a bug. A community member just stumbled onto something similar here that I've documented here:


Are you able to share a sample of your data that causes this crash along with a Sandcastle example I can run? That'll help us determine if it's a bug and fix it.

john.p...@gmail.com

unread,
Apr 29, 2019, 4:41:32 PM4/29/19
to cesium-dev
On Monday, April 29, 2019 at 1:47:40 PM UTC-4, Omar Shehata wrote:
> Removing the dataSources should work, like in this Sandcastle example:
>
>
> https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/?src=GeoJSON%20and%20TopoJSON.html
>

Omar,

If I used the viewer.resources.removeAll() then it seems to work OK without crashing. When I was trying to remove things individually is when I was running into problems. Fortunately, I only need to have one datasource at a time, so removeAll should work for me, thank you.

ayazta...@gmail.com

unread,
Mar 24, 2020, 1:19:40 PM3/24/20
to cesium-dev
this works great.
now plz tell me how to add or 3d tileset by this method.
To unsubscribe from this group and stop receiving emails from it, send an email to cesiu...@googlegroups.com.

ayazta...@gmail.com

unread,
Mar 24, 2020, 1:21:21 PM3/24/20
to cesium-dev
now plz tell me how to add and remove 3d tileset by this method.
Reply all
Reply to author
Forward
0 new messages