Show Cesium landscape in glitch.com --- how to handle with CZML ? ---Newbie asks

CesiumJS
1

1. A concise explanation of the problem you're experiencing.

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

4. The Cesium version you're using, your operating system and browser.

1. My landscape is shown in glitch.com, and I want to add an external CZML file (extracted from GPX), http://my-example/map/example.czml
Questions:
What is the code that shows the external CZML in the landscape (resp. globe) in glitch.com ?
If no external CZML ist allowed, and I upload my CZML to glitch, what is the code that shows the uploaded CZML in the landscape (resp. globe) in glitch.com ?

2. Code requested

3. I want to show a way logged by GPS in this url:
https://scarlet-airboat.glitch.me/

Thx in advance for your hints
Josef

4. The Cesium version you're using, your operating system and browser.

2

It should be possible to load an external CZML or host it on Glitch as well. Can you share the source link to your Glitch app? That way I can take a look and show you an example. (This will allow anyone to see the source but not edit it).

3

Thx in Advance for your help.

4

So there are a lot of CZML examples on Sandcastle that show you how to load it. This one loads it and zooms in on it:

This one loads it from an external URL:

If you try that in your Glitch app though, you’ll get an error:

Access to XMLHttpRequest at ‘https://netzjahre.com/maps/brechersp.czml’ from origin ‘https://overjoyed-rate.glitch.me’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

``

This is because your server that you have the CZML hosted in does not allow cross-origin requests (in this case, the origin Glitch.com is trying to access it). You can either configure your server to allow this, or host the CZML as an asset on Glitch.

If you’re hosting it on Glitch, all you have to do is go on assets/, click on the asset, and copy the link to it. Which should look something like this:

