How do I add Drag-and Drop functionality to my Cesium app.

CesiumJS
1

Hello,

I need to add capability to my Cesium app to drag-and-drop images(.png, .jpg, etc) onto it. Then, when the drop happens, I need to create a billboard with that image.

At first, I thought that the way to do it is to use Cesium.viewerDragDropMixin.

However it doesn't seem to have a way to specify function that is called when drop happens. I looked at the code for the Cesium.viewerDragDropMixinand saw a function handleDrop there which is specific to Czml.

When I tried to write my own mixin, using Cesium.viewerDragDropMixin as an example, Cesium crashed with message "Uncaught DeveloperError: mixin is required.".

So the questions I have are:

1. what is a proper way to implement Drag-andDrop
2. if I can use Cesium.viewerDragDropMixin, how do I specify function to process the drop?
3. If the proper way is to implement my own mixin, is there any tutorial on how to do it?

Thank you in advance,

Greg

2

Hello Greg,

Looking at the viewerDragDropMixin is a good place to start. This handles dropping DataSources such as CZML adn GeoJSON, but you should be able to modify it to read pictures.

You will have to modify the createOnLoadCallback function. That’s the function that handles the file once it has been loaded in.

The error you are seeing is being thrown in Viewer.extend. Your mixin is undefined.

Let me know if you have any more specific questions, I’m happy to help =)

-Hannah

3

Hello Hannah and Greg,

I have similar issue. I need to modify the createOnLoadCallback function in order to handle geojson data before appearing (e.g. set the custom color and extrude polygons).
I'm a newbie in javascript so if one of you could explain to me what exactly should I do? To override the function in code or modify it in source code, make the modified copy and include it in the html script tag,...?
I am thankful and open to suggestions.

Best regards,
Paula

4

sábado, 5 de Dezembro de 2015 às 03:01:26 UTC, grego...@gmail.com escreveu:

Hello,

I need to add capability to my Cesium app to drag-and-drop images(.png, .jpg, etc) onto it. Then, when the drop happens, I need to create a billboard with that image.

At first, I thought that the way to do it is to use Cesium.viewerDragDropMixin.

However it doesn't seem to have a way to specify function that is called when drop happens. I looked at the code for the Cesium.viewerDragDropMixinand saw a function handleDrop there which is specific to Czml.

When I tried to write my own mixin, using Cesium.viewerDragDropMixin as an example, Cesium crashed with message "Uncaught DeveloperError: mixin is required.".

So the questions I have are:

1. what is a proper way to implement Drag-andDrop
2. if I can use Cesium.viewerDragDropMixin, how do I specify function to process the drop?
3. If the proper way is to implement my own mixin, is there any tutorial on how to do it?

Thank you in advance,

Greg

Hello Paula,

Can you post some code?

Thanks

5

Hi,

unfortunately I haven't managed to do anything with the issue and no one replied on my question.
Sorry

6

Hi Paula, informatica,

You shouldn’t need to modify the source code. I would start by creating a new class for your specific drag and drop purpose.

You would model your code after viewerDragDropMixin, but customize the createOnLoadCallback function like Hannah suggested.

Thanks,

Gabby

7

This is out of the box functionality in Cesium. Here is a complete example that turns all geojson markers red. You can drag and drop the Apps\SampleData\simplestyles.geojson file included with Cesium to test it yourself. You can modify any other aspect of the entity as well.

Here’s a runnable link (full source also pasted below): https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/#c=ZZHBbsIwDIZfJeqFVqB0O7egTcCNadKQdll3SBsXrIUEJWmBTbz7HAqjsFxi//l+O3FaYVmLsAPLxkzDjk3BYbPh7yctHlSndGq0F6jBDpKs0B3PYe9By/hs6MSZFauZNdsX3KMO7B8thRdL01gq2IufpQTJhZTzFrRfoKOS1LZudOXR6LgySsEpHLGrK/kpNKPV0uXJhh7B0fWvAL+ovBWqAZd1fG0si4MJiX7IaMv//FyBXvk1icNhws4NbpocyHShP/AzuyJYxx3BS1SqNMLKpFchrPtzTi8zYebn8U1Dyt/ms17ZYxfSdkyyaBTlzh8UTDr1CTdbYz1rrIo5Tz1stkp4cGnZVF/geeVcmH+eXky5xJahHBfR3Z8WEauUcI5O6kapJX5DEU3ylPgbmzJCol69tmCVOARk/ThZdCLnPE8p/e/yxqhS2F7FXw

var viewer = new Cesium.Viewer(‘cesiumContainer’);

viewer.extend(Cesium.viewerDragDropMixin);

viewer.dataSources.dataSourceAdded.addEventListener(function(collection, dataSource){

var entities = dataSource.entities.values;

for (var i = 0; i < entities.length; i++) {

var entity = entities[i];

if(entity.billboard){

entity.billboard.color = Cesium.Color.RED;

}

}

});

8

I forgot to mention, you need to drag and drop the sample data I referenced (or any geojson) into the Sandcastle Cesium window to actually run the example.

9

Thanks Matthew Amato,

Same...result is yellow :frowning:

My json file with just 1 simple line:

{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "source": "L_Arruamento", "NAM": "", "WD2": 0.0, "WD1": 0, "Layer": 21, "Linetype": 7, "LTScale": 4, "Color": 11 }, "geometry": { "type": "LineString", "coordinates": [ [ -8.704003919330139, 41.19561876634021, 81.245450466871262 ], [ -8.704162481565888, 41.195717192098321, 81.373479094356298 ], [ -8.704285433532329, 41.195807898068288, 81.628934035077691 ], [ -8.704370753540953, 41.195897064654183, 80.813331823796034 ], [ -8.704544919729331, 41.196108708939086, 78.96543659362942 ], [ -8.704706505500903, 41.196309432566089, 76.735089682042599 ], [ -8.704881326509584, 41.19673142014323, 76.864153870381415 ], [ -8.705059915848059, 41.197176957206842, 77.579797026701272 ], [ -8.705289448752124, 41.197720019611204, 80.068016353994608 ], [ -8.705510139741076, 41.198247222696466, 81.446973740123212 ], [ -8.705687248045257, 41.198694929355085, 83.973121656104922 ], [ -8.705740890474393, 41.198869586771586, 84.66224304959178 ], [ -8.705746185810618, 41.19896999499575, 84.930364760570228 ], [ -8.705738523108662, 41.199050708914555, 84.943306792527437 ], [ -8.705701035649023, 41.199176440129754, 84.994648282416165 ] ] } }
]
}

code:

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

viewer.dataSources.dataSourceAdded.addEventListener(function(collection, dataSource){
    var entities = dataSource.entities.values;
    for (var i = 0; i < entities.length; i++) {
        var entity = entities[i];
        console.log(entity.billboard);
        if(entity.billboard){
            entity.billboard.color = Cesium.Color.RED;
        }
    }
});

console:
undefined

:frowning:

10

Not every entity will be a billboard, and if it’s not entity.billboard will be undefined. For example, in your case, the expected entity would be a polyline.

if (Cesium.defined(entity.billboard)) {
// billboard specific styling code
} else if (Cesium.defined(entity.polyline)) {
// polyline specific styling code
}

``

11

Thanks Gabby Getz,

Yes, indeed. It works. So, how can I detect on a billboard entity, if it is on (ex.point) or other (ex.polyline) from Drag-and Drop functionality???

Thanks

12

Posted response in https://groups.google.com/forum/#!topic/cesium-dev/diqduEs6NMI