Today I Learned: Pattern for Specifying the CZML Map to Load in an iframe URL

 I learned a way to make my POTA activation blogs a bit easier to create today. 

When to Use the Pattern

When you'd like to use the same Sandcastle to open multiple different czml files without having to edit Sandcastle code every time.

More generally, the pattern can be used to pass any number of URL encoded parameters to your Sandcastle Javascript via your Sandcastle's web address.

What the Pattern Enables

The user can specify a czml file URL like this

https://sandcastle.cesium.com/standalone.html?mapurl=https://raw.githubusercontent.com/hcarter333/rm-rbn-history/refs/heads/main/maps/2024_11_18_Civic_Center_Juan_Bautista.czml#c=dV...

Where the #c is the usual 64 bit encoded contents of your Sandcastle from the share link.

Your Sandcastle will need to include this code through line 15. At that point, you'll have the address of your map in the variable mapurl2 and can do whatever you like with it. In the example above, the czml file pointed to is simply loaded into a Cesium viewer with an OpenStreets map overlay.

Why I Invented the Pattern

In th past, I've navigated to Cesium Sandcastle, loaded in some JavaScript to open a czml file at a URL, then pointed that URL at the CZML defined map for my particular radio outing hosted on Github, and then used the link from the 'Open in New Window' button in an iframe to display the map in my blog post.

I now have a template where I can simply substitute in the URL for the GitHub hosted raw CZML file and I'm off and running.

How I Built This

I asked ChatGPT to create JavaScript for me that would pull the CZML URL out of the browser window's address bar. After a little massaging and debug, I wound up with the source code that enables this pattern.  You can see the code here.

A few notes about the Cesium SandCastle URL

I found out yesterday that the #c marker in the Sandcastle URL is followed by your JavaScript code 64 bit encoded. That's why the link is as long as it is. I also found out that the decoding portion of Cesium,  expects everything after #c to be Base64 encoded information for use by Sandcastle. So, if you'd like to follow this pattern of passing extra arguments to your Sandcastle code in the URL address, be sure to include the extra parameters before the #c anchor as shown below.

In my case, that made the address look like this:

https://sandcastle.cesium.com/standalone.html?mapurl=https://raw.githubusercontent.com/hcarter333/rm-rbn-history/refs/heads/main/maps/2024_11_18_Civic_Center_Juan_Bautista.czml#c=dVPBbtswDP0VwhhQBwhkZAOGLk2zDe0OBTK0WLrt4kMVm3GEyZIh0QnSoP8+yrKbtelOhsjHx8dHOje5WbemIGUNVEh30sk6NbLGERxyA5BlQG4PHqUrNrBWztMYaIMGNtJvAqKwxhN427oC4RJ2ypR2J7QtZCAVsVJoNBVtYA6TUAPw+X9A3648OWWqdDKK0OkJNLQWXqsCGXQxiLAaGVKleRLF5Mlp7u2mRxxBwzMY3MHPH4tll+ws8WnkjEiH1DoDjWDHolkcfspNZKhl0zr9nnmeDc2TGIySXortPD1N9CwhPBAXj7Vm1jzJkwsYgluFO3S96Cv0qq3Fry7G3EX3vrKGpDLo8mQMByB0jp/TAX0f32LtbP3bOl32gXQ0hqfQfysdWF+/7HHboFmSQ6TvsrmpZYVuf+fsVpXc+QCsnRd3tiFq/DTLSPFYlkt8V8LDCeuqs8DfTyBU5FjIPTovZFm+JmUJozB3j/cFGhSVtisUaORK40JVG+LLYaHkWuycC8d7OG436PBIjJA7qWgYJn4+XN/HdGfFjTVfPT9uyvTTx8n5eVz9i+aNU7UitcVOb9qTd8cAfGD8w6RspXWjo4RhvQ/fQgK0lWVQ3JdO4d2hq3h66E9qWHMpSS67E2Q/auXDrzaI57O4fk6LQHm8nqNfR4ao9oQxnloyTmae9hrn8e8D+KLqxjoKK02FyAjrRktCn63a4g+bVXgfvQGYZf+Wzkq1BVVevnGHUGjpPWfWrdZL9cg/63yWMf6ktHfodotOy32AbSbzRQwKIWYZP9+uJGv1SrpXzDzfcJRemrKQnnglUaAobJ1VUms+u+wv

And that address will load the map for the czml file specified immediately after the ? in the URL. The iframe below contains the link above.

Demo