var dataSourcePromise = Cesium.CzmlDataSource.load(‘https://cdn.glitch.com/f9d7243d-6ffe-4806-93a1-8d6b0f9e0fbd%2Fsimple.czml?1547738845135’);

viewer.dataSources.add(dataSourcePromise);

viewer.zoomTo(dataSourcePromise);

``

It looks like you have an error in your CZML document though. If you try it with a valid CZML (like any of the ones in the Sandcastle examples) this will work.

5

The CZML loads fine for me from a Node server.

f9d7243d-6ffe-4806-93a1-8d6b0f9e0fbd_simple.czml.png
f9d7243d-6ffe-4806-93a1-8d6b0f9e0fbd_simple.czml.png705×586 73.9 KB

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

var czmlPromise = Cesium.CzmlDataSource.load(“https://C1201723-00.stk.com:9000/CZML/f9d7243d-6ffe-4806-93a1-8d6b0f9e0fbd_simple.czml”);

viewer.dataSources.add(czmlPromise);

viewer.zoomTo(czmlPromise);

``

Scott

6

That’s a sample CZML I grabbed from Sandcastle. The link to the OP’s CZML is:

https://cdn.glitch.com/05ffe95f-65ca-412d-b9fb-16777588d28b%2Fbrechersp.czml?1547637699540

``

And just in case that link dies one day, here it is embedded in a Sandcastle with the error printed in the console:

7

Omar Shehata and Scott Reynolds,
thank you very much for your support.
No success until now.
In my example I changed the data (old czml was flat 2d, new czml is 3d with height).
The next step I will do ist to check whether the method shown in
https://willgeary.github.io/GPXto3D/#Read-GPX-File
makes a good czml.
Josef

8

Look here what I did. It might be interesting for other Cesium newbies, too.

1--I smoothed my GPX-file (from Logger GP102) in
http://www.gpsvisualizer.com/convert_input?convert_format=gpx

2--I noticed that my CZML was underground or hidden in the wood.
So I had to increase the elevations in my GPX (20 meters,30 meters, and at least 75 meters added.
I did this with help of

3--The "lifted" GPX I made to a CZML file as shown in
https://willgeary.github.io/PyConGhana/
In the generated CZML i changed
"heightReference": "RELATIVE_TO_GROUND"
into
"heightReference": "CLAMP_TO_GROUND"
This change applies to the "leading blue circle" in the map.

4--Then I copied the CZML into
https://glitch.com/edit/#!/2016-09-15-obere-firstalm (shared)
as proposed by O.Shehata --->var czml = .....

5--Now look at
https://2016-09-15-obere-firstalm.glitch.me/
and move the "time pointer" at the bottom.

Please consider that I have poor knowledge in scripting (HTML,PHP,JS,Python). I am much better in copy/paste and in asking other people.
I found Cesium in
https://help.openstreetmap.org/questions/66711/this-dynamic-3d-map-uses-openstreetmap-too-what-tools-can-create-such-a-map

Josef

9

Hello Scott R.,

thank you for your hint. My first map(s) I want to show in glitch.com
Later, I will try it in my private webspace (based on Apache).

Josef

10

Hi Josef,

I looked at your CZML and found a couple of problems. There are "null"s for height

I don’t see any times so you won’t be able to use PathGraphics. Additionally, it is necessary to use a separate entity for each waypoint.

Here’s some of the CZML I put together from your data:

[

{

“id”: “document”,

“name”: “Hike”,

“version”: “1.0”

}, {

“id”: “point 0”,

“name”: “point”,

“position”: {

“cartographicDegrees”: [11.864392, 47.675069, 0]

},

“point”: {

“color”: {

“rgba”: [255, 255, 255, 200]

},

“outlineWidth”: 5,

“outlineColor”: {

“rgba”: [0, 173, 253, 200]

},

“pixelSize”: 10

}

},

{

“id”: “path”,

“position”: {

“cartographicDegrees”: [11.864392, 47.675069, 0]

},

“polyline”: {

“positions”: {

“cartographicDegrees”: [11.864392, 47.675069, 0, 11.863748, 47.675036, 0, 11.863384, 47.675047, 0, 11.863008, 47.675072, 0, 11.86281, 47.674993, 0, 11.862348, 47.675014, 0, 11.860825, 47.676513, 0, 11.860642, 47.676369, 0, 11.860487, 47.676304, 0, 11.86038, 47.6763, 0, 11.860283, 47.676257, 0, 11.860149, 47.676344, 0, 11.860052, 47.676322, 0, 11.859977, 47.676362, 0, 11.859875, 47.676481, 0, 11.859645, 47.676477, 0, 11.859414, 47.676513, 0, 11.859253, 47.676737, 0, 11.85928, 47.676802, 0, 11.858904, 47.676752, 0, 11.858502, 47.676528, 0, 11.85825, 47.676459, 0, 11.858175, 47.676495, 0, 11.858009, 47.676499, 0, 11.857708, 47.676409, 0, 11.857612, 47.676445, 0, 11.857424, 47.676394, 0, 11.856914, 47.675975, 0, 11.85641, 47.675776, 0, 11.856206, 47.675632, 0, 11.855729, 47.675484, 0, 11.855568, 47.675368, 0, 11.855471, 47.675224, 0, 11.855407, 47.674827, 0, 11.855686, 47.674621, 0, 11.855755, 47.674487, 0, 11.855906, 47.674339, 0, 11.85597, 47.674212, 0, 11.856378, 47.673942, 0, 11.856726, 47.673663, 0, 11.856984, 47.673046, 0, 11.857021, 47.672807, 0, 11.857016, 47.672443, 0, 11.856925, 47.672244, 0, 11.856657, 47.671908, 0, 11.856426, 47.671774, 0, 11.856104, 47.67172, 0, 11.856008, 47.671659, 0, 11.856265, 47.671453, 0, 11.856533, 47.671391, 0, 11.856673, 47.671377, 0, 11.85678, 47.671348, 0, 11.856249, 47.671095, 0, 11.85575, 47.670918, 0, 11.855455, 47.670716, 0, 11.855058, 47.670532, 0, 11.85465, 47.670568, 0, 11.854366, 47.670445, 0, 11.854189, 47.670286, 0, 11.853985, 47.670203, 0, 11.853755, 47.670127, 0, 11.853744, 47.669921, 0, 11.85258, 47.669441, 0, 11.852033, 47.668996, 0, 11.851861, 47.668686, 0, 11.851861, 47.668552, 0, 11.851507, 47.668223, 0, 11.851416, 47.668184, 0, 11.851357, 47.668039, 0, 11.851421, 47.667952, 0, 11.8514, 47.667913, 0, 11.851303, 47.668028, 0, 11.851383, 47.668212, 0, 11.851485, 47.668252, 0, 11.851818, 47.668552, 0, 11.851823, 47.668696, 0, 11.851963, 47.668989, 0, 11.852537, 47.669462, 0, 11.85369, 47.669936, 0, 11.853738, 47.670163, 0, 11.853974, 47.670203, 0, 11.853808, 47.670358, 0, 11.855063, 47.671305, 0, 11.855493, 47.671518, 0, 11.856024, 47.671644, 0, 11.856126, 47.671709, 0, 11.856437, 47.671767, 0, 11.856662, 47.671893, 0, 11.856946, 47.672251, 0, 11.857188, 47.672591, 0, 11.857241, 47.673494, 0, 11.857359, 47.673559, 0, 11.858003, 47.673197, 0, 11.858282, 47.673169, 0, 11.858234, 47.673313, 0, 11.858384, 47.673299, 0, 11.858475, 47.673371, 0, 11.858829, 47.673302, 0, 11.858958, 47.673317, 0, 11.858979, 47.673479, 0, 11.859215, 47.673497, 0, 11.859173, 47.673877, 0, 11.859527, 47.673848, 0, 11.86016, 47.673898, 0, 11.860235, 47.673999, 0, 11.860707, 47.673978, 0, 11.861082, 47.674064, 0, 11.861608, 47.674028, 0, 11.861812, 47.674137, 0, 11.861941, 47.674592, 0, 11.862112, 47.674924, 0, 11.862359, 47.674996, 0, 11.862842, 47.674967, 0, 11.863003, 47.675047, 0, 11.863754, 47.675004, 0, 11.864387, 47.67504, 0]

},

“clampToGround”: true,

“width”: 6,

“material”: {

“polylineOutline”: {

“color”: {

“rgba”: [255, 255, 255, 200]

},

“outlineWidth”: 5,

“outlineColor”: {

“rgba”: [0, 173, 253, 200]

}

}

},

“resolution”: 5

}

},

{ “id”: “point 0”, “position”: { “cartographicDegrees”: [11.864392, 47.675069, 30] }, “point”: { “pixelSize”: 3, “heightReference”: “RELATIVE_TO_GROUND” } },

{ "id": "point 115", "position": { "cartographicDegrees": [11.864387, 47.67504, 30] }, "point": { "pixelSize": 3, "heightReference": "RELATIVE_TO_GROUND" } }

]

``

Hope that helps.

Scott

11

Hi Scott,
thank you for your hints.
But I hope I corrected my CZML. Please refer to my longer text of Jan.24 in this Forum.
Josef

12

I downloaded the CZML referenced in step 4 of your 24 Jan post and it contains the problems I wrote about. Is there another file somewhere? The URL to the file is https://cdn.glitch.com/05ffe95f-65ca-412d-b9fb-16777588d28b%2Fbrechersp.czml?1547637699540.

Scott

13

It looks strange for Jan.24
In point4 of my text of Jan.24 I wrote this link:


The CZML inside this link ist displayed as text [.....] but not as own file.
Josef

14

Double sorry. I reread your original question and now understand that the problem is how to load a czml file from where Glitch is hosting the app.