Module 08

Cesium Ion (& Mapbox)

Yesterday at the Mammoth Cave
Webcam archive

GEO 409: Advanced GIS

Announcements

Open lab during class times next week.
a.k.a Collaboration Week.
Can't make it?
Let's Zoom!

Announcements

Thursday Night Live music
downtown Lexington.

Announcements

New Notebook to process hundreds of LAZ files: process-laz2las.ipynb.
Automatically downloads and processes Phase 2 LAZ files for polygon AOI.
Create derivative raster layers for DSM and DEM
for use in Modules 6–8.

Example

Pine Mountain State Resort Park & Pineville
132 LAZ files makes 98 GB of LAS files.
DSM and hillshade rasters created, 30k x 35k pixel resolution. 5 GB.
Roughly three hours to process.

Example

Woodford, Jessamine, Boyle, and Mercer Counties
1080 LAZ files makes 418 GB of LAS files.
DSM and hillshade rasters created. 15 GB on disk.
Roughly eight hours into processing so far...
...problem: when app crashes, pick up where you left off.

50th GiB Day

Dilni won Cartography Award last year with this portfolio.
Document your work in a portfolio! Include everything 'cause y'all never know what's gonna stick.

Examples from you!

link

Final module of semester

Explores pro mapping platforms
- Cesium
- Mapbox in Addendum

Cesium Ion: PowerPoint of Point Clouds

Mapbox: Photoshop of Map Making

Goals

Gain familiarity with the popular uses of the Cesium platform.
Create a final web page.
Strengthen our understanding of how to publish content with HTML.

Final project

Pick an area of interest in Kentucky and map it.
- You know how to get detailed data.
- Make a Cesium Story map.
- Explore two additional ways to visualize data.
- Publish it to a new repository. Share it with the world.
Requirements in Mod 08

Cesium ion

Cesium

3D geospatial applications that can ingest many 3D data formats.
One the first open-source virtual globes.
Free 5 GB of hosted 3D data.
Tiles data and delivers only what the browser needs (a.k.a., what is in the view).
cesium.com/ion/signin

Stories from point clouds

Created Cesium ion Stories in 2020 to be the 'PowerPoint for point clouds'
and that's what we are going to make.
First, we need LAS files!

Cesium ion data

Check your application folder version deux of the explore-lidar.ipynb Notebook.
Updates can be found here: explore-lidar-and-change-ii.ipynb notebook.
Practice with this merged LAS file.
Upload to My Assets in Cesium ion

Open VS Code

Save the Embed code
into the lesson-map/index.html file
overwrite the existing code.

#### Find this starting around line 90
				```html
				
				<iframe
					title="Cesium area of interest"
					width="100%"
					height="576"
					src="https://cesium.com/ion/stories/viewer/?id=0e1e55df-95ef-490b-9958-25d356d0378a"
					frameborder="0"
					allow="fullscreen"
					allowfullscreen="true"
					mozallowfullscreen="true"
					webkitallowfullscreen="true">
			  	</iframe>
				```

___
				#### Replace this with your embed code
				```html
				<iframe title="Three Kentucky Dams" width="1024" height="576" 
				src="https://cesium.com/ion/stories/viewer/?id=bda97de8-0bc0-4bbc-9215-7a237bee70c6" 
				frameborder="0" allow="fullscreen" allowfullscreen="true" mozallowfullscreen="true"
				webkitallowfullscreen="true"></iframe>
				```

___
				#### Change `width` attribute to `100%`
				```html
				
				width="1024"

width="100%"
				```

___
				### View in browser
				
				* Save `index.html`
				* Click the **Go Live** button in the lower-right corner.

Tips for final project

In VS Code, edit lesson-map/index.html
to include maps, content, and reqs from final project.
Copy contents of lesson-map folder to new repo.

More tips

Put all files in top-level directory (the root) of the new repo.
EVERYTHING is case-sensitive.
DON'T USE \ backslashes. Use / forward slashes.

Basic HTML

Start with the basics in this tutorial.
When you see a tag, e.g.,
```
<p></p>
```
look up the p tag here.
Experiment! Copy! Experiment!

Exploring GitHub

for new templates and inspiration.
Check out this and then search for this.
Want more? Accept this lesson invitation from MAP 672 that explores HTML, CSS, and JS.

GOOD LUCK

STAY POSITIVE

Addendum: Mapbox

Platform?

How do you assemble and publish the map?
Static map?
- A non-interactive map image.
- Requires good cartographic skills.
Slippy map?
- An interactive map that pans and zooms.
- Requires coding skills and/or good platform.

MAPBOX

## Mapbox

* primo 🍭 slippy map builder/host
				* recognize our connected devices make us sensors
				* real-time data-driven location services
				* [mapbox.com](https://www.mapbox.com/)

---
				### Rise of mapping services
				<iframe width="560" height="315" src="https://www.youtube.com/embed/1lrJug1kgM0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><br>
				It's a good time to be a cartographer!

---
				## Map tiles
				### Quick history of slippy base maps

---
				## mid 2000s
				# Raster tiles
				* Rendered on server
				* Delivered as static image
				
				---
				## 2014
				# Vector tiles
				* Rendered in browser
				* Delivered with geometries and metadata

---
				## Zoom levels
				* 4<sup>zoom level</sup> number of tiles
				* Zoom level 22 sufficient
				* 1.76 x 19<sup>13</sup> tiles

---
				## Raster v. Vector
				# Compare
				* [OSM](https://www.openstreetmap.org/#map=2/37.3/-79.4)
				* [Mapbox](https://api.mapbox.com/styles/v1/mapbox/streets-v9.html?title=true&access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA#1.07/0/0)

---
				### The winner
				<iframe src="https://api.mapbox.com/styles/v1/mapbox/streets-v9.html?title=true&access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA#1.07/0/0" width="100%" height="500"></iframe>

---
				## Mapbox uses
				# OSM Data
				Consider their license requirement:

---
				### [mapbox.com/signup](https://www.mapbox.com/signup/)

---
				## Terminology
			
				* **Dataset** is editable
				* **Tileset** is symbolized
					* Tilesets can contain many layers
				* **Style** is a map

---
				### Formats
				* **Vector**: Shapefile (or GeoJSON which needs to be in EPSG: 4326)
				* **Raster**: GeoTIFF, EPSG: 3857

---
				## Studio
			
				* The Photoshop of online mapping
				* Rule-based classification and symbology
				* Change appearance as we zoom

---
				## Styles
	
				* Aka "the map"
				* Symbolized tilesets that we can share
				* Free, curated "Designer" sets!

---
				## Their imagery is amazing
				<iframe width="560" height="315" src="https://www.youtube.com/embed/1C2PbWr9tpY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Let's Start!

Data?

Usually the most difficult first step.
- Either too much (need to clip)
- or too little (need to create).
Use the application notebooks to create perfect data.

Vector Data!

Contours from modified contours.ipynb notebook
- create Shapefile (multi-file format)
- and zips them up, ready to upload as a tileset.

Raster Data!

Create square layout in ArcGIS Pro
Add map frame (projected to EPSG 3857)
to fill entire layout.
Export as TIFF with GeoTIFF tags.

Practice data

Use Natural Bridge State Resort Park as example.

Let's jump into Mapbox

Instructions

Demo in lesson doc.

Finished?

After designing your style, i.e., map, in Studio
zoom to your area of interest
and re-lock the Settings > Default map position > Lock to center your map.
Click Share...

Open VS Code

Save the Style URL
and Access token
into the lesson-map/map.html file.