Upload local kml files

CesiumJS
1

Hi

I developed an app witch cesium. currently i using drag and drop feature but i need upload automatically. I will upload local kml files to cesium KmlDataSource. i was tried to create localhost and using it but receive “Access-Control-Allow-Origin” errors.
Is there any way that i upload and display kml ?

2

Hi @mohamad,

Can you please share a code snippet of how you are currently importing your KML data?

This sandcastle demo showcases the basics of using KML data in CesiumJS.

Adding a KML data source is often as simple as:

viewer.dataSources.add(
  Cesium.KmlDataSource.load(
    "../SampleData/kml/gdpPerCapita2008.kmz",
    options
  )
);

Looking forward to learning more about your use case!

Best,
Sam

3

currently i can upload local kml files only with drag and drop with this code:

viewer.extend(Cesium.viewerDragDropMixin, dragDropOptions);

this codes don’t works :
1.

var datasource = Cesium.KmlDataSource.load(file://C:/a.kml,
                                           {
    camera : viewer.scene.camera,
    canvas : viewer.scene.canvas
});

viewer.dataSources.add(datasource);


var datasource = Cesium.KmlDataSource.load(C:/a.kml,
                                           {
    camera : viewer.scene.camera,
    canvas : viewer.scene.canvas
});

viewer.dataSources.add(datasource);
  1. i created a local HTTP server by this way : C:\Python27\python -m SimpleHTTPServer
    but i get “Access-Control-Allow-Origin” error .
var datasource = Cesium.KmlDataSource.load(http://127.0.0.1:8000/a.kml,
                                           {
    camera : viewer.scene.camera,
    canvas : viewer.scene.canvas
});

viewer.dataSources.add(datasource);
4

Hi @mohamad,

Thank you for sharing these updates with me! I took some time to look back on some of my old source code. Something like this has worked for me in the past. Essentially, this code is supposed to ensure that only the data added is kept. You may have to tweak some of the parameters to meet the needs of your use case.

viewer.extend(Cesium.viewerDragDropMixin, {
	clearOnDrop: false,
	flyToOnDrop: false
});

// When the user adds a new data source through drag and drop, remove the last one
viewer.dataSources.dataSourceAdded.addEventListener(function() {
	if (viewer.dataSources.length > 1) {
		for (let i = 0; i < viewer.dataSources.length - 1; i++) {
			viewer.dataSources.remove(viewer.dataSources.get(i));
		}
	}
});

Here is a link to a Sandcastle demo that contains this code:

With your current method, are you able to verify that your primitive collection includes a new element when you drag and drop your KML file?

Best,
Sam

5

i would to upload with button click and browse kml. i currently work with uploadcare server.