Happy Valentimz y'all
valuable lesson here

Announcements

Career Night
April 12 5-8 pm in the Community Room (across the hall)

University of Northern Colorado Humanitarian Mapathon
Weldwerks Brewing, 508 8th Ave, Greeley CO
Thursday March 2nd, 5:00-7:00pm
https://www.meetup.com/OSM-Colorado/events/237680734

Regarding restriction of racial disparity geospatial data
There is a petition to sign here

Quotation marks fixed!

New way to submit labs...

Anything else?

Web Map of the Week

The National Map
https://viewer.nationalmap.gov/viewer/

Not hatin, but not inspired by the interface for a widely available and maintained National Map...

Use case: download old school topo map for Comanche Peaks

    Think about...
  • What is the purpose?
  • How easy is it to use?
  • Who is the intended audience?
  • Any other use cases?

Reading and Lesson Review

https://play.kahoot.it/

Lesson 1

CSS

CSS Holiday Fun

CSS Declaration

"Setting CSS properties to specific values is the core function of the CSS language"

A property and value pair is called a declaration

color: blue

"The CSS engine calculates which declarations apply to every single element of a page in order to appropriately lay it out, and to style it"
https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
Selecting by Element
    You can style by:
    • tag or element type
    • h1, img, p, etc.
    • applies to every element of that type, everywhere, all the time

    • element id
    • # -noted with a preceeding period in css (e.g. #leftPanel)
    • applies to one single element in the html
    • remember last week when we assigned an id to our text input (id="nameInput")

    • element class
    • . -noted with a preceeding period in css (e.g. .panel)
    • applies to any element who has that class assigned in the html
    • class="one-of-many"

CSS Selectors

For now just know that you can select very specific elements using selectors. Not just single or multiples of elements...

CSS Show and Tell...

#Show+Tell

Follow along with your eyes only, but

Ask questions!

Lab 1

CSS

Lab Dropbox

Break

Lesson 2

How a web page is built

How a web page is built

When you go to a url, what happens?

imma broke
How a web page is built

What happens when you get the HTML document?

imma broke
Remember adding the links and scripts references in your web maps?

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />

<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>

Also any images you reference will be loaded now too
The Build

Now the page is built and the Document Object Model (DOM) is rendered

imma broke
Web Mapping APIs
    We have used or reviewed 3 so far
  • leaflet js
  • arcgis js
  • mapbox js
Web Mapping APIs

The common feature among them, and all web mapping apis, is the ability to easily create a map and add layers to it.

Web Mapping APIs

making a map using the arcgis js api

imma broke
Web Mapping APIs

adding a layer to a map using the arcgis js api

imma broke
Web Mapping APIs

You will be reading about web mapping apis for next week. Just understand that there are many and they provide various levels of functionality.

It also focuses on Open Layers but does a good job of describing the basic functions and explaining that there are many others available.

What is the very basic #html we need to make a web map?

A container!




<div id="map"></div>

What is the basic thing we need to add a layer to a web map?

A URL!




So referencing back to all of the #OpenData portals we've seen, you just need to grab the url.

*The API you're using has to be able to read it…

Lab 2

Web Mapping APIs
For Next Week
    Reading from Text book
  • 4.3.1: Mashup Design and Implementation > Steps to Building…
  • 4.4: Challenges and Prospects
For Next Week

Assignment Notes

    4.3.1 - Keep all of our class tags in mind here
  • #OpenData - we have reviewed many open data portals
  • Consider the ways we have already made mashups
    configuration with agol and mapbox
    programming web maps (in jsbin)
    4.4: Challenges and Prospects
  • Read this keeping in mind all that we've talked about so far in using open data portals and how much more accessible making web maps has become
    ‘What is a web mapping API?’ lesson
  • Understand that there are many web mapping APIs and they provide various levels of functionality but that there are core features they all do, namely make a map and add layers
  • It also focuses on Open Layers but does a good job of describing the basic functions and explaining that there are many others available.