Skip to content

Commit 66317a3

Browse files
author
Quarto GHA Workflow Runner
committed
Built site for gh-pages
1 parent 96e2fe1 commit 66317a3

File tree

22 files changed

+419
-505
lines changed

22 files changed

+419
-505
lines changed

.nojekyll

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
ba1be3b9
1+
d7f6469c

cesium/3daerial.jpg

-211 KB
Loading

cesium/3dtiles.jpg

-187 KB
Loading

cesium/Stadia.jpg

-170 KB
Loading

cesium/firedemo.jpg

-135 KB
Loading

cesium/geovis.html

Lines changed: 51 additions & 158 deletions
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@
119119
<meta property="og:site_name" content="Clojure Civitas">
120120
</head>
121121

122-
<body class="nav-fixed fullcontent quarto-light"><script id="quarto-html-before-body" type="application/javascript">
122+
<body class="nav-fixed quarto-light"><script id="quarto-html-before-body" type="application/javascript">
123123
const toggleBodyColorMode = (bsSheetEl) => {
124124
const mode = bsSheetEl.getAttribute("data-mode");
125125
const bodyEl = window.document.querySelector("body");
@@ -345,12 +345,12 @@
345345
</nav>
346346
</header>
347347
<!-- content -->
348-
<div id="quarto-content" class="quarto-container page-columns page-rows-contents page-layout-article page-navbar">
348+
<div id="quarto-content" class="quarto-container page-columns page-rows-contents page-layout-full page-navbar">
349349
<!-- sidebar -->
350350
<!-- margin-sidebar -->
351351

352352
<!-- main -->
353-
<main class="content" id="quarto-document-content">
353+
<main class="content column-page" id="quarto-document-content">
354354

355355

356356
<header id="title-block-header" class="quarto-title-block default">
@@ -364,7 +364,7 @@ <h1 class="title">Working with Cesium</h1>
364364
</div>
365365
</div>
366366

367-
<div class="quarto-title-meta-author">
367+
<div class="quarto-title-meta-author column-page">
368368
<div class="quarto-title-meta-heading">Author</div>
369369
<div class="quarto-title-meta-heading">Affiliation</div>
370370

@@ -380,7 +380,7 @@ <h1 class="title">Working with Cesium</h1>
380380
</div>
381381
</div>
382382

383-
<div class="quarto-title-meta">
383+
<div class="quarto-title-meta column-page">
384384

385385

386386
<div>
@@ -438,14 +438,15 @@ <h1>Fire Data</h1>
438438
<span id="cb3-4"><a href="#cb3-4" aria-hidden="true" tabindex="-1"></a> (tc/select-rows (<span class="kw">fn</span> [{<span class="at">:keys</span> [Discover_DateTime Control_DateTime]}]</span>
439439
<span id="cb3-5"><a href="#cb3-5" aria-hidden="true" tabindex="-1"></a> (<span class="kw">and</span> Discover_DateTime Control_DateTime)))))</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
440440
</div>
441+
<p>Here’s a a feel for the structure based on the first 10 records.</p>
441442
<div class="sourceClojure">
442-
<div class="sourceCode" id="cb4"><pre class="sourceCode clojure code-with-copy"><code class="sourceCode clojure"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true" tabindex="-1"></a>fire-data</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
443+
<div class="sourceCode" id="cb4"><pre class="sourceCode clojure code-with-copy"><code class="sourceCode clojure"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true" tabindex="-1"></a>(tc/head fire-data <span class="dv">10</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
443444
</div>
444445
<div class="clay-dataset">
445-
<p>src/cesium/ODF_Fire_Occurrence_Data_2000-2022.csv.gz [23391 10]:</p>
446+
<p>src/cesium/ODF_Fire_Occurrence_Data_2000-2022.csv.gz [10 10]:</p>
446447
<table class="caption-top table">
447448
<colgroup>
448-
<col style="width: 10%">
449+
<col style="width: 8%">
449450
<col style="width: 7%">
450451
<col style="width: 8%">
451452
<col style="width: 13%">
@@ -591,150 +592,6 @@ <h1>Fire Data</h1>
591592
<td style="text-align: right;">-123.70566</td>
592593
<td>Public Utility</td>
593594
</tr>
594-
<tr class="odd">
595-
<td></td>
596-
<td></td>
597-
<td style="text-align: right;"></td>
598-
<td></td>
599-
<td></td>
600-
<td></td>
601-
<td></td>
602-
<td style="text-align: right;"></td>
603-
<td style="text-align: right;"></td>
604-
<td></td>
605-
</tr>
606-
<tr class="even">
607-
<td>Tranisent</td>
608-
<td>A</td>
609-
<td style="text-align: right;">0.00</td>
610-
<td>08/01/2021 07:30:00 AM</td>
611-
<td>08/01/2021 07:55:00 AM</td>
612-
<td>08/01/2021 07:45:00 AM</td>
613-
<td>08/01/2021 08:25:00 AM</td>
614-
<td style="text-align: right;">43.38583</td>
615-
<td style="text-align: right;">-121.72947</td>
616-
<td>Other-Public</td>
617-
</tr>
618-
<tr class="odd">
619-
<td>Moon Mountain</td>
620-
<td>A</td>
621-
<td style="text-align: right;">0.03</td>
622-
<td>09/07/2022 08:00:00 AM</td>
623-
<td>09/07/2022 08:30:00 AM</td>
624-
<td>09/07/2022 08:15:00 AM</td>
625-
<td>09/10/2022 10:30:00 AM</td>
626-
<td style="text-align: right;">42.43686</td>
627-
<td style="text-align: right;">-123.28304</td>
628-
<td>Transient</td>
629-
</tr>
630-
<tr class="even">
631-
<td>Riverbanks Rd 5075</td>
632-
<td>A</td>
633-
<td style="text-align: right;">0.01</td>
634-
<td>07/07/2022 06:00:00 PM</td>
635-
<td>07/07/2022 06:14:00 PM</td>
636-
<td>07/07/2022 06:08:00 PM</td>
637-
<td>07/10/2022 06:08:00 PM</td>
638-
<td style="text-align: right;">42.44781</td>
639-
<td style="text-align: right;">-123.49880</td>
640-
<td>Motorist</td>
641-
</tr>
642-
<tr class="odd">
643-
<td>Grouse Ridge</td>
644-
<td>A</td>
645-
<td style="text-align: right;">0.10</td>
646-
<td>03/24/2022 08:00:00 PM</td>
647-
<td>03/25/2022 10:27:00 AM</td>
648-
<td>03/25/2022 10:00:00 AM</td>
649-
<td>03/25/2022 01:00:00 PM</td>
650-
<td style="text-align: right;">42.56072</td>
651-
<td style="text-align: right;">-122.46125</td>
652-
<td>Recreationist</td>
653-
</tr>
654-
<tr class="even">
655-
<td>Marmot Rd Pile</td>
656-
<td>B</td>
657-
<td style="text-align: right;">9.00</td>
658-
<td>06/28/2022 12:00:00 PM</td>
659-
<td>06/28/2022 12:05:00 PM</td>
660-
<td>06/28/2022 12:05:00 PM</td>
661-
<td>06/28/2022 06:00:00 PM</td>
662-
<td style="text-align: right;">45.40670</td>
663-
<td style="text-align: right;">-122.15716</td>
664-
<td></td>
665-
</tr>
666-
<tr class="odd">
667-
<td>Bagley Creek</td>
668-
<td>A</td>
669-
<td style="text-align: right;">0.01</td>
670-
<td>07/09/2022 10:00:00 AM</td>
671-
<td>07/09/2022 10:15:00 AM</td>
672-
<td>07/09/2022 10:15:00 AM</td>
673-
<td>07/09/2022 10:45:00 AM</td>
674-
<td style="text-align: right;">42.76889</td>
675-
<td style="text-align: right;">-124.46778</td>
676-
<td>Motorist</td>
677-
</tr>
678-
<tr class="even">
679-
<td>Road 2430</td>
680-
<td>B</td>
681-
<td style="text-align: right;">0.75</td>
682-
<td>06/26/2021 04:00:00 PM</td>
683-
<td>06/26/2021 04:58:00 PM</td>
684-
<td>06/26/2021 04:45:00 PM</td>
685-
<td>06/26/2021 09:58:00 PM</td>
686-
<td style="text-align: right;">43.52875</td>
687-
<td style="text-align: right;">-121.35672</td>
688-
<td>Recreationist</td>
689-
</tr>
690-
<tr class="odd">
691-
<td>Spruce Path</td>
692-
<td>A</td>
693-
<td style="text-align: right;">0.01</td>
694-
<td>09/13/2022 11:20:00 AM</td>
695-
<td>09/13/2022 11:20:00 AM</td>
696-
<td>09/13/2022 11:20:00 AM</td>
697-
<td>09/13/2022 12:14:00 PM</td>
698-
<td style="text-align: right;">43.97600</td>
699-
<td style="text-align: right;">-124.09933</td>
700-
<td>Transient</td>
701-
</tr>
702-
<tr class="even">
703-
<td>Bone Canyon</td>
704-
<td>C</td>
705-
<td style="text-align: right;">67.43</td>
706-
<td>06/13/2021 05:22:00 PM</td>
707-
<td>06/14/2021 12:45:00 PM</td>
708-
<td>06/14/2021 12:45:00 PM</td>
709-
<td>06/17/2021 05:10:00 PM</td>
710-
<td style="text-align: right;">45.01056</td>
711-
<td style="text-align: right;">-119.08639</td>
712-
<td>Lightning</td>
713-
</tr>
714-
<tr class="odd">
715-
<td>Milepost 231</td>
716-
<td>A</td>
717-
<td style="text-align: right;">0.10</td>
718-
<td>08/19/2022 03:09:00 PM</td>
719-
<td>08/19/2022 03:09:00 PM</td>
720-
<td>08/19/2022 03:09:00 PM</td>
721-
<td>08/19/2022 04:41:00 PM</td>
722-
<td style="text-align: right;">45.58639</td>
723-
<td style="text-align: right;">-118.46167</td>
724-
<td>Motorist</td>
725-
</tr>
726-
<tr class="even">
727-
<td>That Way 774</td>
728-
<td>A</td>
729-
<td style="text-align: right;">0.01</td>
730-
<td>08/19/2022 05:00:00 PM</td>
731-
<td>08/19/2022 05:00:00 PM</td>
732-
<td>08/19/2022 05:00:00 PM</td>
733-
<td>08/19/2022 06:07:00 PM</td>
734-
<td style="text-align: right;">44.57139</td>
735-
<td style="text-align: right;">-121.38278</td>
736-
<td>Lightning</td>
737-
</tr>
738595
</tbody>
739596
</table>
740597
</div>
@@ -822,7 +679,13 @@ <h1>The App</h1>
822679
<p>The application is a typical CesiumJS widget with some reagent ui bits. We have the primary geospatial view, which default to an interactive globe with the ability to spin, zoom, pan, and tilt the view with the mouse or a touchscreen.</p>
823680
<p>Cesium is meant to show animated 3d visuals on top of geospatial layers and projections, so it prominently features a timeline on the bottom. This is an interactive ui that allows the user to move forward and backward into arbitrary points in time, with any temporal data in the visual updating accordingly.</p>
824681
<p>Additionally, the timeline has a control mechanism in the bottom left clock, which allows time to progress forward or backward at a constant rate, to change the rate of change, or to pause the passage of time.</p>
682+
<section id="interactive-globe-renders-below" class="level2">
683+
<h2 class="anchored" data-anchor-id="interactive-globe-renders-below">Interactive Globe Renders Below</h2>
825684
<div id="app"><script src="core.cljs" type="application/x-scittle"></script></div>
685+
</section>
686+
</section>
687+
<section id="additional-ui" class="level1">
688+
<h1>Additional UI</h1>
826689
<p>As a bonus, I tossed in a few buttons below the main view to simplify the interface. We can load all 23K of our fire data (spanning 2000-2022), if we click “Load Fires!”.</p>
827690
<p>After a second or two the fire events will be loaded and we’ll notice the timeline has changed with a new start time somewhere in the year 2000.</p>
828691
</section>
@@ -836,7 +699,12 @@ <h1>A Note on Map Tiles and Base Layers</h1>
836699
<h2 class="anchored" data-anchor-id="stadia-tiles-work-in-dev-but-not-production-intended">Stadia Tiles Work In Dev But Not Production (Intended)</h2>
837700
<p>Missing tiles occurs more commonly with the (very nice) series of Stadia tilesets. To add to the confusion, they are explicitly designed to work if you are working on a local development environment, e.g.&nbsp;if you cloned the clojure civitas repository and loaded this example locally instead of going through the clojure civitas github pages site, all of the Stadia tiles will work flawlessly. This is due to the circa 2023 move toward a funded tile hosting service, per https://github.com/CesiumGS/cesium/pull/11485 Since then, Stadia now hosts all the Stamen maptiles, and has terms of service per https://docs.stadiamaps.com/authentication/#authentication . In the case of local development, they allow requests from localhost, but will require an api or an authenticated domain, which requires registering with their service.</p>
838701
<p>At the time of publication, I missed this change, and so we have a change in tileset and presentation to account.</p>
839-
<div><img src="Stadia.jpg"></div>
702+
<div class="quarto-figure quarto-figure-center">
703+
<figure class="figure">
704+
<p><img src="Stadia.jpg" class="img-fluid figure-img"></p>
705+
<figcaption>Stadia Notes</figcaption>
706+
</figure>
707+
</div>
840708
</section>
841709
</section>
842710
<section id="back-to-the-app" class="level1">
@@ -869,21 +737,46 @@ <h2 class="anchored" data-anchor-id="ui">UI</h2>
869737
<p>It might be nice to have some additional information like cities and streets. We can click on the layer picker in upper right, and pick the ‘Bing Aerial Maps With Labels’ layer, or any of the other road maps.</p>
870738
<p>Once that’s done, we’ll zoom in to Oregon in the northwest corner of the US. This is where our data lives, so our fires will show up animating around here as simple arcs popping up from the earth over time, corresponding to the presence of a fire.</p>
871739
<p>If we hit play at this point, we might find a view that looks like this:</p>
872-
<div><img src="firedemo.jpg"></div>
740+
<div class="quarto-figure quarto-figure-center">
741+
<figure class="figure">
742+
<p><img src="firedemo.jpg" class="img-fluid figure-img"></p>
743+
<figcaption>some fires</figcaption>
744+
</figure>
745+
</div>
873746
<p>We can pause the view using either the Stop button or the Cesium UI button in the bottom left Clock widget. Since fires are also entities, we can click on one and get some information.</p>
874747
<p>If you are running locally (or in the future, if I pony up for an API key from Stadia) then you can get a view of their Stamen Toner map like this one:</p>
875-
<div><img src="simplefires.jpg"></div>
748+
<div class="quarto-figure quarto-figure-center">
749+
<figure class="figure">
750+
<p><img src="simplefires.jpg" class="img-fluid figure-img"></p>
751+
<figcaption>toner layer</figcaption>
752+
</figure>
753+
</div>
876754
<p>We change projections with the upper right corner UI control. Clicking on the wireframe globe lets us choose either a 2d planar overhead projection, or a 2.5 Columbus view. Let’s use that.</p>
877755
<p>For reference if we had access to the Stamen Toner layer, this is one more view:</p>
878-
<div><img src="toner.jpg"></div>
756+
<div class="quarto-figure quarto-figure-center">
757+
<figure class="figure">
758+
<p><img src="toner.jpg" class="img-fluid figure-img"></p>
759+
<figcaption>2.5d toner layer</figcaption>
760+
</figure>
761+
</div>
879762
</section>
880763
</section>
881764
<section id="d-tiles" class="level1">
882765
<h1>3D Tiles</h1>
883766
<p>One of the biggest features is Cesium’s Ion streaming 3d tile service. We can demo it and turn our flat globe surface into detailed textured terrain.</p>
884-
<div><img src="3daerial.jpg"></div>
767+
<div class="quarto-figure quarto-figure-center">
768+
<figure class="figure">
769+
<p><img src="3daerial.jpg" class="img-fluid figure-img"></p>
770+
<figcaption>2.5d 3d aerial layer</figcaption>
771+
</figure>
772+
</div>
885773
<p>The hillshade layer shows off more of the terrain:</p>
886-
<div><img src="3dtiles.jpg"></div>
774+
<div class="quarto-figure quarto-figure-center">
775+
<figure class="figure">
776+
<p><img src="3dtiles.jpg" class="img-fluid figure-img"></p>
777+
<figcaption>2.5d 3d hillshade layer</figcaption>
778+
</figure>
779+
</div>
887780
<p>Stay tuned for more 3d stuff.</p>
888781
</section>
889782
<section id="outro" class="level1">

cesium/toner.jpg

-108 KB
Loading

0 commit comments

Comments
 (0)